{"id":13461563,"url":"https://github.com/htdangkhoa/express-react-boilerplate","last_synced_at":"2025-03-24T22:34:43.776Z","repository":{"id":47949072,"uuid":"216546224","full_name":"htdangkhoa/express-react-boilerplate","owner":"htdangkhoa","description":"(Deprecated) 🚀🚀🚀 This is a tool that helps programmers create Express \u0026 React projects easily base on react-cool-starter.","archived":true,"fork":false,"pushed_at":"2021-08-11T14:42:00.000Z","size":7971,"stargazers_count":43,"open_issues_count":14,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T16:59:18.796Z","etag":null,"topics":["axios","babel","boilerplate","code-splitting","es6","eslint","express","flowtype","jest","mongodb","npm-package","prettier","react","react-router","redux","storybook","template","unit-testing","universal","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/htdangkhoa/react-ssr-starter","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/htdangkhoa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"htdangkhoa","open_collective":null,"ko_fi":"htdangkhoa","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/udXILEJ"]}},"created_at":"2019-10-21T11:00:19.000Z","updated_at":"2023-12-19T09:25:50.000Z","dependencies_parsed_at":"2022-08-12T14:51:45.532Z","dependency_job_id":null,"html_url":"https://github.com/htdangkhoa/express-react-boilerplate","commit_stats":null,"previous_names":["htdangkhoa/erb"],"tags_count":50,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htdangkhoa%2Fexpress-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htdangkhoa%2Fexpress-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htdangkhoa%2Fexpress-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htdangkhoa%2Fexpress-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/htdangkhoa","download_url":"https://codeload.github.com/htdangkhoa/express-react-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366197,"owners_count":20603438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","babel","boilerplate","code-splitting","es6","eslint","express","flowtype","jest","mongodb","npm-package","prettier","react","react-router","redux","storybook","template","unit-testing","universal","webpack"],"created_at":"2024-07-31T11:00:44.490Z","updated_at":"2025-03-24T22:34:43.228Z","avatar_url":"https://github.com/htdangkhoa.png","language":"JavaScript","funding_links":["https://patreon.com/htdangkhoa","https://ko-fi.com/htdangkhoa","https://www.buymeacoffee.com/udXILEJ"],"categories":["Code Design"],"sub_categories":["Boilerplate"],"readme":"\u003ch1 align='center'\u003eerb\u003c/h1\u003e\n\n\u003cp align='center'\u003e🔥 🔥 🔥 Express react boilerplate 🔥 🔥 🔥\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href='https://david-dm.org/htdangkhoa/erb'\u003e\n    \u003cimg src='https://david-dm.org/htdangkhoa/erb/status.svg' alt='dependency status' /\u003e\n  \u003c/a\u003e\n\n  \u003ca href='https://david-dm.org/htdangkhoa/erb?type=dev'\u003e\n    \u003cimg src='https://david-dm.org/htdangkhoa/erb/dev-status.svg' alt='devDependency status' /\u003e\n  \u003c/a\u003e\n\n  \u003ca href='https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base'\u003e\n    \u003cimg src='https://img.shields.io/badge/ESLint-airbnb-4B32C3.svg' alt='ESLint: airbnb-base' /\u003e\n  \u003c/a\u003e\n\n  \u003ca href='https://github.com/prettier/prettier'\u003e\n    \u003cimg src='https://img.shields.io/badge/code_style-prettier-ff69b4.svg' alt='code style: prettier' /\u003e\n  \u003c/a\u003e\n\n  \u003ca href='https://github.com/htdangkhoa/erb/actions'\u003e\n    \u003cimg src='https://github.com/htdangkhoa/erb/workflows/Github%20Actions/badge.svg?branch=develop' alt='github actions status' /\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://www.codefactor.io/repository/github/htdangkhoa/erb\"\u003e\n\t\t\u003cimg src=\"https://www.codefactor.io/repository/github/htdangkhoa/erb/badge\" alt=\"CodeFactor\" /\u003e\n\t\u003c/a\u003e\n\n  \u003ca href='https://raw.githubusercontent.com/htdangkhoa/erb/master/LICENSE'\u003e\n    \u003cimg src='https://img.shields.io/badge/license-MIT-blue.svg' alt='MIT licensed' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href='https://www.npmjs.com/package/express-react-boilerplate'\u003e\n    \u003cimg src='https://nodei.co/npm/express-react-boilerplate.png' alt='NPM' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- Server side [(Express)](https://expressjs.com).\n- NoSQL database [(MongoDB)](mongodb.com).\n- Client side [(React)](https://reactjs.org).\n- Universal routing [(react-router)](https://github.com/ReactTraining/react-router).\n- State management [(Redux)](https://redux.js.org).\n- Redux debugging tools [(redux-devtools)](https://github.com/reduxjs/redux-devtools).\n- Tweak React components in real time [(react-hot-loader)](https://github.com/gaearon/react-hot-loader).\n- SEO [(react-helmet)](https://github.com/nfl/react-helmet).\n- The recommended Code Splitting library for React [(loadable-components)](https://github.com/gregberge/loadable-components).\n- Progressive web app [(offline-plugin)](https://github.com/NekR/offline-plugin).\n- Promise based HTTP client for the browser and NodeJS [(axios)](https://github.com/axios/axios).\n- Internationalization [(i18next)](https://www.i18next.com/) \u0026 [(react-i18next)](https://github.com/i18next/react-i18next).\n- A tool for transforming CSS with JavaScript [(PostCSS)](https://postcss.org/).\n- PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba [(autoprefixer)](https://github.com/postcss/autoprefixer).\n- Compiles CSS Modules in runtime [(css-modules-require-hook)](https://github.com/css-modules/css-modules-require-hook).\n- Allows files required by node that match a given set of extensions to be returned as either a data URI, or a custom filename [(asset-require-hook)](https://github.com/aribouius/asset-require-hook).\n- Developing UI components [(Storybook)](https://storybook.js.org/).\n- Light \u0026 Dark theme.\n- Data fetching from server-side.\n- Compressing images with imagemin [(imagemin-webpack-plugin)](https://github.com/Klathmon/imagemin-webpack-plugin).\n- Unit testing [(Jest)](https://github.com/facebook/jest).\n- ES6.\n- The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null [(@babel/plugin-proposal-optional-chaining)](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining).\n- Type checker for javascript [(Flow)](https://flow.org/).\n- Find and fix problems in your javascript code [(ESlint)](https://eslint.org/).\n- Code formatter [(Prettier)](https://prettier.io/).\n- Automate your workflow from idea to production [(Github Actions)](https://github.com/features/actions).\n- VSCode debugging.\n\n## Requirements\n\n- [Node](https://nodejs.org/en/) \u003e= 10.13.0\n\n## Structure\n\n```\n.\n├── public                      # Express server static path\n│   ├── assets                  # All favicon resources\n│   ├── locales                 # All of i18n resources\n│   └── robots.txt              # A robots.txt file tells search engine crawlers which pages or files the crawler can or can't request from your site.\n├── src                         # App source code\n│   ├── api                     # All of restful API\n│   ├── client                  # Client scope\n│   │   ├── app                 # App root component\n│   │   ├── assets              # Assets (e.g. images, fonts etc.)\n│   │   ├── components          # Reusable components\n│   │   ├── pages               # Page components\n│   │   ├── stories             # UI components with Storybook\n│   │   ├── themes              # App-wide style\n│   │   ├── vendor              # 3rd libraries for client\n│   │   └── index.js            # App bootstrap and rendering (webpack entry)\n│   ├── middlewares             # All of express middleware\n│   ├── model                   # Data transfer object\n│   ├── mongo                   # MongoDB configuration\n│   ├── secure                  # All of security (e.g passport configuration, jsonwebtoken etc.)\n│   ├── store                   # Store configuration for both client and server side\n│   ├── tools                   # Project related configurations\n│   │   ├── jest                # Jest configurations\n│   │   ├── webpack             # Webpack configurations\n│   │   ├── hooks.js            # Assets require hooks\n│   │   └── postcss.config.js   # PostCSS configuration\n│   ├── types                   # All of type for flow\n│   ├── utils                   # App-wide utils\n│   ├── config.js               # Configuration entry point loaded from .env file\n│   ├── i18n.js                 # I18next configuration\n│   ├── index.js                # App entry point\n│   ├── routes.js               # Routes configuration for both client and server side\n│   └── server.js               # Express server\n│── .babelrc                    # Babel configuration.\n│── .env-cmdrc.json             # All of environments configuration.\n│── .eslintrc.json              # Eslint configuration.\n│── .flowconfig                 # Flow type configuration.\n└── .prettierrc.json            # Prettier configuration.\n```\n\n## Installation\n\n```bash\n$ yarn global add express-react-boilerplate\n# or (sudo) npm install -g express-react-boilerplate\n```\n\n## Getting Started\n\n**1. Usage:**\n\n```bash\n$ erb-gen --help\n\n  Usage: erb-gen [options]\n\n  Options:\n    -v, --version      output the version number\n    -d, --dir \u003ctype\u003e   project's directory. (default: \".\")\n    -n, --name \u003ctype\u003e  project's name. (default: \"express-react-boilerplate\")\n    -h, --help         output usage information\n\n  Examples:\n    $ erb-gen\n    $ erb-gen --name example\n```\n\n**2. Install dependencies:**\n\n```bash\n$ cd \u003cyour_project\u003e\n\n$ yarn\n# or npm install\n```\n\n**3. Run it:**\n\n```bash\n$ yarn dev\n# or npm run dev\n```\n\n## Build\n\n```bash\n$ yarn build\n# or npm run build\n```\n\n---\n\n\u003e **NOTE**: You can change environment variables in `.env-cmdrc.json` file.\n\n## Scripts\n\n| Script        | Description                                                                           |\n| ------------- | ------------------------------------------------------------------------------------- |\n| dev           | Start the development server.                                                         |\n| dev `--serve` | Start the development server and open browser.                                        |\n| start         | Start the production server.                                                          |\n| build         | Remove the previous bundled files and bundle it (include client \u0026 server) to `dist/`. |\n| wp            | Bundle client to `dist/`.                                                             |\n| analyze       | Visualize the contents of all your bundles.                                           |\n| storybook     | Start the storybook server.                                                           |\n| test          | Run testing.                                                                          |\n| eslint        | Find problems in your JavaScript code.                                                |\n\n## Enable/Disable offline\n\n- In `src/tools/webpack/webpack.config.prod.js`:\n\n  ```js\n  if (isDev) {\n    ...\n  } else {\n    plugins = [\n      ...,\n      // Comment this plugin if you want to disable offline.\n      new OfflinePlugin({\n        autoUpdate: true,\n        appShell: '/',\n        relativePaths: false,\n        updateStrategy: 'all',\n        externals: ['/'],\n      })\n    ]\n  }\n  ```\n\n- At the end of `src/client/index.js`:\n\n  ```js\n  if (!__DEV__) {\n    require('offline-plugin/runtime').install(); // Comment this line if you want to disable offline.\n  }\n  ```\n\n## Supported Browsers\n\nBy 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](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).\n\n```bash\n$ yarn add react-app-polyfill\n# or npm install --save react-app-polyfill\n```\n\nYou 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.\n\n### **Internet Explorer 9**\n\n```js\n// This must be the first line in \u003cPROJECT_ROOT\u003e/src/client/app/index.js\nimport 'react-app-polyfill/ie9';\nimport 'react-app-polyfill/stable';\n\n// ...\n```\n\n### **Internet Explorer 11**\n\n```js\n// This must be the first line in \u003cPROJECT_ROOT\u003e/src/client/app/index.js\nimport 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\n\n// ...\n```\n\n## CSS variables\n\nBy 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](https://github.com/jhildenbiddle/css-vars-ponyfill).\n\n```js\n// In \u003cPROJECT_ROOT\u003e/src/client/vendor/index.js\nimport cssVars 'css-vars-ponyfill';\n// ... your css/scss files.\ncssVars({\n  silent: !__DEV__,\n  ..., // https://jhildenbiddle.github.io/css-vars-ponyfill/#/?id=options\n});\n```\n\n## Type Checking For Editor\n\n- [Visual Studio Code](https://flow.org/en/docs/editors/vscode/)\n- [Atom](https://flow.org/en/docs/editors/atom/)\n- [Sublime Text](https://flow.org/en/docs/editors/sublime-text/)\n- [Etc.](https://flow.org/en/docs/editors/)\n\n## Contributors\n\n- [htdangkhoa](https://github.com/htdangkhoa)\n\n## Special Thanks\n\n- [(react-cool-starter) - wellyshen](https://github.com/wellyshen/react-cool-starter)\n\n## License\n\n    MIT License\n\n    Copyright (c) 2019 Huỳnh Trần Đăng Khoa\n\n    Permission is hereby granted, free of charge, to any person obtaining a copy\n    of this software and associated documentation files (the \"Software\"), to deal\n    in the Software without restriction, including without limitation the rights\n    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n    copies of the Software, and to permit persons to whom the Software is\n    furnished to do so, subject to the following conditions:\n\n    The above copyright notice and this permission notice shall be included in all\n    copies or substantial portions of the Software.\n\n    THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n    SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtdangkhoa%2Fexpress-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtdangkhoa%2Fexpress-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtdangkhoa%2Fexpress-react-boilerplate/lists"}