Sign up
Sign up
Still Confused?
Affiliate IconRequest a Callback

Deploy Your App to Netlify

Deploy Your App 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:

Setting

Value

Build Commandnpm run build
Publish Directorybuild

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

Share

You can share this topic with your family and friends on Social Media.

Share in

Building a Weather App Using ReactJS

author

Building a Weather App Project Using ReactJS

MODULE 1 : Introduction
lessonWhat is ReactJS?
lessonWhat is the Weather App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements
lessonTech Stack Used
lessonInput and Output of the Project
MODULE 3 : Necessary Concepts
lessonComponents in React
lessonFunction and Event Handling in ReactJS
lessonState and React Hooks
lessonFetching Weather Data from an API
MODULE 4 : Step-by-Step Implementation
lessonSetting up the Environment
lessonCreate Application Structure (Directory Overview)
lessonBuild the App One Component at a Time
lessonStyling our Weather App
lessonRun and Test the Weather App Locally
MODULE 5 : Deployment
lessonUploading the Project to GitHub
lessonDeploy Your App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of the Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Future Learning

Building a Weather App Project Using ReactJS

MODULE 1 : Introduction
lessonWhat is ReactJS?
lessonWhat is the Weather App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements
lessonTech Stack Used
lessonInput and Output of the Project
MODULE 3 : Necessary Concepts
lessonComponents in React
lessonFunction and Event Handling in ReactJS
lessonState and React Hooks
lessonFetching Weather Data from an API
MODULE 4 : Step-by-Step Implementation
lessonSetting up the Environment
lessonCreate Application Structure (Directory Overview)
lessonBuild the App One Component at a Time
lessonStyling our Weather App
lessonRun and Test the Weather App Locally
MODULE 5 : Deployment
lessonUploading the Project to GitHub
lessonDeploy Your App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of the Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Future Learning
Gift IconUnlock Your Exclusive Rewards!

You have exclusive rewards which you can unlock by earning Geekoins. Explore your rewards now!

Explore Rewards