Create React App on Vercel

Create React App (CRA) is a development environment for building single-page applications with the React framework. It sets up and configures a new React project with the latest JavaScript features, and optimizes your app for production.

There are multiple ways to get started with CRA on Vercel:

• Choose a template from the Vercel templates marketplace
• If you already have a project with CRA, install Vercel CLI and run the vercel command from your project's root directory
• Clone one of our CRA example repos to your favorite git provider and deploy it on Vercel with the button below:

Deploy our CRA template, or view a live example.

DeployLive Example

Vercel deployments can integrate with your git provider to generate preview URLs for each pull request you make to your CRA project.

You can also use CRA in our Edge Runtime with our React on the Edge example project.

On Vercel, static files are replicated and deployed to every region in our global Edge Network after the first request. This ensures that static files are served from the closest location to the visitor, improving performance and reducing latency.

Static files are cached for up to 31 days. If a file is unchanged, it can persist across deployments, as their hash caches static files. However, the cache is effectively invalidated when you redeploy, so we always serve the latest version.

To summarize, using Static Files with CRA on Vercel:

When you deploy your CRA app to Vercel and connect your git repo, every pull request will generate a Preview Deployment.

Preview Deployments allow you to preview changes to your app in a live deployment. They are available by default for all projects, and are generated when you commit changes to a Git branch with an open pull request, or you create a deployment using Vercel CLI.

You can receive feedback on your Preview Deployments from Vercel Team members and people you share the Preview URL with via the comments feature.

Comments allow you to start discussion threads, share screenshots, send notifications, and more.

To summarize, Preview Deployments with CRA on Vercel:

Edge Functions are a fast, scalable solution for delivering dynamic content to users. By default, Edge Functions are deployed globally, and will be invoked in one of Vercel's datacenters near your site's visitors.

Edge Functions are ideal when you need to interact with data over the network as fast as possible, such as executing OAuth callbacks, responding to webhook requests, or interacting with an API that fails if a request is not completed within a short time limit.

You can't use Edge Functions with CRA without using our Build Output API, which we do not recommend. We recommend using Edge Functions with a framework such as Next.js, SvelteKit, Nuxt, or any of the popular frameworks we support.

If you are a framework builder, or you're interested in implementing our Build Output API spec, you can see an example of Edge Functions working in React with our React on the Edge example project.

To summarize, Edge Functions with CRA on Vercel:

Vercel's Analytics features enable you to visualize and monitor your application's performance over time. The Analytics tab in your project's dashboard offers detailed insights into your website's visitors, with metrics like top pages, top referrers, and user demographics.

To use Analytics, navigate to the Analytics tab of your project dashboard on Vercel and select Enable in the modal that appears.

To track visitors and page views, we recommend first installing our @vercel/analytics package.

You can then import the inject function from the package, which will add the tracking script to your app. This should only be called once in your app.

Add the following code to your main app file:

import { inject } from '@vercel/analytics';
 
inject();

Then, ensure you've enabled Analytics in your dashboard on Vercel. You should start seeing usage data in your Vercel dashboard.

To summarize, using Analytics with CRA on Vercel:

You can see data about your CRA project's Core Web Vitals performance in your dashboard on Vercel. Doing so will allow you to track your web application's loading speed, responsiveness, and visual stability so you can improve the overall user experience.

On Vercel, you can track your app's Core Web Vitals in your project's dashboard by enabling Analytics.

To summarize, using Web Vitals with CRA on Vercel:

Vercel's observability features help you monitor, analyze, and manage your projects. From your project's dashboard on Vercel, you can track website usage and performance, record team members' activities, and visualize real-time data from logs.

Activity Logs, which you can see in the Activity tab of your project dashboard, are available on all account plans. The following observability products are available for Enterprise teams:

• Monitoring: A query editor that allows you to visualize, explore, and monitor your usage and traffic
• Runtime Logs: An interface that allows you to search and filter logs from static requests and Serverless or Edge Function invocations
• Audit Logs: An interface that enables your team owners to track and analyze their team members' activity

For Pro (and Enterprise) accounts:

• Log Drains: Export your log data for better debugging and analyzing, either from the dashboard, or using one of our integrations
• OpenTelemetry (OTEL) collector: Send OTEL traces from your Serverless Functions to application performance monitoring (APM) vendors

To summarize, using Vercel's observability features with CRA enable you to:

See our Frameworks documentation page to learn about the benefits available to all frameworks when you deploy on Vercel.

Learn more about deploying CRA projects on Vercel with the following resources: