How to Deploy Your React.js Project on Free Hosting In Simple Way

Hello everyone, I’m Arun, a WordPress developer with experience across various frameworks. In this article, I’ll guide beginners through deploying a React.js project on free hosting platforms. This guide is perfect for those who want to host their projects for practice or to showcase in their portfolios.

Follow these steps to get your React.js site live:

1. Build a React.js project.
2. Adjust the src path in React.js.
3. Bundle the project.
4. Create an account with a free hosting provider.
5. Access the file manager and upload the files.

Step 1: Build a React.js Project

To start, use a React command in the terminal to create your project. I assume you’re familiar with creating a React project, so let’s move on to the next steps. For this guide, I’ll use an already-created project and show you how to prepare it for deployment.

npm create vite@latest my-react-app -- --template react        

Step 2: Adjust the src Path in React.js

Open the package.json file in your project folder. Add this property inside the JSON file:

package.json

 "name": "adlwebsolutions",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "homepage": ".",        

If you’re using Vite for your project, open vite.config.js and add the following line:

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: './',
})
        

This configuration ensures that the paths in your React project will work correctly when hosted.

Step 3: Bundle the Project

Once you’re done working on your project, it’s time to bundle it for production. Run the following command in your terminal to bundle the files:

npm run build        

This command will create a new folder named dist (if using Vite) or build (if using CRA) in your project directory. This folder contains all the files needed for deployment.

Step 4: Create an Account on a Free Hosting Website

If you haven’t already, create a free account on a hosting provider. For a step-by-step guide, check out my article on creating an account with free hosting providers .

Check this Link : Create a Free website For Your Portfolio

If you’re looking to host a website for business purposes—whether to attract leads or drive traffic—a premium hosting provider is essential. I personally use Hostinger for my own site and client projects, and it’s been a reliable and powerful choice. If you’re ready to launch your site professionally, Hostinger is a fantastic option to consider!

Purchase with this link to get 20% offer : Hostinger

Step 5: Access the File Manager and Upload the Files

1. Log into your hosting account, navigate to the control panel, and open the file manager.
2. Locate the htdocs folder, where your site files need to be uploaded.
3. Upload the contents of the dist (or build) folder into htdocs.
4. After uploading, go into the dist (or build) folder, select all files, and move them directly into the htdocs folder. Delete or rename any extra index.html files already present in htdocs, except for your React index.html.

And that’s it! Your React.js project should now be live on your hosting account. Check your domain to see your deployed project. Using this procedure you can live host any project and framework.

Learning something NEW follow me, for more...Code together & grow together.....