Skip to content
Last updated on March 6, 2023
13 min read

Create React App on Vercel

Learn how to use Vercel's features with Create React App

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:

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

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:

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

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

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:

main.ts

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:

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

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:

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

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:

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 via our integrations
Track and analyze team members' activity

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: