Introduce project creation tool for full stack developers

Saturday, 14/12/2019

Tram Ho

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

.
├── 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

├── 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

$ yarn global add express-react-boilerplate
<span class="token comment"># or (sudo) npm install -g express-react-boilerplate</span>

$ erb-gen --help

Usage: 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">&lt;</span> type <span class="token operator">&gt;</span>   project <span class="token string">'s directory. (default: ".")
    -n, --name &lt;type&gt;  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

$ yarn global add express-react-boilerplate

# or (sudo) npm install -g express-react-boilerplate

$ erb-gen --help

Usage: erb-gen [ options ]

Options:

-v, --version output the version number

-d, --dir < type > project 's directory. (default: ".")

-n, --name <type> project' s name. ( default: "express-react-boilerplate" )

-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

Share the news now

Source : Viblo