Earlier today, I worked on putting together this Sticky Note App, in an effort to get more comfortable with React.js. The application uses React.js, React DOM, and React Draggable.
After completing my application, I was about to tackle deployment with Heroku, since I’ve become pretty familiar with deploying various applications that consist of different stacks on Heroku.
However, this application was a lot simpler, so it seemed like using Heroku would have been a little excessive, especially since there’s no backend component for this application.
So I decided to tackle deploying the application via GitHub pages – which is already one of my favorite ways to deploy simple applications since I host all my repos there as well.
The first step I did, was use the
create-react-app command in my terminal, where I then moved the various components of my simple React application. Then I followed the following steps:
Edit package.json by adding a homepage
"homepage": "https://[insert username].github.io/[insert project repo name]"
npm install --save-dev gh-pages
Edit package.json by adding a predeploy and deploy script:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
npm run deploy
And there you have it, a simple enough solution for deploying those simple enough React applications.
6 Replies to “Deploying a React App to GitHub Pages”
I only shows me the readme file, even After deleting it, it keeps showing readme file
Is it showing you the readme file when you access the github.io url (https://[insert username].github.io/[insert project repo name])?
the same with me,after following the steps i can see only readme file ,though on my machine the app works
Hi, sorry for the delay, did you figure this one out?
Megan, I tried this way, but I did not create my reactjs application via create-react-app –save react-scripts which is important for the steps above to work. My app was created via npm init and so on. Any ideas?
Hi, sorry for the delay! What does your project structure look like? I didn’t use create-react-app for the application I deployed, and you can take a look at how I structured things here: https://github.com/megancoyle/sticky-notes