Preface
Hello everyone, every time you start a new project, configuring or installing the initial libraries really takes a lot of time and effort for devs. That’s why the boilerplate
was born.
What is a Boilerplate?
Boilerplate is a framework or can also be understood as a template. Boilerplate helps you to simplify the configuration of the project’s file and directory structure, and the boilerplate builder also has a number of built-in libraries to save you time searching and installing. library.
Actually, you can find a lot of boilerplate
on github, but in this article, I would like to share with you my boilerplate
, it’s called erb (short for express-react-boilerplate
).
Erb
Introduce
My Boilerplate includes the following main components and features:
- Express – A framework for writing restful API.
- React – Is a library that helps you build user interface in javascript language.
- MongoDB – NOSQL Database for Node.js to store data.
- Server side rendering.
- Redux, Redux-thunk
- Hot reloading
- SEO
- Multi language
- etc.
Structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
. ├── src │ ├── api # All of restful API │ ├── client # Client scope │ │ ├── app # App root component │ │ ├── assets # Assets (e.g. images, fonts etc.) │ │ ├── components # Reusable components │ │ ├── pages # Page components │ │ ├── stories # UI components with Storybook │ │ ├── themes # App-wide style │ │ ├── vendor # 3rd libraries for client │ │ └── index.js # App bootstrap and rendering (webpack entry) │ ├── middlewares # All of express middleware │ ├── model # Data transfer object │ ├── mongo # MongoDB configuration │ ├── public # Express server static path │ │ ├── locales # All of i18n resources │ │ └── favicon.ico # Favicon is placed in the same path with the main HTML page │ ├── secure # All of security (e.g passport configuration, jsonwebtoken etc.) │ ├── store # Store configuration for both client and server side │ ├── tools # Project related configurations │ │ ├── jest # Jest configurations │ │ ├── hooks.js # Assets require hooks │ │ └── webpack.config.js # Webpack configuration │ ├── types # All of type for flow │ ├── utils # App-wide utils │ ├── config.js # Configuration entry point loaded from .env file │ ├── i18n.js # I18next configuration │ ├── index.js # App entry point │ ├── routes.js # Routes configuration for both client and server side │ └── server.js # Express server ├── .env.development # All of variables for development environment └── .env.production # All of variables for production environment |
Using
There are 2 ways to use:
- Access to git of erb and clone about.
- You can download it via npm
12345678910111213$ yarn global add express-react-boilerplate<span class="token comment"># or (sudo) npm install -g express-react-boilerplate</span>$ erb-gen --helpUsage: erb-gen <span class="token punctuation">[</span> options <span class="token punctuation">]</span>Options:-v, --version output the version number-d, --dir <span class="token operator"><</span> type <span class="token operator">></span> project <span class="token string">'s directory. (default: ".")-n, --name <type> project'</span> s name. <span class="token punctuation">(</span> default: <span class="token string">"express-react-boilerplate"</span> <span class="token punctuation">)</span>-h, --help output usage information
The commands that erb provides
Script | description |
---|---|
dev | Run the server in develpment environment. |
start | Run the server in production environment. |
build | Package the code (including server & client) into the dist/ directory. |
wp | Package the client in the dist/ directory. |
analyze | View your packages more visually as a treemap. |
storybook | Run the storybook server. |
kiểm TRA | Run unit tests. |
Demo
https://htdangkhoa-erb.herokuapp.com/
Conclude
Erb is a boilerplate suitable for medium and large projects. It really saves you a lot of time. In addition to the features that I mentioned above, you can see the benefits that it brings here .
If you find it interesting, you can support me a star on github
Have a nice day
References
- Express – https://expressjs.com
- React – https://reactjs.org
- MongoDB – https://www.mongodb.com
- Erb – https://github.com/htdangkhoa/erb