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.
It uses Webpack 2 - which makes use of tree shaking and route based chunking.
It uses the
publicdirectory for Webpack output. Within that, it then has an
assetsdirectory 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.
offline-pluginfor webpack. Again, choosing
offline-pluginwas 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