How to Deploy a React Static Website Using FTP

-


How to Deploy React App on Live Server Using FTP

After completing a React website, the most important step is deployment.
Many freshers know how to build a website but get confused when it comes to making it live.

In this blog, I will explain React static website deployment using FTP, in very simple words, exactly how I did it in real projects.


Step 1: Complete Your Website Development

Before deployment, make sure:

  • All pages are ready

  • UI looks correct

  • No major console errors

  • APIs (if any) are working

Deployment should always be done after final development.


Step 2: Build the React Project 

React projects cannot be deployed using source files like src.

Go to your project directory and run this command in CMD / Terminal:

npm run build

Why do we use npm run build?

This command:

  • Converts React code into production-ready files

  • Optimizes JavaScript and CSS

  • Reduces file size

  • Makes the website fast for users

You cannot upload src folder directly to the server.
Only the build/dist folder is deployed.


What Happens in Background When You Run npm run build

When you run npm run build, React does many things internally:

  • Combines multiple JS files into optimized files

  • Removes unused code

  • Minifies CSS and JavaScript

  • Prepares files that browsers can understand

After build, a folder is created:

  • dist (Vite)


Step 3: Understand Build Folder Structure

Inside the build / dist folder, you will see:

1. index.html

  • Main entry point of your website

  • Browser loads this file first

  • All React content is injected here

2. assets folder

Contains:

  • Compiled JavaScript files

  • CSS files

  • Images

  • Fonts

These files are optimized and hashed for performance.

3.  Other files

  • favicon

  • manifest (if enabled)

👉 Important:
You must upload all files inside the build/dist folder, not the folder name itself (depending on server setup).


Step 4: Test Build Locally Before Uploading

Before uploading to server, check if build works locally.

Run:

npm run preview

This helps you:

  • Confirm build is correct

  • Check routing

  • Test UI again

Never skip this step.


Step 5: Open FileZilla (FTP Client)

Now comes deployment.

Open FileZilla (FTP application).

It is a GUI-friendly tool, which means you don’t need commands.


Step 6: Connect to Server Using FTP

At the top of FileZilla, enter:

  • Host name

  • Username

  • Password

  • Port number

(You will get these details from seniors or hosting provider)

Click Quick Connect.

Once connected:

  • Left side → Your local computer files

  • Right side → Server folders


Step 7: Locate Project Build Folder (Left Side)

On the left side:

  • Navigate to your React project folder

  • Open it

  • Select only the dist or build folder

This folder contains the final website files.


Step 8: Locate Website Folder on Server (Right Side)

On the right side:

  • Open the folder where website is hosted

    • Common names:

      • public_html

      • www

      • project folder name

This is where your website lives on the server.


Step 9: Upload Build Files to Server

Now:

  • Open the dist/build folder on left

  • Select all files inside it

  • Drag and drop them into server folder (right side)

Wait until upload completes fully.


Step 10: Final Check on Browser

After upload:

  • Open website URL in browser

  • Refresh page

  • Check:

    • Home page loads

    • CSS applied correctly

    • Images visible

    • Routing works

🎉 Your React static website is now live!


Common Mistakes Freshers Make

  • Uploading src folder instead of build

  • Forgetting npm run build

  • Uploading build folder inside another folder

  • Not testing build locally

  • Breaking routing on refresh

Learn from mistakes — that’s real growth.


What This Deployment Taught Me

  • Deployment is part of development

  • Build files are different from source code

  • FTP knowledge is important for real projects

  • Testing saves embarrassment


Final Advice for Freshers

  • Always build before deploy

  • Test locally

  • Take backup before replacing files

  • Ask seniors if unsure

  • Never deploy directly on main server without testing

A developer is not complete until their code goes live.

If this Blog helped or motivated you, feel free to visit my profile Linkedin.com and connect. 


Comments

Post a Comment

Popular posts from this blog

My First Stipend-Based Internship💻🚀

-
  How I Choose a Different Path as a Fresher🚀 Getting a first internship as a fresher is not easy. Everyone applies on the same job portals, sends hundreds of resumes, and waits for replies that never come.  I was also in the same situation — confused, stressed, and unsure. But instead of giving up, I decided to try a different approach . This blog is about my first stipend-based internship , what I learned, and how choosing my own path helped me move forward in my tech career. 📚  My First Internship Experience  (Sep 2025) In September 2025 , I completed a one-month work-from-home internship . It was my   first  stipend-based internship , and it gave me real confidence as a fresher. Before this, I only knew theory. During this internship, I worked on real-time live projects , which helped me understand how actual development works. 📝What I Learned During This Internship This internship helped me build a strong foundation. 💻 Technical Skills HTML –...
Read more

How I Fixed the Prisma Error

-
How I Fixed the Prisma "The table public.User does not exist" Error It was one of those moments every developer dreads—you've set up your project, written your Prisma schema, and you're ready to seed the database. You run: npm run seed …and immediately get greeted with this error: PrismaClientKnownRequestError: The table `public.User` does not exist in the current database. I stared at it for longer than I'd like to admit. The User model was clearly defined in my schema.prisma file, so why was Prisma saying the table didn't exist? After a bit of digging, I realized the issue wasn't with my code at all—it was with my understanding of how Prisma works. If you're seeing this error too, here's exactly why it happens and how to fix it. Why This Error Happens One of the biggest misconceptions for developers new to Prisma (myself included) is believing that defining a model in schema.prisma automatically creates the corresponding table in the databas...
Read more

Design Web Pages using CSS

-
CSS ( Cascading Style Sheets ) is a styling language used to control the layout and appearance of web pages. It's an essential tool for web developers and designers to create visually appealing and user-friendly websites. In this blog, we will explore the basics of CSS, its types, and some exciting properties that can make your web pages interactive and interesting. Types of CSS There are three types of CSS: 1. Inline CSS: This type of CSS is applied directly to an HTML element using the style attribute. It has the highest priority among all CSS types. 2. Internal CSS: This type of CSS is defined within the <head> section of an HTML document using the <style> tag. 3. External CSS: This type of CSS is stored in an external file with a .css extension and linked to an HTML document using the <link> tag. CSS Syntax The basic syntax of CSS consists of a selector, property, and value: selector {   property: value; } CSS Properties There are many CSS properties t...
Read more