Setup React Project

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.

Steps

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

---

Notes

• This setup doesn't use create-react-app.
• This setup doesn't contain testing configurations.

---

Check the code locally

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 .