Deploying React App from Codesandbox to Github Pages

Question

I followed this youtube tutorial to deploy my react app to github pages. I made my react app in codesandbox and exported my sandbox to my github. I downloaded node.js, npm, and git.

My folder structure: Users > test > package-lock.json + andair-master > (inside andair-master) node_modules + build > (inside build) public + src + package.json

I downloaded my github project "andair-master" and copied and pasted its contents into an empty folder "test".

I opened Git Bash and changed directories until I was in "andair-master". I did "git init" then "git remote add origin https://github.com/develijahlee/andair.git" then I tried "npm run deploy". I realized I was missing a "build" folder so I made one within the "andair-master" folder. Then I put my "src" and "public" folders inside the "build" folder and tried running "npm run deploy". Still not working. I notice that my github is missing a gh-pages branch. I am not sure how to make a gh-pages branch or why "npm run deploy" is not working. If anyone could tell me if I'm missing a step, that would be greatly apprecitated. Thank you.

Nithin Thampi Nithin Thampi · Accepted Answer · 2019-10-27T06:25:57

There are a few missing dependencies in your create-react-app project. This probably happened because you tried to export the project from codesandbox (I'm not sure though)

You have to fix those first.

Dependency 1 (react-scripts):

npm install react-scripts --save-dev

Dependency 2 (node-sass because you are using scss in your project)

npm install node-sass --save

Dependency 3 (gh-pages)

npm install gh-pages --save-dev

After the above steps are completed, verify your package.json to match below structure

{
  "name": "and-air",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "homepage": "https://develijahlee.github.io/andair/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.25",
    "@fortawesome/free-regular-svg-icons": "5.11.2",
    "@fortawesome/react-fontawesome": "0.1.5",
    "node-sass": "^4.13.0",
    "react": "16.9.0",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "react-scripts": "^3.2.0",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Now you can run the deploy script

npm run deploy

After this step, verify that a new branch created with name gh-pages

Click on the settings tab in github

Scroll down to the GitHub Pages section and switch your branch to gh-pages branch.

You should get a success message when the page is live.

Deploying React App from Codesandbox to Github Pages

2 Answers