Upload Files and Deploy Project in Netlify

With a working app on our local machine, the final step is to deploy it so that others can use it. We will deploy the app to Netlify, which provides free hosting for static websites (our React app after build becomes a static bundle of HTML, CSS, JS). We’ll first ensure our code is on GitHub, then connect GitHub to Netlify for continuous deployment.

Upload Files to GitHub Repository

You can create a repository in GitHub and then add the bmi-calculator project folder to that. Don’t worry if you are clueless about it, we have added our GitHub repo down below, you can refer to that if you have any doubts.

Or you can create and add a repo through your command prompt by following the below commands:

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/yourusername/random-joke-generator.git

git push -u origin main

GitHub Link: Random Password Generator

Having the project on GitHub will allow Netlify to fetch the code and auto-deploy whenever you update it.

Deploy on Netlify

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

You can find Build Settings in:

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

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

Click Deploy Site

Netlify will build and host your site

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

https://random-password-generator.netlify.app/

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