11 ways to deploy React app for free

Deploying React, Vue.js, or Angular applications is different from deploying a website built using HTML, CSS, and Javascript. Hosting services have a decent affect on your websites performance, and that calls for a careful selection.

In this article we will walk you through some popular and free serverless hosting solutions to  deploy your React app. With these solutions you can go live in a jiffy, deploy updates on the fly, and even cut the cost.

Table of Contents

1. Firebase
2. Surge
3. Render
4. GitHub Pages
5. Vercel
6. GitLab Pages
7. Netlify
8. Cloudflare Pages
9. AWS Amplify
10. AWS S3
11. Platform.sh

Firebase

All types of application can be created and deployed using the Firebase hosting platform. Along with hosting services, Firebase provides real-time databases, user authentication, cloud firestore and even cloud functions.

To deploy react app to Firebase you can start by creating an account, just go to their website, go to the sidebar, choose hosting, and then select get started.

Now you are ready to create a project. Note, to create a Firebase Hosting, you need to create a Firebase project first.

You can manage, view, and deploy Firebase projects via Firebase CLI. Let’s see the steps to install it.

npm install -g firebase-tools

Login with your Firebase account or integrate it with your Google account.

firebase login

After logging in successfully, you need to change your to the project root directory. Now, you need to initialize a firebase project in your react app by running the following command in the the console

firebase init

You will now be prompted with options in the Firebase Command Line Interface (CLI) which will ask you to set up a Firebase feature for a specific folder. Press the space bar to select the desired features and then press 'Enter' to confirm.

By selecting the appropriate features, the user can set up Firebase for their project in a way that meets their specific needs and requirements.

As soon as you choose the hosting option. It will associate your project directory with a firebase project in order to use Firebase services.

Note: If you choose `Create a new project` then it will generate a unique project ID.

Now, you'll need to specify the directory that contains all the hosting assets to be uploaded with firebase deploy. However, this will be the public directory where you can publicly access all the files. At last, CLI will ask you if you want to configure your Firebase Hosting as a single-page app. Type 'Y' to configure a single-page app.

And it’s done, you just completed the firebase initialization, now we just need to run a few commands to make our react app functional. Run the below command to build your react app:

npm run build

Run the below command to deploy your react app:

firebase deploy

Your terminal will show the hosting link for the project; you can browse deployed site link to check whether or not your React app was successfully deployed.

Surge

Surge is a fast and simple static web publishing platform that allows users to easily deploy and host static websites and web applications. It provides developers with a fast and reliable way to share their web content with the world, without the need for complicated server setup or configuration.

Developers can quickly publish their static websites or web applications directly from their local development environment, using a simple command-line interface.

Follow these deployment steps:

• Create a react app named 'surge_file'.

npx create-react-app surge_file

• After you have created your React app, navigate to your project directory which you created above.

cd surge_file

• Install Surge by running the following command:

npm install --global surge

• Now, you just need to make a build folder which will basically narrow down to  HTML, CSS, and Javascript files to deploy the React app.

npm run build

• The above command will help you make your react app applicable for hosting and deployment. After you completed the build, execute the following command where it will give you a prompt asking you for the email and password.

surge

• Don’t forget to verify your surge account. After you have logged in, it will ask you the location of the build folder. Open the terminal in the build folder and hit enter. As soon as you hit enter, it will ask you for a domain name. Customize it accordingly and make sure it is available to host your application on that  URL.
• Now, click on the domain link to check out the working of your application.

project: C:\\zipy\\surge_file\\build\\
    domain: zipy-project.surge.sh

• Next, you will get a message for successfully publishing your website using surge.

Success! - Published to zipy-project.surge.sh

Render

Render is a cloud-based hosting platform that provides developers with a simple and scalable way to deploy and manage their web applications. It offers a range of hosting services, including web hosting, container hosting, and database hosting, all within a unified platform. Developers can quickly deploy their web applications and APIs from a variety of sources, including Git repositories, Docker containers, and static files through Render.

Render provides two methods for deployment. let’s walkthrough them..

Render Dashboard

Render Dashboard has an intuitive way for deploying, managing your services, databases, and other resources, as well as monitor their performance and usage. Follow these steps to deploy  React app.

• For every hosting service, you need to create an account and make sure your project is stored in a GitHub repository.
• On the dashboard, click 'New Static Site'.

• Connect any one of your version control app where your repository is stored to Render. After successfully connecting your project, give your web service a unique name. Using the bootstrapped technique, render will try to auto detect whether your application is bootstrapped or not.
• If your project repository is bootstrapped, it will begin loading your application onto a machine using a smaller initial program to load in the required setup.

• Now, you just need to click on 'Create Web Service' referred as 'Create Static Site' which will start deploying your site.

• That's it! Your React app should now be deployed and accessible via the web.

GitHub Pages

GitHub Pages is static website hosting service which takes your react app straight from a repository on GitHub. You can use different GitHub actions to establish continuous integration and delivery, automate deployments, and do a lot more.. It allows you to create a website out of your GitHub repository to display your projects, portfolio, documentation, and other projects.

To deploy react app to github pages, you first need to register for a GitHub account and start an application repository. A repository URL and Git URL will be created.

• Use these commands in the project root to set up your local directory as a Git repository, commit all code changes, and push your project to a remote location.

git init
git add
git commit -m "my first commit"
git remote add origin
git push -u origin master

• You need to add a homepage field to your project’s package.json file by using the below code.  Here 'your_username' mentions your GitHub username and zipy-app is the repository name.

"homepage" : "https://your_username.github.io/zipy-app"

• Now, you need to install 'gh-pages' in your application.

npm install --save gh-pages

• Just add the following scripts before deploying your application

"scripts": {
+  "predeploy": "npm run build",
+  "deploy": "gh-pages -d build",
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test":  "react-scripts test",
   "eject": "react-scripts eject"
}

• You can see the two terms pre-deploy and deploy added to the scripts where pre-deploy automatically runs before deploy to make sure the latest build of application is deployed.
• Next, deploy your application using this command.

npm run deploy

Vercel

Vercel is a cloud-based platform for creating and delivering web apps. What makes Vercel so good, is its focus on serverless architectures, support for web frameworks and programming languages including React, Angular, Vue, Next.js, and the easy of importing projects from GitLab or Bitbucket.

To get started with Vercel, all you have to do is create your account with an OAuth login with your favorite version control tool.

There are two ways to deploy React application using Vercel - use the dashboard or Vercel CLI. Now, let’s go through both the methods one by one.

Vercel dashboard

After completing your account creation process, the next step is to integrate with GitHub, GitLab, or Bitbucket. To create your React app into Vercel, click 'Create a New Project'.

Integrate with any of the given version tools like GitHub, GitLab, BitBucket importing your projects from GitHub, GitLab and BitBucket is the same. For now, let’s go through the steps for importing your Git repository to Vercel.

Now that Vercel and GitHub are linked, choose Import Project from GitHub. Click Import after selecting the project you want to deploy and give it a name. Provide the root directory in a similar manner, then click 'Continue'.

Vercel will automatically identify your react app as bootstrapped if it has been initialized and load the appropriate settings. If it is not initialized, you’ll have to manually enter each field's configuration information before you click 'Deploy' button.

That’s it. Your React app is deployed.

Vercel CLI

The command-line interface tool for Vercel, allows developers to deploy and manage their web projects in a fast and efficient manner. Let’s look at the below steps to deploy our React app using Vercel CLI.

• Install Vercel globally by running either of the following commands, depending on your package manager:

npm i -g vercel
// or
yarn global add vercel

• Log in to your Vercel account using the following command:

vercel login

• Enter the email address associated with your Vercel account when prompted, and then verify your login by following the instructions sent to your email.
• Navigate to your project's root directory in your terminal and deploy your project by running the following command:

vercel

• Answer the prompts that appear in the terminal, starting with confirming that you want to set up and deploy the project.

? Set up and deploy “path to your project”? [Y/N] Y

• When prompted for which account to deploy the app to, hit Enter to choose the default option. When asked whether to link to an existing project, enter 'N'.
• Next, enter your project's name and specify the directory in which your code is located.

? What’s your project’s name? zipy-vercel
? In which directory is your code located? ./

• If your project was initialized using Create React App, Vercel will auto-detect the project settings and configure them accordingly. Otherwise, it will ask you to set them manually. If asked to override the settings, enter 'N'.
• Your project will now be deployed to Vercel, and you'll receive a URL where you can view it.

GitLab Pages

GitLab Pages is a free and fully integrated web hosting service provided by GitLab. It allows users to easily host static websites, documentation, and other content on their own custom domains or on GitLab's default domain.

With GitLab Pages, users can create and publish websites directly from their GitLab repositories, without the need for any additional web hosting services or infrastructure.

Follow these steps to deploy your React app:

• Create your GitLab account and choose the following options to add your react app.

• If you have an existing project present on GitHub, then select Import project or select Create blank project. Assign a name to your project and click 'Create project' button.

• After you create a project, there will be various command which will allow you to add your react project. Start with initializing your local directory as a git repository and follow the below commands to push it to remote.

git init
git remote add origin git@gitlab.com:<Anomwarbhuvan/zipy>.git
git add .
git commit -m "zipy-gitlab-initial"
git push -u origin master

• You can edit the <username/project-name> according to your preference. Here, we have used '<Anomwarbhuvan/zipy-gitlab>' as an example in the above code.
• Add a homepage field to your project’s package.json file. Create a '.gitlab-ci-yml' file and add the below code to it.

image: node:10 # changing to match your node version
pages:
  stage: deploy
  script:
    - npm run build
    - rm -rf public
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

• Commit this file to start a pipeline under the continuous integration and continuous deployment tab. It will help you to deploy React app to GitLab Pages. Once the status for your pipeline is updated to 'Passed', it may take about 30-40 minutes for your site to be available on Gitlab.

• Visit the URL which you mentioned in the homepage field in package.json to check your app.

Netlify

Netlify, the well-known service for web deployment. It is great for administering, automating, and building your website. You may import your projects from GitHub, GitLab, and Bitbucket with this tool. It is among the quickest deployment services out there.

Your React application cannot produce all production-ready files without the build command. Use this command before executing any other commands in order to deploy the most recent build.

npm run build

There are two ways to deploy React app on Netlify, you can do it either through Netlify dashboard or Netlify CLI.

Netlify dashboard

You can deploy React app deploy to Netlify all at once using the drag and drop functionality.

• You can now establish a connection with any of the Git version control tools that are listed below.

• Choose the repository you wish to attach to your react app on Netlify by establishing a connection with project of your choice.

• Choose the project to set up for site builds and deployment. To launch your app, click 'Deploy site' button.

Netlify CLI

You can use Netlify CLI to run a local development server that you can share with others, run a local build and plugins, and deploy react app.

• Install the CLI using this command

npm install netlify-cli -g

• Deploy your application by running this command.

netlify deploy

• You will get a request for authorization to use the Netlify CLI. After successful authorization, you’ll see a successful login message in the terminal.

Below steps will guide you to the command line prompts needed while deploying your application:

1. Once Netlify is installed, you’ll get a prompt asking you to link this directory to an existing site or create a new one.  Select 'Create & configure a new site'.
2. You will then be asked to select the Team ,your account name is picked as the default team name. You can edit it you want.
3. Netlify randomly generates site names which are unique but can be changed later. The prompt for Site name is optional.
4. You now have to specify your projects build directory where all the productions-files and assets are ready for deployment. Just type build and enter.
5. After you give the deploy path, you will get a draft URL for your react application which you can view in by pasting the URL in any browser.
6. To make your app live, run 'netlify deploy --prod'.
7. Verify the deploy path for the build once again. This will generate two URLs. First one will be a Unique Deploy URL for individual deployment and second one is a Live URL to display your latest deployment.
8. Every time you make an update on your website and deploy it, you’re going to get a unique URL for that deployment.

Note: Your site is automatically secured by Netlify over HTTPS.

Cloudflare Pages

Cloudflare Pages is a web development architecture based on Javascript, APIs, and Markup (JAM). It's a great platform for frontend developers to collaborate and deploy websites. This app comes with automatic SSL encryption for all sites and ensures the security of your sites. Not just this, it acts as a visual editor for building static websites and supports popular frameworks like React and Vue.js.

To deploy React app on Cloudflare Pages, you can follow these steps:

Step 1: Create new project

• Create a Cloudflare account and log into it. After logging, you will will be directed to the Cloudflare Pages dashboard where you need to click on 'Connect to Git' button to connect where repository is stored.

• Now, select a repository and set up builds and deployments by clicking on 'Begin Setup'.

Configuration options and values are given below:
Production branch - main
Build command - npm run build
Build directory - build

Step 2: Configure project settings

Configure the build directory for your react app and it should match the directory of your compiled react app location. Add necessary environment variables for your react app in the 'Environment Variables' tab.

Step 3: Deploy

• Click 'Deploy Site' to deploy your application to Cloudflare Pages.
• After the deployment process gets complete click on the 'Visit Site' button to check for working of your react app.

AWS Amplify

AWS Amplify is a powerful cloud-based development platform that provides developers with a comprehensive set of tools and services to build scalable and secure cloud-powered applications.. With Amplify, developers can quickly and easily create mobile and web applications that leverage the power of AWS services, such as Lambda, API Gateway, S3, and many more.

You can deploy React app using these steps:

• To get started with AWS Amplify, all you have to do is log into your AWS console.
• After logging in, you can now connect your source code from the given tools. For now, we will choose GitHub repository to host our React app in minutes.

• Once you have connected to any of the above version tools, you need to import a repository for deployment in the Add repository branch.

• Ensure your build commands 'baseDirectory' is changed to 'dist'.

• Next, do a final review and save the app settings and click 'Save and deploy' button.

• After your deployment process gets completed, visit the deployed URL and check your website hosted with Amplify.

AWS S3

AWS S3 (Simple Storage Service) is a highly scalable and secure cloud-based object storage service offered by Amazon Web Services (AWS). It is designed to provide developers with a simple and cost-effective way to store and retrieve any amount of data, anywhere on the internet. S3 offers a variety of security features, including encryption, access controls, and logging, to ensure that data is stored and accessed securely

Note: Make sure you have an AWS account if not create one at AWS homepage.

To deploy react app to AWS S3 you need to follow these 3 steps.

Step 1: Setup AWS S3

• Open Amazon console and click on 'Create Bucket' button.

• Now, you will need to fill up the general configuration such as Bucket name (ex: zipy-react-app and AWS region. Uncheck all the public access and acknowledge that you have read the policy before you finally click on 'Create Bucket'. Open the Bucket which you created in the above step and go to the permissions tab.

• There is Edit Bucket Policy under the permissions tab which provides access to the objects, paste the following code in policy editor.

{
    "Version": "<<latest_version>>",
    "Statement": [
        {
            "Sid": "Addfile",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<<Enter Your Bucket Name>>/*"
        }
    ]
}

• In the Properties tab enable static website hosting, paste index.html in Index document and Error document. After you save the changes, you will find the website endpoint in the static website hosting tab. Copy the URL and save it for later. It will prepare a setup for AWS S3 in your browser.

Step 2: Create React App

• Now,  initialize your react app using “create-react-app” and run the basic react app template by npm start. Generate your build folder using npm run build to create a production build for your react app.

Step 3: Upload objects on AWS S3

• In the objects tab start uploading all files and folder to the S3 console.

• After you have added all the files and folders in the Objects tab click on the “Upload” button on the S3 console.

• Whenever the upload process finishes, open website endpoint in the browser. Now, you can see your website is deployed on S3.

Platform.sh

Platform.sh is a cloud hosting platform which provides a container-based application hosting service. Developers can easily build, deploy and run their application in the cloud with it. It creates development environments that closely resembles the production environments. So that you can easily test your application in a staging environment before pushing them in production.

Platform.sh offers a 30-day free trial, which you can use to test the platform. You can deploy your React app by following these steps:

• Click on the Free trial button and you’ll be directed to the signup page. Set up your account and connect with GitHub where your repository is stored.
• After successfully connecting your GitHub account, click on “Create Project” button on the dashboard.

• Now, Click on 'Create from scratch' or 'Use a template' button depending on your project requirements.

• After you have completed the project, go to the top-right corner in your project dashboard and just copy-paste the generated git repository URL to deploy your project.

You can also consider Heroku

Heroku is a popular platform-as-a-service (PaaS) that allows developers to easily deploy and manage their applications without worrying about server infrastructure. Its popularity stems from its simplicity, scalability, and compatibility with multiple programming languages. While it has become a paid service, the convenience and efficiency it provides makes it a great choice for developers to try it. Let's look at two of the most common deployment process of Heroku.

Heroku Dashboard

Deployment using Heroku dashboard is very easy, you just need to have your project stored in the GitHub repository. To deploy on Heroku follow these steps:

• Go to Heroku dashboard and click 'New' at the top right corner. As soon as the dropdown opens, click 'Create new app'.

• After creating the app, you will get a prompt to specify the project name. Type a name  and click and 'Create app'.
• Now, you’ll be able to sync your GitHub repository. Click on 'Connect to GitHub' option on Heroku and select the project from your list of repositories.

• You can either deploy your project manually or automatically whenever you push your changes to GitHub. Let’s go through the steps for manual deployment. Click 'Deploy Branch' under Manual Deploy and your app will start deploying once the build process is complete.

Heroku CLI

Follow these steps to deploy React app to Heroku using CLI:

• Create a free account on Heroku and install 'heroku-cli' globally using this command.

npm install -g heroku

• Log into 'heroku-cli'

heroku login

• After you have logged into Heroku, start initializing your repository and use Heroku Buildpack to create a react app. Use these commands to deploy React app in the terminal.

git init
heroku create -b <https://github.com/Anomwarbhuvan/Buy-2-Wear-React-Website>
git add .
git commit -m "deploy-react-app-for-free-using-heroku"
git push heroku master
heroku open

Conclusion

The option to deploy React app for free are many, from the tried-and-tested methods like deploying on Netlify and Render, to the newer players like Vercel and AWS Amplify.

Whether you're looking for ease of use, flexibility, or scalability, you can find the right solution for your project. So why not give it a try? With the above options to choose from, you're sure to find a free deployment method that works for you. No need to make any financial commitment you just have the right tools and best practices to deploy your React app for free.

Happy coding!