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

1. Open your terminal.
2. Navigate to the directory where you want to save your project.
3. If you haven't installed Node.js or npm on your device, you can find instructions here.
4. 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

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

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

Step 3: Build Your App

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

Step 4: Publish to GitHub

1. When your project is ready to publish, bundle it by typing npm run build in the terminal.
2. 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

1. Open your project's repository on GitHub.
2. Click on the Settings tab and scroll down to the GitHub Pages section.
3. Under Source, select the branch that you want to publish. The default choice is usually the master branch or the main branch.
4. 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

1. In your project's repository on GitHub, click on the Settings tab.
2. Scroll down to the GitHub Pages section.
3. 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!