Deploying React App on Netlify

After coding, we host the app so anyone can access it live. We’ll use GitHub and Netlify.

Upload Files to GitHub Repository

You can create a repository in GitHub and then add the random-joke-generator 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.

Initialize Git: 

In your project folder (digital-clock), initialize Git and commit:

git init

git add .

git commit -m "Initial commit: React digital clock app"

Create a GitHub Repo: 

On GitHub, create a new repository (e.g., digital-clock). Do not add a README (since we already have one), license, or .gitignore online – it will merge with your local files.

Push to GitHub: 

Link your local repo to GitHub and push:

git branch -M main

git remote add origin https://github.com/YourUsername/digital-clock.git

git push -u origin main

This uploads your code to GitHub. Now your project is in version control, which is also needed for Netlify’s auto-deploy.

GitHub Link: Live Digital Clock

Deploy to 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

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://online-live-digital-clock.netlify.app/

After deployment, Netlify provides a live URL (like https://digital-clock.netlify.app). You can customize the site name if desired. The site is now live!