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.
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.
Login with your Firebase account or integrate it with your Google account.
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
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:
Run the below command to deploy your react app:
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 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:
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 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.
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.
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.
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.
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.
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:
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.
There are two ways to deploy React app on Netlify, you can do it either through Netlify dashboard or Netlify CLI.
You can deploy React app deploy to Netlify all at once using the drag and drop functionality.
Below steps will guide you to the command line prompts needed while deploying your application:
Note: Your site is automatically secured by Netlify over HTTPS.
To deploy React app on Cloudflare Pages, you can follow these steps:
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.
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:
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.
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:
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.
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:
Follow these steps to deploy React app to Heroku using CLI:
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.