Skip to content

Commit 8e2d6fe

Browse files
committed
2 parents acbfffb + 6938250 commit 8e2d6fe

9 files changed

+177
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: "Deploy your React app using GitHub pages"
3+
date: "April 03, 2023"
4+
subtitle: "Showcase your React app to the world with Github Pages"
5+
cover_image: "/images/deploy-your-react-app-using-github-pages.png"
6+
href: "/blogs/deploy-your-react-app-using-github-pages"
7+
tags: "Open Source, React, GitHub, JavaScript, Deployment, GitHub Pages, Web Development, JavaScript"
8+
url: "https://ayushsoni1010.hashnode.dev/deploy-your-react-app-using-github-pages"
9+
---
10+
11+
After gaining experience in creating React apps, it's time to explore various deployment options available to showcase your work to the world. We have been using Create React App to develop our React applications, so let’s see what it has to offer for our deployment process.
12+
13+
### 📌Introduction
14+
15+
React is a powerful JavaScript library for building interactive user interfaces. Once you have created your React app, the next step is to deploy it to a server so that it can be accessed by the users.
16+
17+
Assuming you have built a React app and are now searching for a means to share it with the rest of the world, there are numerous options available to deploy a React app and it’s always good to try something new. One popular and feasible option is to make use of GitHub Pages.
18+
19+
GitHub Pages is a free hosting service that allows you to easily deploy and share your web projects. So, why not take advantage of this option and give it a shot?
20+
21+
In this blog post, we will go through several steps to deploy your React app using Github Pages.
22+
23+
### 📌Prerequisites
24+
25+
- GitHub account
26+
- Install Git on your machine and set up Git.
27+
- Install Node.js
28+
29+
### 📌Step 1: Creating the repository
30+
31+
The first step is to create a new repository on GitHub for your React app. Once you have created your repository, clone it on your local machine using the Git command line tool for a Git GUI client.
32+
33+
34+
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntqn8waru8eb5dhu0oiz.png)
35+
36+
37+
38+
### 📌Step 2: Create your React app
39+
40+
After cloning your empty git repository, create a react app in the working of your git repository by the following command:
41+
42+
```jsx
43+
npx create-react-app ./
44+
```
45+
46+
### 📌Step 3: Add the dependencies to your app
47+
48+
Install the following package in your React app:
49+
50+
```jsx
51+
npm install gh-pages --save-dev
52+
```
53+
54+
### 📌****Step 4: Add configs to your react app****
55+
56+
Normally, our app will be deployed on a subdomain with our username on `github.io` like any other app, so to keep our app well-informed about our root URL, we need to add a `homepage` attribute to our `package.json` file and assign the URL to it.
57+
58+
```jsx
59+
"homepage": "https://{user-name}.github.io/{repo-name}",
60+
```
61+
62+
### 📌Step 5: Build your React app
63+
64+
Before you can deploy your React app to GitHub pages, you need to build it. In your `package.json` file, add the `predeploy` and `deploy` keys under scripts to create a production-ready build of your app. This will create a `build` directory in your project directory that contains the optimized and minified production build of your React app.
65+
66+
```jsx
67+
"predeploy": "npm run build",
68+
"deploy": "gh-pages -d build",
69+
```
70+
71+
Your `package.json` file should be similar to this:
72+
73+
```jsx
74+
{
75+
"homepage": "https://ayushsoni1010.github.io/test-react-app-deploy",
76+
"name": "test-react-app-deploy",
77+
"version": "0.1.0",
78+
"private": true,
79+
"dependencies": {
80+
"@testing-library/jest-dom": "^5.16.5",
81+
"@testing-library/react": "^13.4.0",
82+
"@testing-library/user-event": "^13.5.0",
83+
"react": "^18.2.0",
84+
"react-dom": "^18.2.0",
85+
"react-scripts": "5.0.1",
86+
"web-vitals": "^2.1.4"
87+
},
88+
"scripts": {
89+
"start": "react-scripts start",
90+
"build": "react-scripts build",
91+
"test": "react-scripts test",
92+
"eject": "react-scripts eject",
93+
"predeploy": "npm run build",
94+
"deploy": "gh-pages -d build"
95+
},
96+
"eslintConfig": {
97+
"extends": [
98+
"react-app",
99+
"react-app/jest"
100+
]
101+
},
102+
"browserslist": {
103+
"production": [
104+
">0.2%",
105+
"not dead",
106+
"not op_mini all"
107+
],
108+
"development": [
109+
"last 1 chrome version",
110+
"last 1 firefox version",
111+
"last 1 safari version"
112+
]
113+
},
114+
"devDependencies": {
115+
"gh-pages": "^5.0.0"
116+
}
117+
}
118+
```
119+
120+
### 📌Step 6: Deploy your React app
121+
122+
Now, all we need is to run `npm run deploy` command in the terminal every time we make changes and want to deploy our app with the latest changes and it will be up and running on the server.
123+
124+
```jsx
125+
npm run deploy
126+
```
127+
128+
This command will create a branch named `gh-pages`. After the build finishes, it pushes the changes to the `gh-pages` branch on the remote repository and hosts your app.
129+
130+
Now, it should be deployed to your GitHub repository after some time. To acquire the URL, go to your repository and click on **Settings** and go to **Pages**.
131+
132+
Boom! Your site is live on GitHub Pages.
133+
134+
135+
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un94xuk86yp1cbbs6p1o.png)
136+
137+
138+
139+
### 📌Step 7: Commit and Push your changes to GitHub
140+
141+
Once you committed the changes, you need to push your changes to GitHub.
142+
143+
Run the following commands to push your changes to the remote repository.
144+
145+
```jsx
146+
git add .
147+
git commit -m "your commit message"
148+
git push origin main
149+
```
150+
151+
### 📌Conclusion
152+
153+
Deploying your React app to GitHub Pages is a simple and easy way to share your app with the world. By following these steps, you can quickly deploy your app and make it available to anyone with an internet connection. GitHub Pages is a great option for small projects, personal websites, or demo sites. If you have a complex app or need more control over your hosting environment, you may want to consider other hosting options. But for simpler React apps, GitHub Pages is an excellent choice that is both free and easy to use.
154+
155+
### 📌Over to you
156+
157+
Have you used `github-pages` to host your React applications?
158+
159+
Let me know in the comments😄
160+
161+
 
162+
 
163+
164+
---
165+
166+
 
167+
 
168+
169+
That's all for today.
170+
171+
If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.
172+
173+
New to my profile? 🎉
174+
175+
Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.
176+
177+
Follow [@ayushsoni1010](https://twitter.com/ayushsoni1010) for more content like this🔥😉.
-1.5 KB
Loading
Loading
Loading
Loading
-1.98 KB
Loading
-5.45 KB
Loading
Loading
Loading

0 commit comments

Comments
 (0)