Create, Deploy & Host React App For Free (GitHub Pages)
Deploying your very first React Application can seem like battling a brick wall, but it’s a wall that all developers need to break through sooner than later. There is an abundance of information floating around the internet, so you can consider this a straight-forward, beginner-friendly tutorial to get you up and running in as little time as possible; let’s do this!
First & Foremost…
If you haven’t already, you’ll need to follow the steps below to ensure we can create a GitHub Repository for our app and ultimately host it through GitHub!
- Create GitHub Account — Sign up here
- Configure Git Locally — Follow this
- Install Node.js — Refer to docs
- Install npm — Documentation
Okay, now you’re ready to create your Application!
Step 1 — Create Repo
We’re going to need to create a new GitHub Repository for our application to live (that isn’t local). You’re going to want to navigate to GitHub and click the green “New” button located in the top left corner.
You can name the repository anything you like, but make sure to keep everything else the same as I have. You will not want to initialize it with any unnecessary files.
Step 2 — Create React App
If you haven’t already, you’re going to need to use npm’s create-react-app command. In this case, we will be naming our application “example-react-app” but you can name yours accordingly.
npx create-react-app <your-app-name>for reference, in my case it translates to
npx create-react-app example-react-appthen cd into the root directory of the application
cd <your-app-name>to confirm your React App is working, let’s deploy it locally!
npm startif you see this in your browser, you’ve successfully created your React App!
For now you can safely stop the server using CTRL + C in the terminal
Step 3 — Configure GitHub Pages
Thankfully GitHub Pages is automatically made available to us by GitHub when we create a repository. With that being said, we still need to install GitHub Pages as a dev dependency.
npm install gh-pages — save-devwe also need to update our package.json
we’re first going to add a homepage property
"http://<github-username>.github.io/<repository-name>"
in my case, this would be the result
"homepage": "http://dylan-williamson.github.io/example-react-app",
we also need to add predeploy and deploy commands in our scripts
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
once complete, your package.json should have the following additions
Step 4 — Push Changes To GitHub
Go back to your GitHub repository page and copy this line of code from your configuration instructions
once copied, head back to your terminal
you’re going to paste and enter the code snippet you just copied followed by a couple other commands
git remote add origin https://github.com/<github-username>/<repository-name>.gitgit add .git commit -m”initial commit”git push
to confirm your changes have been pushed, refresh your GitHub repo page
our changes have been staged and pushed to our GitHub repo, nice!
Step 5 — Deploy Our App
Our configuration is officially complete and we only have one more thing to do, deploy our application!
npm run deployour deploy command will do two things for us
- It will run our
predeployscript which is set to runnpm build
npm buildwill create a production build for our application- this creates a build folder in our root directory which turns our app into something GitHub Pages can render
2. It will then run our deploy script which is set to run gh-pages -d build
gh-pages -d buildwill push ourbuildfolder to a new branch calledgh-pages- GitHub pages will then use this branch to deploy our application
We can now check our deployment by navigating to url in the homepage section of our package.json which in our example is https://dylan-williamson.github.io/example-react-app
let’s see what happens!
Congratulations, we’re live!
That’s it! You’ve officially deployed your application to GitHub Pages absolutely free, isn’t that awesome?
