React is a modern templating engine that makes development of highly interractive user interfaces fun, fast, and “reactive”.
In LeanJS, the library is used both browser-side and server-side, as our «isomorphic» rendering engine.
React Router is a complete routing solution for React. It works well in the «isomoprhic environment», abstracting the concept of «history» and «location» to be able to manage it the same way in the browser and on a server.
Express, not to be presented anymore, is a minimalist web application development framework.
Bootstrap 4 and Font Awesome (see Style)¶
Bootstrap 4 and Font Awesome are so popular nowadays for prototypes (and even production apps) that it felt logic to package them in the boilerplate, pre-configured, ready to be extended and correctly setup to work both in dev and prod mode.
Removing them from the base setup is way easier than adding it, only a few lines to remove.
Attention, we include the plain vanilla SCSS versions of those libraries, with no wrappers (no, we don’t ship with Bootact-Restrap). If you want one of those low value libs, feel free to have fun in your project.
On top of those features, that will be used the same way in development and in production mode, a few features are also there in development mode only.
Build automation tool from 1977, readable by computer scientists, and language agnostic. It is the reference and only entry point of developer tools in LeanJS.
We use docker a lot to have reproductible builds of our apps. While it is not required that you use this feature, if you do, you can to build and run production image running make docker-build docker-run.
In development mode, webpack is used via the webpack-dev-middleware, which basically is a connect middleware that serve the always-hot version of your compiled assets.
make lint is your friend.
Help needed about the “right” coding standards for React/ES6/Node.
make test is your friend.
It will create a coverage directory with the matching reports.
Browsersync and Nodemon (see Server)¶
We use browser sync as a proxy for a few reasons.
- It allows to serve the vanilla express application on a different port and add the development tooling middlewares only on this proxy, making easier to debug tedious problems with server output.
- It has nice features for both cross-platform development and simulating catastrophic network conditions, because you know, your customer won’t use your own laptop on this dual gigabit fiber channel directly plugged on the EU to NA backbone.
Hot Module Reload (see
This is trendy, this is hot, and yet it can fuck up your brain because it does not work as expected.
In short, HMR is a way to swap module instances hen you change the files on disk. Save Foo.js, a watcher will see it, rebuild it with webpack, communicate that something changed to your browsers and try to hot swap the minimum subset of the module dependency tree that is needed to have the new module versions show up in the browsers. Magic happens, boom.
That’s the theory. Practical notes, though.
Caveats: won’t work with pure, stateless, function-based react components. won’t work with router.
When in doubt, refresh anyway.