Deploying React App to Netlify

Murtuzaali Surti
Murtuzaali Surti

• 1 min read

🏷️ react

🏷️ netlify

Updated On

A react app is a single page application which means that there's only one document i.e. index.html file which is updated using javascript as per the requirement of the user.

Let's see you how you can deploy a react app on netlify from an existing git repository of yours.

Tutorial #

  • Create a netlify.toml file at the root of your react application and add the following rule to it.
  from = "/*"
  to = "/index.html"
  status = 200

The above rule is applicable if you have multiple routes and have used libraries like react-router in your project.

What we are doing here is that we are telling netlify to redirect all the routes to our index.html file with a status code of 200 because our application is built with react and it is a single page application. We already discussed what an SPA is at the very beginning of this tutorial.

  • Set up an account on netlify if you haven't already.

  • Go to the sites tab and add a new site.

  • Select import an existing project from the dropdown menu.

  • You will see a number of providers from which you can import your project.

    importing a project

    Importing an existing project

  • Authenticate and select a repository.

  • Modify the default deployment configuration as per your requirement.

    deployment configuration

    Deployment Config

  • If required, you can also add env variables.

  • Finally, click on deploy site and your site should be deployed.

Here's a blog post on how you can deploy an express app to vercel!

Adding Custom Anchors to Headings in Markdown - Eleventy


Minify JavaScript Using Terser