Build a Progressive Web App
Set up the base code
This blog post is part of a series. A table of contents is available here.
Whether you use Bitbucket, GitLab, Github or run your own version control system doesn’t matter. Even if you believe rewritable CDs are what makes you most productive, that’s cool; as long as you somehow back up your code somewhere. I use Github and the source code for the Library PWA is available at https://github.com/mikenikles/library-pwa.
No boilerplate or starter kit
In React-land, we have as many boilerplate projects as there are grains of sand at the beach. It’s so bad in fact, there’s a website where you can apply filters to narrow down what you’re looking for.
Andrew Farmer, the same guy who created the boilerplate filter website above, later launched BYOS: Build Your Own Starter. I highly recommend anyone to start their React project with that. I did the same in the following commits:
I believe the best way to learn something is by doing it, even if it means it takes more time to get started. That initial effort will pay off down the road when you have to refactor your app because of breaking changes in Webpack 2.0, for example.
Adding react-router to a project is simple. Besides adding the dependency to your package.json, you configure your routes and make one tiny change to your main application to tell react-router where it should render the pages when a URL changes.
You can see what’s involved to add Redux to an application in my commit 45368e9.
Slowly but surely, writing tests becomes more of a standard practice, based on what I’ve experienced at least. Too often have I seen companies “reduce cost” by cutting down on QA engineers. Quite frankly, that’s a sign of setting priorities wrong. If your business struggles in the market, the last thing you want to do is release buggy software — think about it.
So, I’m not saying hire QA engineers and have them manually regression test every release, I would argue that’s equally dumb as laying off QA engineers. What I am saying is:
Automate your QA processes!
Details on how I set this up for the Library app can be found in commit 6ea9af3.
Watch your source files and run tests automatically
One last note on testing is to enable something like npm run test:watch, a command that keeps an eye on changes to your source files. When you make a change and save the file, AVA determines which subset of tests to run based on the change you made. Instant feedback, without any extra work from your end. Have a look at a33cc68 to see how it can be configured.
With the above in place, you’re at a pretty good point to start developing. In a future post, I will share my thoughts on the project’s folder structure and a few third party services I set up, such as Travis and Greenkeeper.