Deploying React app to Github User Page

3
votes

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.

2
reactjsgithub-pagescreate-react-app
As far as I know, GitHub pages only supports hosting of static sites. - Mirza Sisic
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 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

2 Answers

2
votes

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..

0
votes

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.