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:

• 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

• Or, choose a template from Vercel's marketplace:

  Get started in minutes

  Deploy a new CRA project with a template

  View All Templates

  View All Templates

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:

• Automatically optimizes and caches assets for the best performance
• Makes files easily accessible through the public folder
• Supports zero-downtime rollouts
• Requires no additional services needed to procure or set up

Learn more about Static Files Caching

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 use the comments feature to receive feedback on your Preview Deployments from Vercel Team members and people you share the Preview URL with.

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

To summarize, Preview Deployments with CRA on Vercel:

• Enable you to share previews of pull request changes in a live environment
• Come with a comment feature for improved collaboration and feedback
• Experience changes to your product without merging them to your deployment branch

Learn more about Preview Deployments

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:

• Enable you to respond to user requests with dynamic content at low latency, at scale
• Offer cost savings by using fewer resources than Serverless Functions
• Can execute in the region nearest to your users or nearest to data sources they depend on, based on your configuration
• Have access to the geolocation and IP address of visitors, enabling location-based personalization

Learn more about Edge Functions

Vercel's Web 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 Web 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 Web Analytics in your dashboard on Vercel. You should start seeing usage data in your Vercel dashboard.

To summarize, using Web Analytics with CRA on Vercel:

• Enables you to track traffic and see your top-performing pages
• Offers you detailed breakdowns of visitor demographics, including their OS, browser, geolocation and more

Learn more about Web Analytics

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 Speed Insights.

To summarize, using Speed Insights with CRA on Vercel:

• Enables you to track traffic performance metrics, such as First Contentful Paint, or First Input Delay
• Enables you to view performance analytics by page name and URL for more granular analysis
• Shows you a score for your app's performance on each recorded metric, which you can use to track improvements or regressions

Learn more about Speed Insights

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:

• Visualize website usage data, performance metrics, and logs
• Search and filter logs for static, Serverless, and Edge Function requests
• Use queries to see in-depth information about your website's usage and traffic
• Send your metrics and data to other observability services through our integrations
• Track and analyze team members' activity

Learn more about Observability

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: