Skip to content

README.md

Latest commit

 

History

History
160 lines (103 loc) · 2.78 KB

README.md

File metadata and controls

160 lines (103 loc) · 2.78 KB

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 .