How to use a template HTML with Snowpack 3?

Question

I am new to Snowpack and I have a Template.html' file in my source folder that I would like Snowpack to read and produce an index.html` in the destination output folder. It would also be nice if I can use some variables in the template that Snowpack would simply substitute from the environment or configuration file. Any idea how to achieve this?

Answer 1

If I understand correctly, you are looking to use an alternative to index.html. I'm not sure if you are using react or a different framework, but in case you are using react, I found a solution.

---

This context is for flavor and is not related to the question, but I'll share in case it is helpful to others. In my case, I wanted to block the following warning on my production build (due to react-scripts, not snowpack):

Loading module from “http://localhost:3000/dist/index.js” was blocked because of a disallowed MIME type (“text/html”).

This is because snowpack requires the following script tag in index.html to generate your pages:

...
    <script type="module" src="/dist/index.js"></script>
...

I don't need snowpack in production at this time ---I'm just here for the module hot reloading for now --- so I want to suppress this warning with an alternative index.html file, just for snowpack so that it has this script tag.

---

Solution:

So for your case where you want to use variables in snowpack --- but not your production build (or other run scripts for that matter) --- you can do the following:

1. Create a template with the above script in your index.html body, plus whatever other vars you need. Name it something other than "index.html". I went with indexsnowpack.html for simplicity.

2. Add the following route (Docs here) to your snowpack.config.js file in your apps root directory:

module.exports = {

...

    routes: [
        {
            match: "routes", 
            src: ".*", 
            dest: "/indexsnowpack.html"
         }
    ]
...

}

BEWARE: The above solution will match all paths to your new indexsnowpack.html file. So if you are not using a single-page application setup, you'll run into some hiccups. Further, if you have other routes defined (e.g., for api calls), place those above this route so that this route functions as a fallback for all calls except your api.