Deploying React App to Netlify

Murtuzaali Surti - Jul 25 '22 - - Dev Community

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

In this tutorial, I am going to show 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 rool of your react app and add the following rule to it.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
Enter fullscreen mode Exit fullscreen mode

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

Basically what we are doing here is 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.

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

  • Authenticate and select a repository.
  • Modify the default deployment configuration as per your requirement.

deployment configuration

  • If required, you can also add env variables.
  • Finally, click on deploy site and your site should be deployed.

That's all for now. Signing off.

This post was originally published in Syntackle.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .