8 Free Internet hosting Companies for Your React App

Wanna launch your React app quick and simple, with the choice to scale? These serverless internet hosting options may also help you go reside in a jiffy, deploy updates on a dime, and slash the price of delivering your app to customers.

So that you constructed a React app, however you’re undecided how or the place to host it. On this article, we’ll stroll you thru 8 free React app internet hosting companies, present you the way we deployed this React app utilizing each, and inform you what we discovered within the course of.

We constructed our app in Figma utilizing the Anima plugin, which allowed us so as to add performance, insert reside, customizable React parts from Recharts and AntDesign, and export dev-ready React code for the whole UI. It took us a day to construct.

Learn the way we constructed our React banking app (and linked our personal knowledge utilizing Strapi’s headless CMS) right here.

The place to host your React app without spending a dime

There are a rising variety of serverless internet hosting options on the market because of the rise of component-based frameworks like React. Amazon AWS, Microsoft Azure, and Google Cloud are at the moment the dominant platforms. Nonetheless, there’s a rising shift in the direction of devoted frontend internet hosting companies that require much less effort, and may get you up and working very quickly—and most embody CI/CD. Listed here are the 8 free React app internet hosting companies we examined:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub Pages

6. GitLab Pages

7. Render

8. Surge

Let’s dive into these free React app internet hosting companies in additional element, and display how we deployed a React app utilizing each.

Netlify

Background

Netlify was based in 2014 and it centered from the beginning on internet hosting static web sites. It attracted numerous builders due to its beneficiant free tier. A few years down the road, Netlify grew to be one of the vital widespread JAMstack and static web site hosts round.

Tips on how to use

1. Ideally, you’ll register or sign up with GitHub. This makes positive you’ll be able to entry the repositories in your profile and deploy them rapidly.
2. As soon as logged in, click on “Add new website” and select “Import an present undertaking.”
   
   
   
3. Then click on GitHub as your supplier.
   
   
   
4. Choose the “bank-website” or no matter your undertaking title is.
   
   
   
5. Superb-tune the deployment settings (within the case of our web site, the defaults work completely), then click on “Deploy website.”
   
   
   
6. As soon as deployed, you’ll be able to view it on a public URL which you’ll share with the world. Yay!
   
   
   

Right here’s the reside app deployed on Netlify.

Execs and cons

Netlify is simple to arrange and deploy, to not point out that is among the quickest companies we examined right here. One draw back is that if you happen to want collaborators and/or a group, you should improve to a paid plan.

Vercel

Background

Vercel (initially often known as Zeit) was based in 2015 and rapidly rose to fame. They’re the maintainers of Subsequent.js, a preferred React framework for constructing web sites. They provide a free tier to non-commercial web sites, in addition to methods to make use of their Edge community for serverless capabilities.

Tips on how to use

1. Sign up or register with GitHub.
   
   
   

2. Click on on the “Add New…” dropdown and choose “Venture.” 
   
   
   

3. Select the “bank-website” or your favourite React undertaking.
   
   
   

4. We went with the defaults for deployment settings after which clicked “Deploy.”
   
   
   

5. After a while, we obtained the web site deployed.
   
   
   

Right here’s the reside URL.

Execs and cons

Vercel wants a while to cache the set up a part of the deployment course of, however after that, it is among the quickest companies. It exhibits preview deploys for each department you push and it does it rapidly due to caching.

AWS Amplify

Background

AWS is a large assortment of cloud merchandise, and Amplify is marketed as a simple technique to come up with a few of them. With AWS Amplify, you’ll be able to rapidly construct, ship, and host full-stack purposes on AWS, with the pliability to leverage the breadth of AWS companies as use circumstances evolve.

Tips on how to use

1. Join or log into AWS, then seek for AWS Amplify and click on “Get Began.”
2. Select GitHub and authorize it (I solely allowed it for the “bank-website” repo).
   
   
   
3. Choose the repo within the “Not too long ago up to date repositories” part.
   
   
   
   3.1. Within the construct setting, we’ll have to vary the baseDirectory for our app to be dist like so:
   
   
   
   Then, the construct settings ought to appear to be this:
   
   
   
4. Within the subsequent step, click on “Save and deploy.”
   
   
   
5. After a while, the web site will likely be deployed and able to use.
   
   
   

And we’re reside! Right here’s the URL.

Execs and cons

It’s important to edit the baseDirectory within the deployment specification—it’s not acknowledged out of the field. The UI feels a bit clunky, however it is a private desire. There’s a enormous potential for AWS Amplify as a result of numerous different AWS net companies are inside arm’s attain.

Firebase

Background

Firebase is a Google service that’s greatest often known as a real-time storage platform. However it additionally has a internet hosting choice for static web sites and Specific.js microservices or APIs, and helps preview URLs for branches your group is engaged on. As with Netlify, Vercel, and others, it serves the deployed content material over a CDN community.

Tips on how to use

1. Set up firebase-tools with npm set up -g firebase-tools.
2. Log into Firebase with firebase login. When you log in, you must see a message like this one:
   
   
   
3. Transfer into the undertaking listing and run firebase init, you must see one thing like this:

$ firebase init

     
     
     
     
     

You are about to initialize a Firebase undertaking in this listing:

  /Customers/nikola/Paperwork/playground/bank-website

? Which Firebase options do you need to set up for this listing? Press Area to choose options, then Enter to substantiate your selections. (Press <area> to pick, <a> to toggle all, <i> to invert choice, and <enter> to proceed)

 ◯ Realtime Database: Configure a safety guidelines file for Realtime Database and (optionally) provision default occasion
 ◯ Firestore: Configure safety guidelines and indexes information for Firestore
 ◯ Capabilities: Configure a Cloud Capabilities listing and its information
❯◯ Internet hosting: Configure information for Firebase Internet hosting and (optionally) set up GitHub Motion deploys
 ◯ Internet hosting: Arrange GitHub Motion deploys
 ◯ Storage: Configure a safety guidelines file for Cloud Storage
 ◯ Emulators: Arrange native emulators for Firebase merchandise

(Transfer up and all the way down to reveal extra selections)

Select the choice to configure information for Firebase Internet hosting with non-compulsory GitHub Motion deploys. Then, you’ll be able to create a undertaking straight from the CLI or use Firebase UI to do it and later join it. We created the undertaking from the command line, and that is how we answered the ensuing questions:

? What do you need to use as your public listing? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Sure
? Arrange computerized builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No

After that, easy firebase.json and .firebaserc information will likely be created.

4. Then, run firebase deploy to really deploy the information from the dist listing. If the listing is lacking, be sure that to run npm run construct first to generate information. The firebase deploy command ought to generate output just like the instance under:

=== Deploying to 'bank-website-6678'...

i  deploying internet hosting
i  internet hosting[bank-website-6678]: starting deploy...
i  internet hosting[bank-website-6678]: discovered 10 information in dist
✔  internet hosting[bank-website-6678]: file add full
i  internet hosting[bank-website-6678]: finalizing model...
✔  internet hosting[bank-website-6678]: model finalized
i  internet hosting[bank-website-6678]: releasing new model...
✔  internet hosting[bank-website-6678]: launch full

✔  Deploy full!

Venture Console: https://console.firebase.google.com/undertaking/bank-website-6678/overview
Internet hosting URL: https://bank-website-6678.net.app

Now you’ll be able to view the web site on the URL supplied. Yay!

Execs and cons

Firebase is pretty easy, however if you arrange it up inside your undertaking, the questions that you must reply are a bit complicated. Fortunately, we answered them for you within the part above, however they require an understanding of the particular Firebase options earlier than continuing. Apart from that, Firebase is fast to deploy and may generate a URL the place you’ll be able to preview the deployed information. You may also simply automate it with GitHub Motion deployments with the CLI, which is neat.

GitHub Pages

Background

GitHub Pages has been round for fairly a while and it’s a simple technique to publish docs or a private web site instantly from GitHub. It’s beautiful for static content material and numerous of us use it to deploy easy websites with minimal funding. It’s free to make use of in case your undertaking is public and is a quick and low-cost technique to host an internet site.

Tips on how to use

Please notice you must edit the App.jsx the place we name Router and add basename to it to match the repo title. So that is how App.jsx ought to look:

import "./App.css"
import React from "react"
import { Swap, BrowserRouter as Router, Route } from "react-router-dom"
import SVBHome from "./parts/SVBHome"

perform App() svb-home)">
          <SVBHome />
        </Route>
      </Swap>
    </Router>
  )


export default App

We’ve to vary the basename as a result of GitHub pages will deploy the web site to a URL of this manner https://GITHUB_USERNAME.gitlab.io/REPO_NAME. The web site received’t perform correctly with out the basename set for the react-router-dom.

1. After the code modifications, we have to set up gh-pages package deal with:

npm set up --save gh-pages

2. And, add a predeploy and a deploy script to package deal.json:

{
  
  "scripts": {
    "begin": "parcel index.html",
    "construct": "parcel construct index.html --public-url ./",
    "predeploy": "npm run construct",
    "deploy": "gh-pages -d dist"
  }
  
}

3. Then, we merely run npm run deploy. It’ll set off npm run construct and it’ll use gh-pages to publish the contents of dist to a separate department on GitHub known as gh-pages.

4. Lastly, verify whether or not the gh-pages is used for GitHub Pages like under:
   
   
   

Right here’s the reside URL.

Execs and cons

In case you’re deploying a undertaking that differs out of your username, it will likely be deployed inside a subdirectory on our free area withing GitHub. Then, that you must write further code to assist the logic of being inside a subdirectory.

It doesn’t assist steady deployment out-of-the-box in our use case, however you’ll be able to set it up. As soon as arrange, it’s fast to deploy modifications.

GitLab Pages

Background

Like GitHub, GitLab has its personal internet hosting resolution, they usually name it GitLab Pages. I’ve to present it to them, it’s simpler to arrange a steady deployment to GitLab Pages than it’s for GitHub Pages.

Tips on how to use

1. Join or log into GitLab
2. Add a repo to GitLab if you happen to don’t have it there already. You’ll be able to fork the one I added there 
   Just like GitHub Pages, you must edit the App.jsx the place we name Router and add basename to it to match the repo title. So that is the ultimate change:

import "./App.css"
import React from "react"
import { Swap, BrowserRouter as Router, Route } from "react-router-dom"
import SVBHome from "./parts/SVBHome"

perform App() svb-home)">
          <SVBHome />
        </Route>
      </Swap>
    </Router>
  )


export default App

We’ve to vary the basename as a result of GitLab pages will deploy the web site to a URL of this manner: https://gitlab-pages_USERNAME.gitlab.io/REPOSITORY_NAME. The web site received’t perform correctly with out the basename set for the react-router-dom.

3. When you’ve edited and pushed the undertaking to GitLab, go to Settings > Pages and you can be greeted with a four-step wizard to deploy the repo to GitLab Pages.
   
   
   

4. Step one within the wizard is to enter the construct picture. We’ll use the Node.js LTS.
   
   
   

5. Subsequent, we’ll enter the pre-build command. The npm ci will suffice right here.
   
   
   

6. Now for the construct step. We have to go — –dist-dir public as a result of GitLab Pages anticipate to have the web site constructed within the public listing. You’ll be able to’t get away with some other listing, sorry.
   
   
   

7. Commit the newly generated .gitlab-ci.yml file that tells GitLab the way to deploy your web site.
   
   
   

8. Now, go to CI/CD -> Pipelines part of the repo and observe the newly added pipeline performing.
   
   
   

9. After a while, the pipeline job will end and the web site will likely be deployed on GitLab Pages.

Right here’s the outcome.

Execs and cons

Packages are sluggish to put in and that you must add further code to get it working, however the wizard is tremendous intuitive with solely 4 steps to deploy.

Render

Background

Render is a brand new child on the block being launched in 2019. It’s attempting to disrupt the best way of us deploy their companies (together with static web sites). Up to now, they’re doing tremendous and are rising in numbers.

Tips on how to use

1. Join or log in to Render.
2. Create a brand new static web site by urgent the “New” button and deciding on “Static Website.”
   
   
   
3. Select the repo you need to deploy.
   
   
   
4. Hold the yarn; yarn construct construct command within the construct setting. Sadly, it doesn’t work with npm ci; npm run construct like different companies do. Change the “Publish listing” to dist and click on “Create Static Website.”
   
   
   
5. After a while, Render will deploy the code.
   
   
   

Right here’s the reside URL from Render.

Execs and cons

It’s actually quick, nevertheless it doesn’t work properly for our undertaking with npm ci and npm run construct instructions. Solely yarn appears to work.

Surge

Background

Surge has been round for a while now. Proper of the bat, their service is straightforward to make use of and it solely takes one or two instructions to deploy your static web site. It’s free, however affords a paid plan of 30$/month. The stoicism of the device is what makes it shine. No complicated setup is required, simply set up surge and run it with surge.

Tips on how to use

1. To arrange, run npm run construct to generate static information inside dist listing. The surge will use these for deployment.
2. Run npm set up –international surge
3. Then, run surge.

Just a few issues to notice:
If it’s your first time working it, you’ll must create an account with Surge. Don’t fear, it’s straightforward. Simply enter your electronic mail and desired password.

Then, you’ll get requested to enter “undertaking”, which needs to be the trail to the dist listing. You’ll be able to simply append dist to the trail you’re given if you happen to ran surge contained in the repo you’re deploying.

Then, enter the long run URL of your web site. Strive one thing distinctive as a result of what surge provided didn’t work for me.

After the URL enter, the surge will deploy contents from dist over to the desired URL. Right here’s what I obtained:

$ surge

   Operating as [email protected] (Scholar)

        undertaking: .../bank-website/dist
         area: bank-website-tryout.surge.sh
         add: [====================] 100% eta: 0.0s (12 information, 14600007 bytes)
            CDN: [====================] 100%
     encryption: *.surge.sh, surge.sh (143 days)
             IP: 138.197.235.123

   Success! - Revealed to bank-website-tryout.surge.sh

Execs and cons

It’s quick and easy and doesn’t require you to undertake a separate interface—nevertheless it fails to counsel an accessible URL in your app.

Time to deploy for every internet hosting service

Our favourite free React app internet hosting companies

1. Netlify
2. Vercel
3. Surge

Key takeaways

After testing every of those free React app internet hosting companies, we predict Netlify is the most effective of the bunch. It offers fast deployments with a lot of options you may want. Proper after that’s Vercel which has a lot of options and is pretty fast after the preliminary deployment. Then, we’ve Surge which is a minimal deployment device that may be pretty low-cost if you happen to resolve to improve.