Top 6 Free Hosting Platforms for Deploying Your React App

React is a popular JavaScript library used for building dynamic user interfaces. Once you have built your React app, the next step is to deploy it so that others can access it online. There are several ways to deploy a React app, and in this blog post, we'll explore 6 ways to deploy a React app for free.

All the services described in the tutorial are completely free with no hidden cost or credit card requirment until you pass a certain treshold, which is usually a generous free tier based on bandwidth.

1. Github Page

GitHub Pages is a free web hosting service that allows you to host static websites directly from a GitHub repository. You can use it to host your React app by creating a new repository, pushing your React code to it, and enabling GitHub Pages in the settings.

Head over to github and create a free account if you do not have one yet.

Deploying a React app to GitHub Pages is a straightforward process that can be completed in just a few steps.

Step 1: Create a new GitHub repository

The first step is to create a new repository on GitHub. Navigate to the GitHub website, log in to your account, and click the "New" button to create a new repository. Give your repository a name and a brief description, choose whether to make it public or private, and click the "Create repository" button.

Step 2: Push your React app to GitHub

In your terminal, initialize the local directory as a Git repository, commit all the changes, and push it to remote by running the following command in the project root:

copy 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Replace your-username with your GitHub username, and your-repo-name with the name of your repository. After running the code above in your terminal, your project will be pushed to github.

Step 3: Configure your app for GitHub Pages

Next, order to deploy your React app to GitHub Pages, you need to configure your app by installing a new package called gh-pages in your project using the below command:

copy 
npm install --save gh-pages

In your project's package.json, add the following scripts:

copy 
{
  "homepage": "https://your-username.github.io/your-repo-name/",
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}

Again, replace your-username with your GitHub username, and your-repo-name with the name of your repository.

Step 4: Deploy your app to GitHub Pages

The final step is to build and deploy your React app to GitHub Pages. To do this, run the following command in your terminal or command prompt to build your app:

copy 
npm run build

And then to publish everything from your build folder to your gh-pages branch, you'd run this:

copy 
npm run deploy

This command will build your app and deploy it to GitHub Pages. Once the deployment is complete, your app will be accessible at https://your-username.github.io/your-repo-name/.

2. Firebase Hosting

Firebase Hosting is a free hosting service offered by Google that allows you to deploy static web content, including React apps. You can use it to deploy your app by creating a new Firebase project, installing the Firebase CLI, and deploying your app with a simple command.

Deploying a React app to Firebase Hosting is a straightforward process that can be completed in just a few steps.

Step 1: Create a Firebase project

First, you need to create a new Firebase project by going to the Firebase console and clicking on the "Add project" button. Follow the on-screen instructions to create your project.

Step 2: Install Firebase CLI

Next, you need to install the Firebase CLI (Command Line Interface) globally by running the following command in your terminal or command prompt:

copy 
npm install -g firebase-tools

Step 3: Login to firebase

Next, you need to login to your firebase account from your terminal using this command:

copy 
firebase login

You’ll be prompted with a URL in the terminal that will open in the browser to verify. After giving the necessary permissions, you’ll see a successful login message.

Step 4: Initialize your Firebase project

Navigate to your project folder in your terminal or command prompt and run the following command:

copy 
firebase init

This command will initialize your Firebase project and prompt you to select the Firebase services you want to use. Choose "Hosting" from the list of available services by clicking on Space to navigate and Enter to Select.

Step 5: Configure your app for Firebase Hosting

Follow the on-screen prompts to configure your app for Firebase Hosting. When prompted, enter the build folder for your React app (usually build/). This folder contains the production-ready version of your app that Firebase will host.

copy 
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

Step 6: Deploy your app to Firebase Hosting

To deploy your React app to Firebase Hosting, run the following command in your terminal or command prompt:

copy 
firebase deploy

This command will build your app and deploy it to Firebase Hosting. Once the deployment is complete, your app will be accessible at https://your-project-name.firebaseapp.com.

That's it! Your React app is now live on Firebase Hosting. You can share the URL with others to showcase your development skills and add it to your portfolio.

3. Deploying a React app to Netlify With CLI

Using Netlify’s command line interface (CLI), you can deploy your React application directly from a terminal and can configure CI/CD on your github repository.

You need to create a Netlify account by going to the Netlify website and signing up for a new account. Click here to create your account if you do not have one.

I assume you already a project you want to deploy on netlify

Step 1: Install netlify

First, you need to install netlify globally using this command:

copy 
npm install netlify-cli -g

Step 2: Deploy a draft version of app

Now, run the command below to deploy your application. Make sure you are in the project’s working directory before deploying.

copy 
netlify deploy

You might be prompted to grant access to netlify cli, kindly authorize the action. After you grant the permission, you’ll see a successful login message in the terminal.

Follow the prompts and provide the name of the team account which you gave when signing up, then choose whether to link the app’s directory to an existing website or to create and configure a new one. Finish by providing a custom website name and your build folder as Publish directory.

With this your site will be published and you will be provided with a draft URL.

copy 
Deploying to draft URL...
✔ Finished hashing 19 files
✔ CDN requesting 10 files
✔ Finished uploading 10 assets
✔ Draft deploy is live!

Logs: https://app.netlify.com/sites/tech-coach-5c60a3/deploys/6b2144c3ab93cabb238eab43a 
Website Draft URL: https://6b2144c3ab93cabb238eab43a--tech-coach-5c60a3.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod

Step 3: Deploy live version of your app

Finally, run the command below to deploy your application to production:

copy 
netlify deploy --prod

It will ask for the Publish directory one final time. Type build and hit Enter. You’ll be provided with two URLs.

copy 
Unique Deploy URL: https://6b2144c3ab93cabb238eab43a--tech-coach-5c60a3.netlify.app
Website URL:       https://tech-coach-5c60a3.netlify.app

The Unique Deploy URL points to a specific version of your application while Website URL is the main URL, which corresponds to the latest version of your application.

That's it! Your React app is now live on Netlify. You can share the URL with others to showcase your development skills and add it to your portfolio.

4. Deploy to Surge

Unlike other CLI's, Surge is easy to deploy with less configuration and allows you to create your surge account right from your terminal, isn't that interesting?

Step 1: Install Surge

First, you need to install Surge globally on your system by running the following command in your terminal or command prompt:

copy 
npm install -g surge

This will install Surge globally on your system.

Step 2: Build your React app

Next, you need to build your React app by running the following command in your terminal or command prompt:

copy 
npm run build

This command will create a production-ready version of your app in the build/ folder.

Step 3: Deploy your app to Surge

To deploy your React app to Surge, navigate to the build/ folder in your terminal or command prompt and run the following command:

copy 
surge

This command will prompt you to enter your email and password to authenticate your account with Surge. Once you have logged in, Surge will ask you to provide a name for your app and deploy it.

Once the deployment is complete, you can view your deployed app by visiting the URL provided by Surge. Your app should be live and accessible at this URL.

5. Deploy to AWS Amplify using CLI

In this tutorial you'll learn how to deploy a ReactJS app to AWS using Amplify Hosting.

Step 1: Install the Amplify CLI

If you haven't already, install and configure the latest version of the Amplify CLI, then you need to install the Amplify CLI globally on your system. You can do this by running the following command in your terminal or command prompt:

copy 
npm install -g @aws-amplify/cli

After installing cli, you need to configure the newly installed Amplify CLI by running this command:

copy 
amplify configure

This command will prompt you to configure various settings such as your AWS Region, username, accessKeyId etc. Kindly follow the prompt accordingly to configure your CLI.

Step 2: Initialize your Amplify project

Next, initialize a new Amplify project inside your project directory using this command:

copy 
amplify init

This command will initialize your Amplify project and prompt you to configure various settings such as your project name, default editor, and AWS region etc.

copy 
? Enter a name for the project reactamplified
The following configuration will be applied:

?Project information
| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

...

? Please choose the profile you want to use default

Step 3: Add hosting to your Amplify project

After initializing your project, you need to add hosting to your Amplify project by running the following command:

copy 
amplify add hosting

This command will prompt you to select the hosting service you want to use. Choose the "Hosting with Amplify Console" option and follow the on-screen prompts to configure your hosting settings.

Step 4: Deploy your app to Amplify

To deploy your React app to Amplify, run the following command in your terminal or command prompt:

copy 
amplify publish

This command will build your app and deploy it to Amplify. The deployment process may take a few minutes to complete. Congratulations, your app has now been successfully deployed! The URL for the app should be displayed in your terminal.

6. Deploy to Vercel

Deploying a React app to Vercel is a straightforward process that can be completed in just a few steps

Step 1: Create a Vercel account

First, you need to create a Vercel account if you don't already have one. Go to the Vercel website and follow the on-screen instructions to create your account.

Step 2: Connect your Git repository

Once you have created your Vercel account, navigate to the Vercel dashboard and click the "Import Project" button. Follow the on-screen prompts to connect your Git repository where your React app is stored.

Step 3: Configure build settings

Next, you need to configure the build settings for your app. Vercel should automatically detect your build settings, but you can also configure them manually. The build command should be set to npm run build, and the output directory should be set to build/.

Step 4: Deploy your app to Vercel

To deploy your React app to Vercel, click the "Deploy" button on the Vercel dashboard. This will start the deployment process, which may take a few minutes to complete.

Step 5: View your deployed app

Once the deployment is complete, you can view your deployed app by clicking the URL provided by Vercel. Your app should be live and accessible at this URL.

That's it! Your React app is now live on Vercel, and you can share the URL with others to showcase your development skills and add it to your portfolio.

Other platform worth checking out

There are other platforms you might also want to checkout that are suitable for hosting a react app and support a free tier as well.

• GitLab Pages
• Render

You can add your list to the comment section if there is any you think we can add to this list.

Conclusion

In conclusion, deploying a React app can be a daunting task for beginners, but it is an essential step in making your app available to the public. There are various free hosting platforms available, each with their own strengths and weaknesses.

While Netlify offers advanced features such as continuous deployment and serverless functions, AWS Amplify offers a wide range of services for hosting and managing your app and Vercel offers lightning-fast deployment and performance optimization, likewise do other platforms mentioned in this post.

Ultimately, the choice of hosting platform will depend on your individual needs and preferences. Whichever platform you choose, the deployment process can be made simpler by using the platform's CLI or GUI tools.

By deploying your React app to a hosting platform, you can showcase your development skills, share your app with others, and add it to your portfolio. So go ahead and deploy your app today, and take the first step towards becoming a successful React developer!