react-progressive-web-app

An opinionated React based repository which is optimized for Progressive Web App development

2 years after

React Progressive Web App

What is this repo? Well, it's a very opinionated React based repository which is optimized for Progressive Web App development. In its current format, it will hit around 95-100 out of 100 when running through the Lighthouse audit. You can test this out by visiting the demo and generating a lighthouse report against it.

There are many different ways to structure an application; this repository is the way that I tend to structure my applications. I think, you could strip out the webpack.config.js file, tweak it slightly and then you will be on your merry way. But, you would still need to create a manifest, upload the images and make sure they are referenced correctly, that is why I decided to open source this repo as it will allow you to just write React code without worrying about painful configuration.

Opinions

  • It uses Webpack 2 - which makes use of tree shaking and route based chunking.

  • It uses Flow - A static type checker for JavaScript. Although not that useful right now, moving forward in developing your app, it is there to protect you.

  • It uses the public directory for Webpack output. Within that, it then has an assets directory which will hold the assets created by Webpack but also the icons for the manifest.

  • It has full separation of concerns around components, what does this mean? It means that all components, their assets, and their tests are kept in the same folder. Here is a good example of what I mean.

  • It uses Mocha and Chai for its testing framework. Choosing Mocha and Chai was a conscious decision. However, this could easily be switched out for something like Jest if desired.

  • It comes with Nightwatch as the standard e2e testing framework. I have tried multiple frameworks and found this is by far the best at the moment.

  • It uses offline-plugin for webpack. Again, choosing offline-plugin was a conscious decision. Originally, I wrote the caching myself, but I felt that with open sourcing this repo, it needed to include a plugin that is actively being maintained and optimized for caching.

  • The repo uses route based chunking as outlined in point one, with this, it means that the react router implementation needs to be done with getComponent. You can see this here.

Arguably, you could switch a lot of this out for your approach, but then what would be the point in using an existing repo

Related Repositories

awesome-progressive-web-apps

awesome-progressive-web-apps

:sunrise: A collection of awesome resources for building progressive web apps ...

create-react-pwa

create-react-pwa

https://github.com/facebookincubator/create-react-app + Progressive Web App good ...

Progressive-Web-App-Loading

Progressive-Web-App-Loading

Progressive Loading for React + Webpack applications ...

vue-simple-pwa

vue-simple-pwa

Simple Progressive Web App Built with Vue Js. https://bosnaufal.github.io/vue-si ...

create-react-progressive-web-app

create-react-progressive-web-app

Simple demo of progressive web app. This demo will display the news of technolog ...