How to start a PWA + Nodejs, mySQL, express project

Create server.js file, require all the install dependencies and initialize express app, the initialized express app is the heart of the app from the backend, all routes and serve request/response will all be done by the instance of express app, after requiring necessary dependencies start the server port at 900/or any port of your choice since we are still in local env, install another development dependency called nodemon.

nodemon help us refresh our serve anytime will make any changes in our server.js file, run the nodemon server.js to start the server at your terminal/Cmd or at the IDE of your choose.

For me I choose to use Vscode, below my Vscode I can see the terminal and make use of the terminal just like I’m using my macOS terminal, it works effectively that way too.

In the server.js file, while the server is running, stop the server and instruct intense of express app to serve static files.

Express static serves static files in our web app, static files are the main.js, the html or view template, the css.
Progressing web app techniques are static in nature, all it contains are
the icons
manifest.json file
javascript files including service worker
the style sheets files.

we will create all the necessary PWA files inside the public folder, which is the same folder we instruct express app to serve as static files, Create the public folder, tell express app to server static files and set up the manifest file.

The manifest file contains the name and looks and feel of our app also to ensure the app is installable we most link the manifest file correctly, the manifest.json will control the app logo on each platforms, color and theme colors, screen orientation and lot more.

In the public folder we will create service worker (sw.js) file and activate it in our main.js file.

The sw.js file will be the file that controls the service worker name, the pre-cached/asset files, the activation, installation of our app service worker life cycle.

After getting the service worker file ready and manifest.json file ready we should have our app installable and our service worker should be registered same as our cache files cached for offline experience, they we have a progressive web app running on a nodejs backend.

We go back to create a home route for our app in the server file.
In our public folder let create index.html that automatically route as the home page of our app, also that’s where we will link the manifest file, the main.js file and the sw.js.
And boom its works we have a PWA app running on a nodejs server, that is installable, and possess the FAST attributes.
Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *