Sign up
Sign up
Still Confused?
Affiliate IconRequest a Callback

Deploying the Project 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:

Setting

Value

Build Commandnpm run build
Publish directorybuild

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

Share

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

Share in

Building Random Password Generator using ReactJS

author

Building Random Password Generator using ReactJS

MODULE 1 : Introduction
lessonIntroduction to the Project
lessonWhat is ReactJS?
lessonWhat is a Random Password Generator and Its Purpose?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonPre-Requisites & Tech Stack Used
lessonBasic Requirements
lessonTech Stack Used
lessonInput and Output
MODULE 3 : Necessary Concepts
lessonNecessary Concepts
lessonReact Components
lessonState Management with Hooks
lessonEvent Handling and Password Generation Logic
MODULE 4 : Step-by-Step Implementation
lessonStep-by-Step Implementation
lessonSet up the Environment
lessonCreating Application Structure (Directory Structure)
lessonImplementation Steps of the Project
MODULE 5 : Deployment
lessonDeployment
lessonUploading Files to GitHub Repository
lessonDeploying on Netlify
MODULE 6 : Conclusion
lessonConclusion
lessonLearning Outcome
lessonLive Demo & Output Screenshot
lessonMultiple Choice Questions (MCQs)
lessonFurther Learning (Course Recommendations)

Building Random Password Generator using ReactJS

    MODULE 1 : Introduction
    lessonIntroduction to the Project
    lessonWhat is ReactJS?
    lessonWhat is a Random Password Generator and Its Purpose?
    lessonAim of the Project
    MODULE 2 : Pre-requisites and Tech Stack Used
    lessonPre-Requisites & Tech Stack Used
    lessonBasic Requirements
    lessonTech Stack Used
    lessonInput and Output
    MODULE 3 : Necessary Concepts
    lessonNecessary Concepts
    lessonReact Components
    lessonState Management with Hooks
    lessonEvent Handling and Password Generation Logic
    MODULE 4 : Step-by-Step Implementation
    lessonStep-by-Step Implementation
    lessonSet up the Environment
    lessonCreating Application Structure (Directory Structure)
    lessonImplementation Steps of the Project
    MODULE 5 : Deployment
    lessonDeployment
    lessonUploading Files to GitHub Repository
    lessonDeploying on Netlify
    MODULE 6 : Conclusion
    lessonConclusion
    lessonLearning Outcome
    lessonLive Demo & Output Screenshot
    lessonMultiple Choice Questions (MCQs)
    lessonFurther Learning (Course Recommendations)
    Gift IconUnlock Your Exclusive Rewards!

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

    Explore Rewards