React js & Github actions

Introduction

Hey there, fellow developers! 🎉 Let's get your React app out into the world! 🚀 Today, we're going to deploy it to GitHub Pages, a super easy way to share your creations with everyone.

Step 1: Create Your GitHub Repository: (skipp this if you alread have done this)

• Head over to GitHub and click the "New" button.
• Name your repository (let's call it react-awesome-app).
• (Optional) Add a description.
• Choose "Public" visibility.
• Click "Create repository".

Step 2: Set Up Your Local React Project

Open your terminal and run

npx create-react-app react-awesome-app

Navigate to your project:

cd react-awesome-app

Step 3: Connect Your Local Project to GitHub

• Initialize Git:

git init.

• Add all files:

git add .

• Commit changes:

git commit -m 'Initial commit'

• Create a main branch:

git branch -M main

• Add the remote:

git remote add origin https://github.com/{your-github-username}/react-awesome-app.git

• Push to GitHub:

git push -u origin main

Step 4: Build for Deployment

Run npm start to check everything works.
Create a production build: npm run build
Step 5: Configure GitHub Pages

Open package.json.
Add homepage:

"homepage": "https://{your-github-username}.github.io/react-awesome-app"
Step 6: Deploy Your App

Install gh-pages:

npm install gh-pages --save-dev
Add scripts to package.json:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Deploy:

npm run deploy
That's it! 🎉 Your app is now live on GitHub Pages. Share the link with the world!

The public link for your application will be :

• react-awesome-app to be replaced by your github repo name https://{username}.github.io/{repository-name}/