Struggling to deploy react app on GitHub

1

Well this is very annoying, I am trying to deploy my first React app built with create-react-app, I googled about how to do this and it looks like I’m missing something, I am following the commands shown in the terminal, but nothing works. I go to youtube but everyone seems to be skipping a step.

Now I am not a git expert but at least I know how to deploy a static site on GitHub, how can I deploy this app?

These are the steps I followed:

  • Added these scripts to my package.json file:
"homepage": "http://Gilbert1391.github.io/dashboardbox"

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

2- npm run build and the build folder is created successfully in the root folder of my repo.

3- Terminal says to run npm run deploy, I do and then this happens:

55%20PM
55%20PM1280×800 265 KB

The site is actually showing 404 not found https://gilbert1391.github.io/dashboardbox/

Can I get some help here? Thanks.

Btw, why after I run npm run build and the build folder with all its files is created, then i run git status I don’t see any changes in the terminal?, it says the branch is up to date but what about this new folder that isn’t registered?

2

I keep digging, read somewhere to run this command npm install --save-dev gh-pages, this added a devDependencies to my package.json

"devDependencies": {
    "gh-pages": "^2.0.1"
  }

But now when I run npm run build I get an error.

41%20PM
41%20PM1280×800 272 KB

3

Hey @Gilbert1391. Do you specifically need to deploy the application to GitHub. I created a video detailing how I deployed my Random Quote Machine to Netlify. It’s pretty easy. Hope it helps.

1 Like
4

I don’t know, I just created a build and manually moved my files to the github pages.

5

You mean you run npm run build take that folder and create a new repo, push the files to GitHub and deploy it as a regular static site?

6

Well this actually worked! Jesus Christ I was getting frustrated already trying to find a solution to this, thank you very much.

7

I created the github pages site (the special repo for that) and pushed them there to “deploy” them. If you haven’t already, read up on github pages.

8

Yes, with those that static site bundle.

9

Umm github pages site? I don’t know anything about that, so far until I know i’ve been deploying static sites with the usual git flow:

create new repo on GitHub

git init repo
git add .
git commi -m "first commit"
//...etc
10

Github itself isn’t deploying a site, per se. It is creating a public repo, so people can see your code. You can’t “run” the code. For that you need a hosting site. Github will do static hosting for you, through their github pages. I assumed that what you were trying to do was a CRA automated way of doing that. I just did it the manual way - creating the github pages repo and pushing my build bundle there.

11

^^
GitHub - Deploying a React App (created using create-react-app) to GitHub Pages

1 Like
12

I wish I had found this guide before struggling so much, thanks. I’ll keep it in mind for the next project.

1 Like
13

I still say it would be better to simply learn how to do a CRA build and how github pages works. Eventually you are going to have to deploy an app somewhere else and you won’t have scripts to do it for you. And eventually you may want to push something besides a CRA to github pages and things are going to get complicated.

Really, learning how to create a repo for the github pages and pushing to it is simple. The only other thing you need to understand is the CRA build process, which is not that complicated and you need to understand anyway. Personally, I find these scripts more complicated than simply doing it.

14

Yes I will also try your method as well, in fact it does sound a easier actually, it seems like just deploying a site like the others static sites I have deployed in the past using GitHub. I mean by your comment I take it like that’s exactly what it is. Just get the build folder from CRA, create a repo and push the files to that repo, go to settings and select master branch, done. Your site is now live.

Last night I was just tired and eager to deploy my app, so I followed the first tutorial I found and got errors.

15

Basically, it just needs to have the specific name that github wants for its gihub pages. I think it has to be “[username].github.io”. I don’t think there are other requirements - check the github docs. I had to do it this way because I was hosting my portfolio app on github and that was written in jQuery but I had sample React apps in folders. I don’t know how the other method handles anything but a simple React app.