# react-express-starter-kit > Create a new application with React(front-end) and Express(back-end). Latest version **1.2.0** (published 2020-01-14) · MIT license · 0 weekly downloads ## Install ```sh npm install react-express-starter-kit pnpm add react-express-starter-kit yarn add react-express-starter-kit bun add react-express-starter-kit ``` Provides the command `rest`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2020-01-14 | | First published | 2019-01-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 26.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | taka-wwjd | | Maintainers | taka-wwjd | | Keywords | react, express, starter, generator | ## Links - npm: https://www.npmjs.com/package/react-express-starter-kit - Repository: https://github.com/taka-wwjd/react-express-starter-kit - Homepage: https://github.com/taka-wwjd/react-express-starter-kit#readme - Issues: https://github.com/taka-wwjd/react-express-starter-kit/issues - npm.io page: https://npm.io/package/react-express-starter-kit ## Dependencies (7) - [path](https://npm.io/package/path.md) ^0.12.7 - [chalk](https://npm.io/package/chalk.md) ^3.0.0 - [shelljs](https://npm.io/package/shelljs.md) ^0.8.3 - [fs-extra](https://npm.io/package/fs-extra.md) ^8.1.0 - [commander](https://npm.io/package/commander.md) ^4.1.0 - [questions](https://npm.io/package/questions.md) ^0.0.6 - [current-dir](https://npm.io/package/current-dir.md) ^1.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2020-01-14 - 1.1.0 — 2019-07-18 - 1.0.17 — 2019-07-01 - 1.0.16 — 2019-07-01 - 1.0.15 — 2019-06-14 - 1.0.14 — 2019-05-27 - 1.0.13 — 2019-05-24 - 1.0.12 — 2019-05-24 - 1.0.11 — 2019-05-23 - 1.0.10 — 2019-05-20 - 1.0.9 — 2019-05-17 - 1.0.8 — 2019-03-05 - 1.0.7 — 2019-03-05 - 1.0.6 — 2019-02-04 - 1.0.5 — 2019-01-31 - … 5 more at https://npm.io/package/react-express-starter-kit/versions ## README # react-express-starter-kit Create a new application with React(front-end) and Express(back-end). ## Getting Started ### Install ``` npm install -g react-express-starter-kit ``` ### Create New Application Run the command in a directory where you want to create the application. ``` rest ``` After answering some questions in interactive mode, new application will be generated. #### MySQL Support Flag: If you need MySQL support, the following option are available. ``` rest -m ``` or ``` rest --mysql ``` ### Run Application Run the command in a directory of application root. #### Production Mode: ``` npm start ``` Specify the following option in webpack and start it. `--mode production --devtool false` #### Development Mode: ``` npm run debug ``` Specify the following option in webpack and start it. `--mode development --devtool inline-source-map --watch --progress` #### Other Modes: You can also changes webpack.config.js if necessary. ### File Structure ``` app ├ app.js ├ app.config.js ├ webpack.config.js ├ api │ ├ name.js │ └ lib │ ├ db.config.js │ └ extension.js └ src ├ public │ ├ index.html │ ├ fonts │ ├ images │ ├ javascripts │ └ stylesheets │ └ scss │ ├ _fonts.scss │ └ main.scss └ views ├ Root.jsx └ Index └ Welcome.jsx ``` * **app.config.js** * Configure for common references from React(front-end) and Express(back-end). * You can also add new key and value as needed. * **ATTENTION** This file contain API key for validate of React(front-end) and Express(back-end) between connection. Please note that this authentication is a simple one that prevents Express(back-end) output from being drawn directly in the browser. In fact, the build output of webpack contains API key as is. * **api/** * Express(back-end) routers is stored. * **api/name.js** * Express(back-end) router called from `views/Index/Welcome.jsx` and returning the application name. * **api/lib/** * Configure and extend files is stored. * **api/lib/db.config.js** * Configure for MySQL access(If you needed). * Be careful not to require or import this file from React(front-end) so that database authentication ID/PASS is not included in the build output of webpack. * **api/lib/extension.js** * Contains extend functions used by Express (back-end). * You can also add new functions as needed. * **views/** * React(front-end) component directories is stored. * Create directories in this hierarchy for each page required by the application. * **views/Root.jsx** * React(front-end) routing starts point. * **views/Index** * React(front-end) components is stored of the index screen to be displayed when accessing the root path /. * **views/Index/Welcome.jsx** * React(front-end) component for drawing a welcome message on the index screen. ### Module Versions ``` "devDependencies": { "@babel/core": "^7.8.3", "@babel/preset-env": "^7.8.3", "@babel/preset-react": "^7.8.3", "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "babel-loader": "^8.0.6", "webpack": "^4.41.5", "webpack-cli": "^3.3.10", "concurrently": "^5.0.2", "nodemon": "^2.0.2", "file-loader": "^5.0.2", "url-loader": "^3.0.0", "style-loader": "^1.1.2", "css-loader": "^3.4.2", "sass-loader": "^8.0.2", "node-sass": "^4.13.0", "sass": "^1.24.4", "fibers": "^4.0." }, "dependencies": { "axios": "^0.19.1", "helmet": "^3.21.2", "express": "^4.17.1", "react": "^16.12.0", "react-dom": "^16.12.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "body-parser": "^1.19.0", "cookie-parser": "^1.4.4", "path": "^0.12.7" "mysql": "^2.17.1" // If you need MySQL support. } ``` ## Add React Component Run the command in a directory of application root. ``` rest -r ``` After answering some questions in interactive mode, a new component will be added. The file structure of React component is one screen one directory structure. So, select the new or existing directory and enter the component name. ## Add Express Router Run the command in a directory of application root. ``` rest -e ``` After answering some questions in interactive mode, a new router will be added. --- _Source: https://npm.io/package/react-express-starter-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._