React on Netlify

React is a JavaScript library for building user interfaces (UI). It allows you to create reusable UI components and manage the state of an application. React uses a declarative approach to building UIs and is widely used especially for single-page applications.

Here are a few of the common React-based frameworks you can deploy on Netlify:

• Gatsby
• Next.js
• React Router
• Remix

You can also use Create React App. Create React App is ideal for quickly getting started building a React application, especially if you want to focus on learning the basics of React. Below, learn about deploying projects built with Create React App on Netlify.

Create React App

Create React App is a command line tool that generates a boilerplate React single-page application (SPA) with a pre-configured build pipeline. It simplifies the complexity of setting up a React project, allowing you to focus on building out the app itself.

Netlify integration

When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Create React App, Netlify provides a suggested build command and publish directory: react-scripts build and build. If you’re using the Netlify CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: react-scripts start and 3000. You can override suggested values or set them in a configuration file instead, but automatic framework detection may help simplify the process of setting up a project with Create React App on Netlify.

For manual configuration, check out the typical build settings for Create React App.

Environment variables

Environment variables prefixed with REACT_APP_ are processed and made available in the browser for client-side JavaScript access. For more information on how to use environment variables in React, check out the Environment variables and frameworks doc.

Deploy a Create React App site on Netlify

This section demonstrates how to deploy a Create React App site on Netlify. It covers:

• Starting a new project using Create React App
• Deploying your Create React App project to Netlify with Netlify CLI

Start a new project using Create React App

Before you begin, make sure you have Node.js version 18.14.0 or later installed on your machine. Then, you can start a new project using Create React App.

1. To get started, run the following in your terminal to create your project:

   npx create-react-app my-app

2. To navigate to your project directory and start your development server:

   cd my-app
   npm start

From here you can customize your site. You can also create a Git repository for your site to take advantage of continuous deployment.

Avoid 404s for SPAs

If your project is a single page app (SPA) that uses the history pushState method to get clean URLs, you must add a rewrite rule to serve the index.html file no matter what URL the browser requests.

Deploy your Create React App project with Netlify CLI

You can deploy your project from the command line using Netlify CLI.

1. To ensure you have the latest version of Netlify CLI installed, run this command from any directory in your terminal:

   npm install netlify-cli -g

2. In the directory for your project, run the following command to create a new Netlify site:

   netlify init

Didn’t initialize a Git repository?

When you run netlify init without initializing a Git repository first, the CLI prompts you to connect your local directory to GitHub. Follow the steps in your terminal to link your local directory with a remote repo in order to use continuous deployment for your site.

3. Follow the prompts to create your site, select a team if necessary, and optionally create a site name. If you already initialized a Git repository, you can authorize your Git provider and set your build command and directory.

4. If you used continuous deployment, your site is now published! To learn how to manually deploy a site, check out the manual deploy docs.

More resources

• Typical Create React App build settings
• Deploy React apps in less than 30 seconds
• React documentation
• Create React App documentation