Deploying React on Github Pages
Jul 10, 2020 • 4 Minute Read
Introduction
Hey there! If you're reading this, then you're probably trying to figure out how you can deploy your React App to Github Pages or you want a quick way to get your React app running on the public web. Say no more! In this guide, you'll learn how to deploy your React App to Github Pages.
What you need to follow along:
-
Node js
-
Npm (Pre-installed with Node) or Yarn
-
A Github Account
-
Git
Prepare the App
I have already prepared a demo application with Create-React-App so that you can follow along quickly. If you prefer deploying a custom app you've built with Create-React-App , these steps should also work perfectly for you. To clone the app, open your terminal and run:
git clone https://github.com/Nyamador/ps-ghpages.git && cd ps-ghpages
Now install the dependencies for the app.
yarn add # If you prefer yarn
OR
npm install # If you do not have yarn installed
Run the App
Verify the app is running by starting the Development Server.
yarn start OR npm start
# You should see the following output in your terminal
Compiled successfully!
You can now view styled in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.75.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Visit https://localhost:3000 to view the app in your browser
Create Your Repository
Create a Github repository for your app. This is where your built app will be deployed. You can do that here.
Build the App
The app you have running in your development environment runs on a server, but your deployed app running in the browser will not be able to spin up a webserver to serve your static assets. To generate the necessary static assets (HTML, CSS, and JavaScript) needed to make your app run in the browser, you have to run a build to generate the assets for you. Luckily, Create-React-App has this configured already, so all you need to do is to run the build script and your production-ready bundle will be generated for you. Let's see how that works. Run the following command at the root of your app (Where package.json lives).
But before that, add homepage to package.json. Create-React-App will use the given URL to determine the root URL in your build.
"homepage" : "https://{yourusername}.github.io/{app-name}
#{yourusername} - Your githhub username
#{app-name} - Name of your app
Now run the command below to build your app.
yarn run build
OR
npm run build
Notice the new build folder generated for you at the root of your project.
Install the Github Pages Package
Now that your app is ready to be published, you need to configure it for Github Pages. To do that, install the github pages package by running the following in your terminal.
yarn add gh-pages
OR
npm install --save gh-pages
Add Script For Deployment
In your package.json file, add a deploy script to your scripts section. It should look like this so far.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
#new
"deploy": "gh-pages -b master -d build",
"eject": "react-scripts eject"
},
Deploy Your App
Now deploy your app with the deploy script you created.
yarn run deploy
OR
npm run deploy
You can further tweak your build scripts to automatically build and deploy your app for subsequent deployments like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
#new
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build",
"test": "react-scripts test",
"deploy": "gh-pages -b master -d build",
"eject": "react-scripts eject"
},
Conclusion
Whew! That's it. You should now be able to deploy any React app to Github Pages anytime you want.
You can read more on Create-React-App deployments here.
Feel free to ping me on twitter @DesmondNyamador.
