In this repo I'm practicing how to setup a react project from scratch using mainly react, webpack, eslint, prettier, husky and babel among other packages.
Recording the steps to get some reviews later.
In main directory
-
npm init
-
git init
-
Create
.gitignore
file. -
npm i concurrently
-
Create
.vscode
folder. -
Set Git pre-commit using Husky
npx husky-init && npm install
-
Finally add all related scripts to
package.json
In client directory
-
npm init
-
Install dependencies
react react-dom prop-types
-
Install dev-dependencies
@babel/core @babel/preset-env @babel/preset-react babel-loader css-loader mini-css-extract-plugin file-loader webpack webpack-cli webpack-dev-server html-webpack-plugin eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node prettier // Install Airbnb style guid eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
-
Create
.babelrc
file. -
Create
webpack.config.js
file. -
Initialize eslint config file using:
npx eslint --init
-
Create
.prettierrc
file. -
Finally add all related scripts to
package.json
In server directory
-
npm init
-
Install dependencies
cors dotenv express
-
Install dev-dependencies
@babel/preset-env eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node prettier prettier-eslint nodemon // Install Airbnb style guid eslint-config-airbnb-base eslint-plugin-import
-
Create
babel.config.cjs
file. -
Initialize eslint config file using:
npx eslint --init
-
Create
.prettierrc
file. -
Finally add all related scripts to
package.json
- This setup doesn't use
create-react-app
. - This setup doesn't contain testing configurations.
After cloning the repo go to main directory and run following:
npm install
npm run setup
The first command will install some small libraries needed for running the rest of the commands. The second will go into the client and server directories and set those up to be ran.
In the server directory there is .env.example
file. Create a copy and rename that to .env
. The port is already set, but you can choose whatever you like.
To run the app in dev mode you can run the following command in the main directory:
npm run dev
This will run the server and log a message in console, and open a new browser tab on localhost:8080 .