How can I deploy a react app with a node backend on GitHub Pages?

Question

I just started learning about concurrently npm to React.
I want to know how to deploy React project on Github page with concurrently npm.
Normally on local machine we would run the app with server side package.json file

"dev": "concurrently "npm run server" "npm run client""
In Terminal> npm run dev

I tried with gh-pages npm to deploy react app on Github page but with concurrently npm,
I have no idea how to do it since there are two package.json.
Also, I don't know much about NODE environment and npm run build.

Server side package.json:

{
 "name": "contact-keeper",
  "version": "1.0.0",
  "description": "Contact manager app",
  "main": "server.js",
  "homepage": "https://myprofile.github.io/Contact-Keeper-with-React",
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
 "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "config": "^3.1.0",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "express-validator": "^6.1.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.6.4"
  },
  "devDependencies": {
    "concurrently": "^4.1.1",
    "gh-pages": "^2.1.1",
    "nodemon": "^1.19.1"
  }
}

Client side server package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-transition-group": "^4.2.1",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
    "proxy": "http://localhost:5000"
}

Is there any document or basic knowledge about setting environment that I need to learn more to understand this topic?

You can't run a node server or any type of backend on github pages but you can deploy your React app — Asaf Aviv
– Asaf Aviv, Commented Aug 23, 2019 at 5:49

Mr. J · Accepted Answer · 2019-08-23 06:45:12Z

1

Github is not (quite) a service for serving your working application to other users. Github is a repository for storing your code, updating it, and managing versions.

I think that to deploy your app "concurrently" to github means there is a way of updating Github with the new version code, at the same time as you deploy it online to a service, such as Heroku.

You should research and understand what Git (as opposed to github) is, as its essential for development. Get skilled at managing your app code with git first, before trying to deploy to a service like Heroku, AWS etc....

EDIT

As pointed out by Asaf Aviv, you can serve front-end apps from Github, with github pages, but you still need to be able to push your local code up to github for this to work.

edited Aug 23, 2019 at 6:45

answered Aug 23, 2019 at 5:45

Mr. J

1,8783 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asaf Aviv Over a year ago

You actually can deploy React apps, but not a node server

Collectives™ on Stack Overflow

How can I deploy a react app with a node backend on GitHub Pages?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related