How to Publish a React Application on GitHub
This article explains how I use GitHub Pages to put my React projects online for free and easily share them on the internet. I detail the configuration of the package.json file, the use of the gh-pages package, and the steps to host your code with just a few commands. It's the perfect final step to conclude my learning journey, moving from local development to a functional website accessible to everyone.
Today, I'm going to explain how to publish (deploy) your React application on GitHub. This will allow you to showcase your project to the entire internet. It's very easy to follow, even if you're a beginner.
Note that this only works for client-side applications. If you have a backend, it's best to choose a different solution.
What You Need
-
A React project: You can create a project using the command
npx create-react-app my-app. -
A GitHub account: Sign up on GitHub if you haven't already.
-
Node.js installed on your computer.
Step 1: Create a React Project
If you don't already have a project, go to my second blog post here:
https://syslog.dti.crosemont.quebec/node/371
Step 2: Prepare Your Project for GitHub
- Open the package.json file
In this file, add a new line called homepage. It should look like this (replace your-username and my-app with your information):
1
2"homepage": "https://your-username.github.io/my-app",- Install the gh-pages package
In the terminal, type:
1npm install --save gh-pages- Edit the scripts in package.json
Find the "scripts" section and add these lines:
1
2"predeploy": "npm run build",
3
4"deploy": "gh-pages -d build"
5It should look like this:
1
2"scripts": {
3
4"start": "react-scripts start",
5
6"build": "react-scripts build",
7
8"test": "react-scripts test",
9"eject": "react-scripts eject",
10
11"predeploy": "npm run build",
12
13"deploy": "gh-pages -d build"
14
15},
16Step 3: Create a Repository on GitHub
- Go to GitHub and create a new repository.
-
Click the "New" button on your GitHub homepage.
-
Give your repository a name (for example, my-app).
- Follow the instructions provided by GitHub to connect your local repository to the online repository. Generally, you will type these commands in your terminal (replace the URL with that of your repository):
1git init
2git add .
3
4`git commit -m "First commit"`
5`git branch -M main`
6`git remote add origin https://github.com/your-username/my-app.git`
7`git push -u origin main`
8
9## Step 4: Deploy Your Application
10
11Now that everything is ready, type this command in your terminal:
12npm run deploy
This command will create a version of your application in the build folder and put it online on GitHub Pages.
Step 5: View Your Application Online
Open your browser and go to this address:
https://your-username.github.io/my-app
You should see your React application online.
A Small Detail
It's possible that React applications created with CRA (create-react-app) may not work during deployment. If this is the case, I recommend using vite.js to initialize your React project.
Conclusion
There you have it! You're now ready to build advanced React applications, from component concepts to application deployment. Now it's up to you to leverage the knowledge I've shared in my blog posts and create innovative and fun projects.
Good luck!
Sources
- Code with Ajesh. (February 6, 2023). How to Deploy React App to GitHub Pages | Step by step! YouTube. https://www.youtube.com/watch?v=7wzuievFjrk
Continue reading
