A very minimal and unopinionated and production ready Client Side React Boilerplate.
- Make sure that you have Node.js >v8.15.1 and yarn installed.
- Clone this repo using git clone https://github.com/tusharf5/react-csr-docker-boilerplate.git <YOUR_PROJECT_NAME>
- Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
- Run
rm -rf .git
to clean the repo. - Run
yarn
in order to install dependencies. - At this point you can run
yarn dev
to see the example app at https://localhost:3000.
Webpack is a module bundler. Webpack can take care of bundling your react application making it highly optimized and ready to serve.
Hot Module Replacement (HMR) exchanges, adds, or removes (CSS/JS)modules while an application is running, without a full reload. This can significantly speed up development.
This practice essentially involves splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code.
Build, Share, and Run Any App, Anywhere using Docker.
Serve your bundled application and assets with Nginx.
CSS Modules changes class names and selectors to be scoped (i.e. kinda like namespaced)
Automatically formats the staged files with prettier when you do a git commit :)
Javascript Linting support with Eslint.
Enforce styleguide on commit messages for everyone who is commiting to the repo.
See how a minor change to your commit message style can make you a better programmer.
Format: <type>(<scope>): <subject>
<scope>
is optional
feat: allow overriding of webpack config
^--^ ^------------^
| |
| +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.
The various types of commits:
feat
: (new feature for the user, not a new feature for build script)fix
: (bug fix for the user, not a fix to a build script)perf
: (bug fix for the user, not a fix to a build script)docs
: (changes to the documentation)style
: (formatting, missing semi colons, etc; no production code change)refactor
: (refactoring production code, eg. renaming a variable)revert
: (refactoring production code, eg. renaming a variable)test
: (adding missing tests, refactoring tests; no production code change)chore
: (updating repo files; no build tools or docs; no production code change)build
: (updating build tools etc; no production code change)ci
: (updating ci tools etc; no production code change)
Use lower case not title case!
For Supporting Hot Reload for Nested Routes. The Components containing the Route declarations must be exported with the export default hot(Component)
.