Deploy React Calculator App on GitHub & Netlify

Upload Files to GitHub Repository

Before deploying, push your code to a GitHub repository. In your terminal inside the calculator folder, do:

git init

git add .

git commit -m "Initial commit: React calculator app"

git branch -M main

git remote add origin https://github.com/your-username/calculator.git

git push -u origin main

GitHub Link: Calculator App Project

This initializes Git (if not already), commits your files, and pushes to a new GitHub repo. You should replace the URL with your actual repository link. After pushing, your code is safely stored online on GitHub.

Deploying the Project

To make the project live, first build the production bundle by typing the following command in the command prompt:

npm run build

This creates optimized static files in a build/ folder.

Prerequisites for Netlify:

• You have a working React app (e.g. random-joke-generator/)
• You've successfully run npm run build
• You have a free Netlify account
• You have the project in a GitHub repo

Go to Netlify and log in

1. Click “Add new site” → “Import an existing project”
2. Choose GitHub and connect your account
3. Select the repository (e.g. random-joke-generator)

Configure Build Settings

When you deploy your React app (whether via GitHub or drag & drop), make sure Netlify settings are:

You can find this in:

Netlify Dashboard → Site Settings → Build & Deploy → Build Settings

Click Deploy Site

Netlify will build and host your site

After a minute or two, you’ll get a live URL like:

https://basic-online-arithmetic-calculator.netlify.app/

You can change the site name if you want by going to Site Settings > Change site name.