Deploy, Access, and Test Your React App

Learning Objectives

After completing this unit, you’ll be able to:

Describe how to deploy React apps and metadata to a Salesforce org.
Identify how your users can access deployed internal and external apps.
Explain how to generate React and Apex tests and why coverage matters.
Apply performance and production-readiness practices for React apps on the Salesforce Platform.

Deploy Your React App

You’ve built and previewed the PropertyHub app locally. Now deploy it so your users can use it. To deploy, use this prompt in Agentforce Vibes.

Build and deploy the completed internal app and required metadata to my connected org. Confirm the current user has both the PropertyHub custom application permission set and the Property__c permission set. The deployment doesn’t change the data model or GraphQL operations, so don’t refresh the schema, regenerate types, or run another build after deployment.

This deployment includes the UI bundle, the custom application, and the custom application permission set. Read the results carefully. A successful deployment confirms which components are synced to your org. A failed deployment tells you what to fix. After this deployment, Agentforce Vibes assigns you the custom application permission set so that PropertyHub is visible in the App Launcher.

Allow External Images

Live Preview loads property hero images without extra setup, but your deployed app requires external domains to be registered as Trusted URLs. Add https://images.unsplash.com as a Trusted URL with the image-src directive so the browser Content Security Policy (CSP) allows images from this domain. You can register Trusted URLs in Setup, or ask Agentforce Vibes to generate and deploy the CspTrustedSite metadata for you.

After a successful deployment, it’s time to open the app so you can confirm that users can reach it.

Access Your Deployed App

How users reach your app depends on the type of React app.

Your PropertyHub app is an internal user app, so it’s available from the App Launcher. Users open the App Launcher, search for your app, and launch it on desktop or in the Salesforce mobile app.

The ‘Property’ keyword filters the PropertyHub app tile in App Launcher search results.

App Launcher access comes from the custom application permission set you assigned earlier in this unit. Object and field access for Property__c comes from the permission set you assigned in Unit 4. Users need both: without the custom application permission set, PropertyHub doesn’t appear in the App Launcher. Without the Property__c permission set, the app opens but GraphQL can’t read or update listings.

Here’s a complete PropertyHub app. Remember that vibe coding is nondeterministic, so the PropertyHub app that you created might have a different layout. The deployed PropertyHub app opens in a new browser tab.

External apps are served through Experience Cloud. You manage the site and some settings in the Digital Experiences app, and external users reach it through the site’s URL.

After deployment, you can manage your React app through App Manager in Setup.

Test Your React App

Before you release your app, build confidence with tests. Agentforce Vibes can generate two types of tests.

React component tests: These use Vitest and the React Testing Library, configured by the vitest.setup.ts file in your project. These tests verify that your components render and behave correctly. Vitest test run locally.
Apex test classes: These verify your server-side logic, such as validation rules, triggers, flows, and object and field relationships. Apex tests run in your Salesforce org. To run Apex tests, you must first redeploy your project.

A good practice is to validate your app before generating tests. Agentforce Vibes checks your app for issues related to code quality, security, and accessibility, and suggests fixes. Apply those fixes first so your tests focus on verifying clean code instead of locking in problems.

If you followed the scoped prompts in this badge, you should have Agentforce Vibes requests remaining in your Trailhead playground org. The following validation and testing prompts are optional. They aren’t required to finish the badge.

To explore the types of issues Agentforce Vibes can detect, start a new chat session and enter the following prompt. When you start a fresh chat, you ensure your results aren’t influenced by prior agent context.

Do a focused validation of the PropertyHub workflow without making changes. Open the routes file in the existing UI bundle first, then follow imports only to the default listings route and its Property__c GraphQL operations. Confirm that the app handles loading, empty, and error states, and that a user with the assigned Property__c permission set can save an inline status change. Run the UI bundle build only if a successful UI bundle build is not confirmed in the current chat after the latest PropertyHub change. Don't infer build success from generated output timestamps. Don't inventory the repository or inspect configuration unless it is needed for that build. Don't search the repository to discover the route. Don't inspect unrelated template pages, node_modules, generated build output, changelogs, Git history, or unused routes. Return up to three findings, ordered by impact, with a recommended fix for each. Keep the response concise and omit code samples.

While you would normally review and fix the issues detected here, skip this step for now so that you can explore how Agentforce Vibes creates tests.

Enter this targeted prompt.

Add focused component tests for the PropertyHub listings page using the project's existing Vitest and React Testing Library configuration. Mock the PropertyHub GraphQL client so the tests don't call the connected org. Verify that the listings page renders property names, monthly rents, and statuses from returned records, saves an inline status change, and handles one meaningful empty or error state. Don't add Apex tests, change unrelated template tests, or modify test configuration unless the focused test cannot run because essential setup is missing. Run only the new focused test file and summarize the result.

Always review generated tests for sound logic, meaningful assertions, and coverage of edge cases. A test that passes but asserts something trivial can give you a false sense of confidence.

Performance and Optimization

As you move toward production, apply a few practices to keep your React app fast and responsive.

Code splitting: Load parts of your app on demand rather than all at once, a technique called lazy-loading. In React, you can lazy-load routes and large components so that the initial bundle stays small.
Query only the fields you need: Every field in a GraphQL query adds to the response. Request just the fields that a view uses. For example, if the property listings grid includes only the property name, rent, and status, you don’t need to query every field on the Property__c object.
Cache thoughtfully: Avoid re-fetching data that hasn’t changed. Reuse results where it makes sense, and refetch only when the underlying data changes.
Optimize asset delivery: The platform stores and serves your app’s assets through Salesforce CMS, with versioning and a publication lifecycle. Compress images and minify your build output when possible.

Remember that deployment isn’t the finish line. You can always refine your app by opening the same Salesforce DX project and starting another conversation with Agentforce Vibes. You can even ask Agentforce Vibes to analyze your project and suggest specific improvements.

You’ve now taken a React app through the full development journey, from an idea to a deployed and tested app that your users can experience.

Learn More

This badge covers the core path, but it’s only the start of what Salesforce Multi-Framework can do. As you keep building, try these additional features.

Agentforce Conversation Client (ACC): Embed conversational AI directly in your app, so users can ask an Agentforce agent for insights instead of digging through data themselves.
Styling and branding: Match the Salesforce look and feel with Salesforce Lightning Design System 2 (SLDS 2). Or bring your own design system with tools like Tailwind CSS and Shadcn, and pull in approved images and brand assets from Salesforce CMS.

So keep building! Choose a new feature, open a conversation with Agentforce Vibes, and discover how far you can take your next React app.

Durée estimée

Thèmes

Besoin d'aide ?

Ressources Headless 360 Platform