Here are a few of the common React-based frameworks you can deploy on Netlify:
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
# 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.
To get started, run the following in your terminal to create your project:
npx create-react-app my-app
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
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
In the directory for your project, run the following command to create a new Netlify site:
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.
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.
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
Did you find this doc useful?
Your feedback helps us improve our docs.