How to Deploy a StencilJS Site on Firebase Hosting

This article is part of the Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021.

StencilJS, a web component output library, includes a router, so you can build a web app with it alone. It also has prerender support, so you can output a static site with SSG.

The StencilJS website itself is built with StencilJS.

https://stenciljs.jp/https://stenciljs.jp/

However, after verifying it locally, deploying to Firebase Hosting with the default settings caused some files to return 404 Not Found, so I am documenting how to fix that.

First, remove hashes from StencilJS output and set noCache to control caching at the same time. Configure stencil.config.ts as follows.

  export const config: Config = {
+   hashFileNames: false,
+   enableCache: false,
    globalStyle: 'src/global/app.scss',
    globalScript: 'src/global/app.ts',

Also configure firebase.json as follows. Even with prerender, you need rewrites because it is still an SPA.

{
  "hosting": {
    "public": "www",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Simple enough. See you next time.