CODEWITHSUNDEEP
node.jsreactjsgithub-pages
Teera K.
Teera K.

Reputation: 13

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

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?

Upvotes: 1

Views: 2315

Answers (1)

Mr. J
Mr. J

Reputation: 1839

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.

Upvotes: 1

Related Questions