React app deployment with Github

---

Installation and Version Update

## Update node
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs
## Install npx
npm i -g npx
## Install yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
    

Create project locally

1. Create the project,

npx create-react-app starter-project
    

2. Start localhost by,

yarn start
    

Create repository

1. Create an empty repository, with name of starter-project.
2. In your folder starter-project, add remote and push,

git remote add origin https://github.com/zcemycl/starter-project
git push --set-upstream origin master
    

3. Install gh-pages package, this will create node_modules and package.json,

yarn add gh-pages
    

4. Edit package.json,

{
  "homepage":"https://zcemycl.github.io/starter-project/", ####
  "name": "starter-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "gh-pages": "^3.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy":"npm run build", ####
    "deploy":"gh-pages -d build",####
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
    

5. Deploy the application, and run whenever you need update the web app,

 
npm run deploy
    

6. I will add, commite and push again normally.

Troubleshootings

• When running sudo npm run deploy, this error occurs, EACCES: permission denied, mkdir '/media/yui/Disk/project/ui/practice-app/node_modules/.cache/terser-webpack-plugin', solve by,

sudo npx browserslist@latest --update-db
sudo npm install -g --unsafe-perm=true --allow-root
sudo chmod -R 777 node_modules/.cache/
      

References

---

1. Yarn ERROR: There are no scenarios; must have at least one
2. How can I update my nodeJS to the latest version?
3. npx command not found
4. How to Deploy a Routed React App to GitHub Pages