Deploying the React Quote Generator App Online

Your project isn’t complete until it’s live. This lesson guides you through uploading your project to GitHub and deploying it to Netlify, so that anyone with the link can access your joke generator online 24/7.

Lesson 1: Upload Files to GitHub Repository

Deploying our app will be easiest if the code is on GitHub, so we’ll first upload (push) our project to a GitHub repository. This also ensures our code is backed up remotely and makes collaboration easier.

Here’s a step-by-step guide to pushing an existing project to GitHub using Git:

Create a New Repository on GitHub:

Log in to your GitHub account and click the “+” icon at the top-right, then “New repository”. Give it a name (for example, “quote-generator-react”) and optionally a description. Keep it public (unless you want it private).

Initialize Git in your project folder: 

In your terminal, ensure you are in the root directory of your React app (the same folder with package.json). Run:

git init

This creates a new local Git repository (a hidden .git folder). If you run git status, you’ll see all files are untracked initially.

Add and Commit files: Now add all files to staging and commit them:

git add .

git commit -m "Initial commit"

git add . stages all current files, and the commit command records the snapshot with a message. You can verify with git log that a commit was created.

Add the remote origin: 

Copy the repository URL from GitHub (it will look like https://github.com/YourUsername/your-repo-name.git). Now link your local repo to the GitHub repo:

git remote add origin <REMOTE-URL>

Replace <REMOTE-URL> with your repo’s URL. This command adds a remote named “origin” pointing to your GitHub repository. You can check it by running git remote -v to see the list of remotes.

Push the code to GitHub: Finally, send your local commits to the GitHub repo:

git branch -M main      # ensure the local branch is named 'main'

git push -u origin main

Now if you refresh your GitHub repository page, you should see all your project files there. The commit history will show the “Initial commit” we made.

Having the project on GitHub not only serves as backup, but it’s also how we’ll connect to Netlify for deployment. Netlify can directly pull from GitHub to build and host our app. Next, we’ll do exactly that.

GitHub Link: Quote Generator App

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-random-quotes-generator.netlify.app/

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