Create a new application with React(front-end) and Express(back-end).
npm install -g react-express-starter-kit
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.
If you need MySQL support, the following option are available.
rest -m
or
rest --mysql
Run the command in a directory of application root.
npm start
Specify the following option in webpack and start it.
--mode production --devtool false
npm run debug
Specify the following option in webpack and start it.
--mode development --devtool inline-source-map --watch --progress
You can also changes webpack.config.js if necessary.
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.
- Express(back-end) router called from
- 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.
"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.
}
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.
Run the command in a directory of application root.
rest -e
After answering some questions in interactive mode, a new router will be added.