Deploying the Project

Your weather app is functional and visually appealing—but it’s not truly complete until it’s live. In this module, you’ll learn how to upload your project to GitHub and deploy it to Netlify so it’s accessible to anyone with the link. Let’s take your project from your local machine to the internet.

Upload Project to GitHub

To host your code online, we’ll first push your project to GitHub. If you’re not familiar with GitHub, it’s a platform for sharing code and collaborating with others. Don’t worry if this is your first time—just follow along step by step.

Option A: Upload via GitHub Website

1. Go to GitHub.com and log into your account.
2. Click on the + icon in the top right and choose New repository.
3. Give your repo a name like react-weather-app.
4. Leave all other options as default and click Create repository.
5. Now go to your project folder on your computer and drag-drop all files (except node_modules) to this GitHub repo using the Upload files option.

Option B: Upload via Git CLI (Recommended)

If you prefer using the terminal:

1. Open your terminal and navigate to your project folder.
2. Run the following commands one by one:

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/your-username/react-weather-app.git

git push -u origin main

Replace your-username with your actual GitHub username.

If you run into any issues, you can refer to our my GitHub repo for guidance: React Weather App Repository

Deploy to Netlify

Let’s now take your GitHub-hosted project live using Netlify, a popular and beginner-friendly hosting service for front-end apps.

Step 1: Build Your React App

In your terminal, run:

npm run build

This creates a new build/ folder with production-ready files. Make sure you run this command from the root of your weather app project (where package.json is located).

Step 2: Sign Up or Log in to Netlify

1. Go to Netlify.com and create a free account or log in.
2. Click "Add new site" → "Import an existing project".
3. Choose GitHub and authorize Netlify to access your repositories.
4. Select your react-weather-app repo.

Step 3: Configure Build Settings

Set these values:

Leave all other settings as default, then click Deploy Site.

Netlify will take a minute or two to build and deploy your app.

Step 4: Your Site Is Live

Once deployment is complete, Netlify will give you a random live URL like:

https://your-weather-site.netlify.app/

You can rename this URL:

1. Go to your Site Settings on Netlify.
2. Click Change site name and enter something like:
   guvi-weather-app-jaishree