How to publish a ReactJS app on GitHub

GitHub Pages is a hosting service that lets you publish your projects to the web, directly from your GitHub repository. And it's free to use.

Pages is really useful if you need to get your portfolio projects up and running quickly. As you learn new skills and update your repos, you have peace-of-mind knowing that your projects can be published with just a few clicks. If you've ever had to unexpectedly share your portfolio with a potential client or recruiter, you know how valuable this can be!

So let's get started.

Step 1: Create a ReactJS app

Open your terminal.
Navigate to the directory where you want to save your project.
If you haven't installed Node.js or npm on your device, you can find instructions here.
Create your new app. This will be the local repository for the project.
```
npx create-react-app my-project
cd my-project
```

Step 2: Initialize a Git Repository

Log into your GitHub account.
Create a new repository with the same name that you used for your local repository. This will be your remote repository for the project.

Connect your local and remote repositories.

git remote add origin
https://github.com/my-username/my-project

Step 3: Build Your App

In the terminal, type npm start to spin up a local server on your device.
Open http://localhost:3000 to view your app. The page will automatically reload as you make changes.
Build your app!

Step 4: Publish to GitHub

When your project is ready to publish, bundle it by typing npm run build in the terminal.

Push your production-ready app to GitHub.

git add .
git commit -m "Add a short description of the changes you made."
git push -u origin master

Open your project's repository on GitHub.
Click on the Settings tab and scroll down to the GitHub Pages section.
Under Source, select the branch that you want to publish. The default choice is usually the master branch or the main branch.
Click Save and GitHub will display the URL for your project.

Tip: To learn more about configuring source branches, see this GitHub Docs page.

Step 5: Use a Custom URL

In your project's repository on GitHub, click on the Settings tab.
Scroll down to the GitHub Pages section.
Under Custom Domain, enter your domain name and click Save.

Tip: To learn more about configuring custom domains, see this GitHub Docs page.

Conclusion

GitHub Pages makes it easy to deploy and host web-based apps. If you need a simple, user-friendly way to publish your portfolio projects, give Pages a try!

How to publish a ReactJS app on GitHub

Comments

More from this blog

Understanding Hash Tables

Leveling Up in 2021

Wrapping Up 2020

How To Plan A Redesign

Book Review: It Doesn't Have To Be Crazy At Work

Step 1: Create a ReactJS app

Step 2: Initialize a Git Repository

Step 3: Build Your App

Step 4: Publish to GitHub

Step 5: Use a Custom URL

Conclusion

Command Palette

Comments

More from this blog

Step 1: Create a ReactJS app

Step 2: Initialize a Git Repository

Step 3: Build Your App

Step 4: Publish to GitHub

Step 5: Use a Custom URL

Conclusion