Deploy site made with React JS on GitHub pages

Question

Actually, I created my first React JS application using the create-react-app from cmd line.

Before running npm run build

Now the problem is that the GitHub page shows 404. when I move to username.github.io/project-name/public the console shows 400 error and a blank page

After running npm run build

Compiled successfully.

File sizes after gzip:

  39.92 KB  build\static\js\main.a7e4b607.js
  109 B     build\static\css\main.65027555.css

The project was built assuming it is hosted at /project-name/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
To publish it at http://username.github.io/project-name, run:

  npm install --save-dev gh-pages

Add the following script in your package.json.

    // ...
    "scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

Then run:

  npm run deploy

After running the npm run deploy I get this error.

error: failed to execute prompt script (exit code 1) fatal: could not read Username for 'https://github.com': No error

How to fix this error? Can we host react js app on GitHub pages that don't require the database?

Edit - My package.json file

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://username.github.io/project-name",
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "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"
  },
  "devDependencies": {
    "gh-pages": "^1.0.0"
  }
}

This is what I have in my package.json file.

You should be able to host the react site. But that may require react cdn links in your head element. I think you could just go to settings in the git repo and set the master branch to be the github pages branch. — Dream_Cap
– Dream_Cap, Commented Sep 28, 2017 at 11:36
That's what I did there is no option for gh-pages so I selected the master branch as the GitHub page. — Rajendran Nadar
– Rajendran Nadar, Commented Sep 28, 2017 at 11:38
Did you add the homepage property to your package.json as it states here? — bennygenel
– bennygenel, Commented Sep 28, 2017 at 11:41
@bennygenel yes, I added and gave a rebuild. Still a 404 page. — Rajendran Nadar
– Rajendran Nadar, Commented Sep 28, 2017 at 11:42

Gan · Accepted Answer · 2017-09-29 08:39:11Z

If your goal is to just host the create-react-app on GitHub Pages, you don't actually need the gh-pages package.

Manual way:

After you run npm run build, the build output is in the build folder. Make a copy of those files in the build folder.

Create a branch called gh-pages in your repo. Checkout the gh-pages branch. Delete everything and paste the copied files in this gh-pages branch. Commit and push to your GitHub repo.

Go to your GitHub repo settings and setup the GitHub Pages using gh-pages branch. (See https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/)

Visit username.github.io/project-name and you should be able to see your app.

Automated way:

It is actually much easier if you use service like Travis CI or Circle CI.

For Travis CI example, take a look at this article: 6 simple steps to automatically test and deploy your JavaScript app to GitHub Pages

When you have set this up, every time you push changes in master branch to GitHub repo, Travis CI will automatically build and deploy to your GitHub Pages.

Collectives™ on Stack Overflow

Deploy site made with React JS on GitHub pages

1 Answer 1

Manual way:

Automated way:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Manual way:

Automated way:

Comments

Your Answer

Sign up or log in

Post as a guest

Related