Building a PWA with Stencil

Building a PWA with Stencil

PWAs or Progressive Web Apps are an app-like web experiences that present many advantages to users such as:

  • Reliability
  • Engage-ability
  • Rapidity/Performance

Read more about what makes an app a PWA from Google developers blog

You can also read my article about PWAs in SitePoint

Without further information about PWAs let's learn how we can build a very fast PWA using a new tool created by the Ionic Team StencilJS

Stencil is a web components compiler that can be used to build modern and fast front end web applications using web components.

New to this concept of web components? this is an easy to understand definition

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.Source

So web components are a set of modern browsers to allows developers to create their own HTML tags (i.e they can extend the HTML language), re-use them without re-inventing the wheel each time and share them with other developers.

Once you create a web component you can use it just lie you use any standard HTML tag. For example:

<my-comp></my-comp>

It goes without saying that you can create web components without Stencil so why using Stencil?

Stencil provides you with

  • an easy TypeScript API to create your component and then generate a standard compliant web component (specifically a Custom Element)
  • a set of modern APIs such as virtual DOM and JSX
  • 6kb min+gzip runtime, server side rendering
  • React Fiber inspired Async rendering
  • Reactive data-binding
  • Framework agnostic (web components can be used with any framework or with no framework if you choose)
  • live reload and development server like most modern tools
  • and helps you easily build PWAs based based on web standards and without a framework

Watch this launch video for more information

What You Will Learn?

In this tutorial we'll get started using Stencil and learn the very first basics then next we'll build a simple real world PWA.

You'll learn

  • how to install Stencil
  • how to create your first web component with Stencil and TypeScript
  • how to build and generate your web component
  • how to build a simple PWA from scratch using Stencil

Requirements

Like most modern JavaScript tooling these days, you'll need Node.js and NPM installed.

If they are not yet installed (maybe your bought a new computer!) just head over to the official website for Node.js and grab the installer for your operating system. The installation process is generally simple.

Starting a New Stencil Project

Starting a Stencil project involves only cloning an official project starter from GitHub then install the dependencies

So head over to your terminal (or command prompt) and run the following command (you need to have Git installed)

git clone https://github.com/ionic-team/stencil-app-starter my-stencil-pwa

This will create the my-stencil-pwa folder and clone the starter project files there.

You'll need to navigate inside the root folder of your project and install dependencies:

cd my-stencil-pwa
npm install

Next you can start a live-reload local server by running the npm start script

npm start

If you get an error related to Node.js ENOSPC (Error Not Enough Space) on Linux or Mac but still have the enough space on your drive just increase the number of system watchers by running this command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

The local server is running at http://localhost:3333/

This is the directory structure of the project

If your Stencil app starts with this error: This Stencil app is disabled for this browser. just like in the following screen shot

The error is due to your browser (Firefox in my case) not yet supporting ES Module Imports

You just need to run the following command instead

npm run dev --es5

You should now be able to see your app up and running



✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste