Create React App on Edgenivo
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.
To get started with CRA on Edgenivo:
- If you already have a project with CRA, install Edgenivo CLI and run the
vercelcommand from your project's root directory - Clone one of our CRA example repos to your favorite git provider and deploy it on Edgenivo with the button below:
- Or, choose a template from Edgenivo's marketplace:
Edgenivo deployments can integrate with your git provider to generate preview URLs for each pull request you make to your CRA project.
On Edgenivo, static files are replicated and deployed to every region in our global CDN 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 Edgenivo:
- Automatically optimizes and caches assets for the best performance
- Makes files easily accessible through the
publicfolder - 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 Edgenivo 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 Edgenivo CLI.
You can use the comments feature to receive feedback on your Preview Deployments from Edgenivo 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 Edgenivo:
- 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
Edgenivo's Web Analytics features enable you to visualize and monitor your application's performance over time. The Analytics section 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 section in your project dashboard sidebar on Edgenivo 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();import { inject } from '@vercel/analytics';
inject();Then, ensure you've enabled Web Analytics in your dashboard on Edgenivo. You should start seeing usage data in your Edgenivo dashboard.
To summarize, using Web Analytics with CRA on Edgenivo:
- 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 Edgenivo. 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 Edgenivo, 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 Edgenivo:
- 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
Edgenivo's observability features help you monitor, analyze, and manage your projects. From your project's dashboard on Edgenivo, 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 section in your project dashboard sidebar, are available on all account plans. Observability features include:
- Runtime Logs: Search and filter logs from static requests and Function invocations, with retention based on your plan and Observability Plus status
- Web Analytics: Track page views, visitor activity, and custom events
- Speed Insights: Track Core Web Vitals and page performance
- Observability Plus: Available on Pro and Enterprise for additional observability features, Query, and longer retention
- Drains: Available on Pro and Enterprise to export logs and other observability data for debugging and analysis
- Audit Logs: Available on Enterprise for tracking team member activity
To summarize, using Edgenivo's observability features with CRA enable you to:
- Visualize website usage data, performance metrics, and logs
- Search and filter logs for static, and 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 Edgenivo.
Learn more about deploying CRA projects on Edgenivo with the following resources:
Was this helpful?