Netlify + Stenciljs — Lightning Fast PWA

I’ve been messing around with StencilJS lately, and I’m in love.

Stencil allows you to write standards compliant web components that work with any framework. In my case, I’m just writing my website as a PWA using Stencil with pages as sub components. Read more about Stencil here: https://stenciljs.com/

I wanted to host my latest project via Netlify because of how easy it is to get a hosted website up and running. Netlify can link to your existing repository, then with each time you push to master, Netlify will build and deploy your site. They’ll host it for free, automatically on https (required for http/2 push) and give you previews for any branch of your code to test prior to deploying.

So here it goes — how to host your StencilJS app via Netlify.

1. Setup a Netlify Site

1. Log into Netlify
2. Link it to your GitHub, GitLab, or Bitbucket account
3. Choose the project that you want to deploy
4. Then set your deploy settings:

Later we will change this to run our own build command “npm run build.netlify”

For a stencil app, you’ll want to have the Build command be “npm run build,” and the publish directory be www.

Every time you push code to your master branch, Netlify will build and deploy your site! Boom — Done.

One problem you’ll notice though. If you navigate from the home page the urls will work, and it will seem fine. However, if you refresh the page on a specific URL, you’ll get a “Page Not found” error like the one below:

e.g. If I type in this URL:

https://stencil-app.netlify.com/profile/cory

I got this:

When going directly to a sub page of your app, you’ll get an error at first…

No worries though. Netlify will allow you to run your SPA (single page application), you’ll just need to add a redirects file.

2. Handle redirects

Create a new file called “_redirects” inside your src folder and add this code (Don’t push your code yet):

/* /index.html 200

This file will essentially tell Netlify to direct all traffic through your index.html. For more information on redirects: https://www.netlify.com/docs/redirects/

Now you need to make sure this file is inside the folder that gets deployed in our case it’s the www folder. We are going to add our own build script specific to our package.json file. This script will copy the _redirects file to the www folder so that Netlify can read it:

"build.netlify": "npm run build cp src/_redirects www/_redirects"

You’ll now need to update your Netlify build settings we set up in step one. Change your deploy settings to:

npm run build.netlify

3. Push Code to master

Great, now you can push your code to your master branch (including the new _redirects file you created). After pushing your code, wait a few minutes and your site will be live again, this time accessing URLs directly will work like a charm.

I hope you found this article useful. I’m not paid by Netlify or Stenciljs, I just love their products!