Popularity
1.7
Stable
Activity
0.0
-
44
3
14

Programming language: JavaScript
License: MIT License
Tags: Code Design     Boilerplate    
Latest version: v4.2.1

express-react-boilerplate alternatives and similar libraries

Based on the "Boilerplate" category.
Alternatively, view express-react-boilerplate alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of express-react-boilerplate or a related project?

Add another 'Boilerplate' Library
Access the most powerful time series database as a service
sponsored www.influxdata.com

Popular Comparisons

Write Clean JavaScript Code. Always.
sponsored www.sonarsource.com

README

erb

πŸ”₯ πŸ”₯ πŸ”₯ Express react boilerplate πŸ”₯ πŸ”₯ πŸ”₯

Features

Requirements

Structure

.
β”œβ”€β”€ public                      # Express server static path
β”‚   β”œβ”€β”€ assets                  # All favicon resources
β”‚   β”œβ”€β”€ locales                 # All of i18n resources
β”‚   └── robots.txt              # A robots.txt file tells search engine crawlers which pages or files the crawler can or can't request from your site.
β”œβ”€β”€ src                         # App source code
β”‚   β”œβ”€β”€ 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
β”‚   β”œβ”€β”€ 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
β”‚   β”‚   β”œβ”€β”€ webpack             # Webpack configurations
β”‚   β”‚   β”œβ”€β”€ hooks.js            # Assets require hooks
β”‚   β”‚   └── postcss.config.js   # PostCSS 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
│── .babelrc                    # Babel configuration.
│── .env-cmdrc.json             # All of environments configuration.
│── .eslintrc.json              # Eslint configuration.
│── .flowconfig                 # Flow type configuration.
└── .prettierrc.json            # Prettier configuration.

Installation

$ yarn global add express-react-boilerplate
# or (sudo) npm install -g express-react-boilerplate

Getting Started

1. Usage:

$ 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

  Examples:
    $ erb-gen
    $ erb-gen --name example

2. Install dependencies:

$ cd <your_project>

$ yarn
# or npm install

3. Run it:

$ yarn dev
# or npm run dev

Build

$ yarn build
# or npm run build

NOTE: You can change environment variables in .env-cmdrc.json file.

Scripts

Script Description
dev Start the development server.
dev --serve Start the development server and open browser.
start Start the production server.
build Remove the previous bundled files and bundle it (include client & server) to dist/.
wp Bundle client to dist/.
analyze Visualize the contents of all your bundles.
storybook Start the storybook server.
test Run testing.
eslint Find problems in your JavaScript code.

Enable/Disable offline

  • In src/tools/webpack/webpack.config.prod.js:
  if (isDev) {
    ...
  } else {
    plugins = [
      ...,
      // Comment this plugin if you want to disable offline.
      new OfflinePlugin({
        autoUpdate: true,
        appShell: '/',
        relativePaths: false,
        updateStrategy: 'all',
        externals: ['/'],
      })
    ]
  }
  • At the end of src/client/index.js:
  if (!__DEV__) {
    require('offline-plugin/runtime').install(); // Comment this line if you want to disable offline.
  }

Supported Browsers

By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill.

$ yarn add react-app-polyfill
# or npm install --save react-app-polyfill

You can import the entry point for the minimal version you intend to support to ensure that the minimum language features are present that are required to use in your project. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.

Internet Explorer 9

// This must be the first line in <PROJECT_ROOT>/src/client/app/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// ...

Internet Explorer 11

// This must be the first line in <PROJECT_ROOT>/src/client/app/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// ...

CSS variables

By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use css-vars-ponyfill.

// In <PROJECT_ROOT>/src/client/vendor/index.js
import cssVars 'css-vars-ponyfill';
// ... your css/scss files.
cssVars({
  silent: !__DEV__,
  ..., // https://jhildenbiddle.github.io/css-vars-ponyfill/#/?id=options
});

Type Checking For Editor

Contributors

Special Thanks

License

MIT License

Copyright (c) 2019 Huα»³nh TrαΊ§n Đăng Khoa

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


*Note that all licence references and agreements mentioned in the express-react-boilerplate README section above are relevant to that project's source code only.