Ultimate boilerplate for React + Express with Docker So I created with . yet another boilerplate React and Express Here is why. Do We Need Another Boilerplate? Yet The answer is yes! Let’s face it — It’s to set up a React project from scratch. a pain Whilst , I encountered so many problems just to get a hello world app running on the browser. Trying to compile and bundle the front-end felt like forever. Webpack config looked cryptic and daunting. So many babel presets to choose from… Then here comes the back-end. How should I structure the app? Do I opt for client-side or server-side rendering? Which test runner to use? What is the best way to separate development and production workflow? learning React The abundance of choice is overwhelming. Although there are tons of tutorials and boilerplates out there, many of them are outdated. Few of them explains the rationale behind the decisions. It was about time I put what I learnt into practice, so we can just focus on learning and playing around with React. It Comes With Perks It’s across the stack. A testing environment is hooked up with . And it’s . The repository contains detailed README on how to use it. ES6 compatible Jest Docker-ready In this post, I’m going to talk about thoughts that went into in creating the boilerplate. Application Structure I put a particular emphasis on and , when thinking about the app structure. simplicity flexibility I like having a single directory at the top level to contain all the source code, which is then divided into and . app client server I want to have my test files close to what’s being tested, as I don’t like having to mentally go up and down the file tree to . Therefore, instead of having a separate directory for tests at the top level, I placed a directory each for and . import myModule from '../../../src/server/helper/myModule’ __tests__ client server By default, the app makes use of . Hence, the file is located within the directory under . It can be easily switched over to client-side rendering, should you wish so. server-side rendering index.html view server Stress-free Workflow I’m a big fan of a stress-free development workflow with fast feedback. The dev mode comes with a . Changes made either to the client and the server are immediately detected and the app is re-bundled / re-started automatically. watch functionality The tests are run with . It comes with useful features like , (re-runs only the tests affected by changes), and coverage report. Jest parallel testing intelligent test watching Ease of Deployment So you created an app on your machine. But ? This question is often overlooked. I wanted to create something that’s a ready to be deployed without an additional effort. what’s next I created a , in addition to the default config for development. The size of the file bundled file in the production mode is 1kB. Now that’s of what’s bundled in the dev mode. Minimising the bundle size becomes essential as the application grows. Webpack config optimised for production 0.0005% 2. The app runs in , so it can be deployed straight to another machine or a cloud server, without having to worry about the dependency compatibility. Docker Code Style I introduced as a code style as well as a linter, since I almost exclusively follow this style. It has robust rules in place to allow you to use . It favours the use of single quotes over double. I love it! The code looks so much cleaner. standard no semicolons Implemetation does not require configuration, which is a bonus. Just run to check for any linting error. I configured so it also runs at the end of . If you don’t like the style, simply remove it from the script. $ npm/yarn run standard $ npm/yarn test Latest Packages Finally, nothing is more than finding a good boilerplate, only to find out that packages are outdated. So I did my best to ensure that the npm packages are up-to-date. For example, I used in combination with babel-preset-react and , which replaces babel-preset-2015, 2016, 2017 and latest. frustrated Webpack version 3 babel-preset-env Wrap up A boilerplate, by nature, is opinionated. That doesn’t mean I think there is no better way. I want to learn different opinions as to what you think is batter and why. So please share your thoughts! I appreciate your feedback as always. I hope you enjoy using the boilerplate. If you like it, star it and share it with your peeps :) Thanks, and happy coding!
