Deploying React app to Github User Page

Question

I'm having a little trouble deploying a React app to my Github User Page. I have read the create-react-app documentation and understand how to deploy to a project page using "yarn run deploy," however, this is not what I am trying to do.

I believe the problem is that a user page looks for index.html in the repo's root directory, but "npm run build" generates that file in a separate build directory. Since user pages must be built from the master branch, I am looking for a way for these build files to be generated right at the repo's root. My first thought was to modify the "build.js" script, but I'm not really sure what I'm looking at when I open it.

For what it's worth, the application works just fine when I drag the contents of my build directory directly into the root directory before pushing to Github, and can be accessed as I'd like at username.githubo.io. However, that feels rather sloppy and tedious.

I've tried setting "homepage" in package.json to "username.githubo.io/", but the deploy script still generates a separate gh-pages branch from which the app is to be built (which, again, isn't allowed for a user page).

Appreciate the help in advance! Let me know if I can clarify.

EDIT:

https://tyler-coleman.github.io/

https://github.com/tyler-coleman/tyler-coleman.github.io

Including links to the current site and repo so y'all have a better idea what I'm talking about. For now I've gotten around the issue by including "cp -a build/. ." in my deploy script in package.json.

I just think it's strange that the documentation includes directions for deploying to a project page, but not to a user page.

As far as I know, GitHub pages only supports hosting of static sites. — Mirza Sisic
– Mirza Sisic, Commented Sep 26, 2017 at 1:33
From the looks of tyler-coleman.github.io, it seems you got it to work? I am having the same problem, so I'd be curious to know how you solved it. — zigzag
– zigzag, Commented Oct 9, 2017 at 0:54
@zigzag Sorry for the, ehm, really delayed reply, but if you still haven't figured something out - here's what I did: Find and modify your "deploy" script in package.json to copy all the files from your build directory to your root directory. It's silly, but it works. Mine looks like this: "scripts": { "predeploy": "npm run build", "deploy": "cp -a build/. .", "start": "node scripts/start.js", "build": "node scripts/build.js --history-api-fallback", "test": "node scripts/test.js --env=jsdom" }, Curious to know if you've found a more elegant solution. — Tyler
– Tyler, Commented Feb 21, 2018 at 20:16

Jim Reinknecht · Accepted Answer · 2017-09-25 23:36:10Z

2

it works fine because your localhost computer is running node and node package manager - the github pages don't run node.js which is what your instance needs to serve up react.

if you want to run react, and node, i recommend rending a linode linux box for $5 a month and install what you need. For an extra $12 a year you can register your own fancy domain name..

answered Sep 25, 2017 at 23:36

Jim Reinknecht

831 gold badge1 silver badge8 bronze badges

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

2 Comments

Tyler Over a year ago

I'm not using node.js, as far as I'm aware. Just the package manager. It works fine hosted on Github Pages, check it out: tyler-coleman.github.io . I'm kind of cheating right now by including "cp /build/. ." in the "build" script of package.json to copy my build files to my root directory, but something about it feels wrong. There must be a more professional way to deploy the app to my user page without having to copy build files, then pushing to repo. Sorry if I'm not making sense, I'm entirely unfamiliar with React apps and this is an attempt to learn. Thanks!

Jim Reinknecht Over a year ago

honestly I'm a bit of a noob to react myself, but as far as I was aware it runs on top of node.

hm1912 · Accepted Answer · 2020-03-18 20:49:25Z

0

I found a good tutorial for deploying react on a Github User Page here.

Essentially, you have to add your React sources to another branch (usually dev) and then set the following in the pre-existing "scripts" object in package.json:

"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",

This tells gh-pages to deploy the React App at the master branch.

Apart from this you also have to add a "homepage" at the highest level of the object:

"homepage": "https://yourgithubusername.github.io",

It is also a good idea to set dev as the default branch of your repository.

For further details, please see the link above.

answered Mar 18, 2020 at 20:49

hm1912

3141 silver badge10 bronze badges

Collectives™ on Stack Overflow

Deploying React app to Github User Page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related