Exercise 4: Deploy to Your Salesforce Org

In this exercise, you'll deploy the Merchant Operations Center so it can run from your Salesforce org instead of only in Live Preview.

Where does this app actually run?

Deploying doesn't mean publishing to an external host like you might with a typical React app. A Salesforce Multi-Framework React app deploys as a UI Bundle, a metadata type that packages your built React app alongside the rest of your org's metadata. The platform hosts and serves it for you, from its own Salesforce domain (*.my.salesforce.app), so there's no external hosting to set up.

A CustomApplication with a uiBundle reference is what makes the UI Bundle usable: it gives the app a name and icon in the App Launcher and puts it behind your org's existing security model, so object, field, Apex, and tab access are controlled with a permission set like any other Salesforce app.

In short, the Merchant Operations Center isn't calling out to a Salesforce org from somewhere else. It's a React app running on the Salesforce Platform itself.

Why a separate domain?

Lightning web components share one origin with Salesforce's own code, so they rely on Lightning Web Security to stay contained. A UI Bundle is served from its own top-level domain instead, so the browser itself keeps your app and its npm libraries separate from the Salesforce shell. That is what makes it safe to run third-party React libraries.

Security of your data doesn't change: every request still runs as the signed-in user, with their object, field, and sharing permissions.

Step 1: Review What Will Deploy

1. Use this prompt to ask Vibes to review the app before deployment:

   Review the Merchant Operations Center project and summarize what needs to be deployed to my Salesforce org.
   
   Include:
   - The Multi-Framework React app files
   - Any Salesforce metadata or configuration needed for the app to run
   - A permission set that grants access to the deployed app
   - The command to assign that permission set to my user
   - The deployment command you recommend
   
   Do not deploy yet.

2. Review the response and confirm that Vibes is deploying the completed Merchant Operations Center app.

3. If anything looks unrelated, ask Vibes to narrow the deployment to the React app and required Salesforce metadata only.

Step 2: Deploy the App

1. Use this prompt to deploy the app:

   Deploy the Merchant Operations Center app to my Salesforce org.
   
   Use the deployment path for Salesforce Multi-Framework React apps in this project.
   
   Run the required build and deploy commands.
   
   If deployment fails, diagnose the error, make the smallest needed fix, and redeploy.

2. Approve the commands Vibes needs to run.

3. Wait for deployment to complete.

4. If Vibes reports an error, let it explain the cause before you approve a fix.

Step 3: Create App Access Metadata

The project template already includes a CustomApplication and permission set, but the app is labeled merchantoperationscenter and the permission set grants no access to the app's objects, such as Storefront__c and Order__c. This step updates them for the finished Merchant Operations Center. If Step 2's deployment already did this and assigned the permission set, skip ahead to Step 4.

1. Use this prompt to create and deploy the Salesforce metadata required to expose the app:

   Review the Merchant Operations Center project and create the Salesforce metadata required to expose this Multi-Framework React UI Bundle in the App Launcher.
   
   Specifically:
   - Create or update the CustomApplication metadata for the UI Bundle.
   - Associate it using the uiBundle field.
   - Set the app label to Merchant Operations Center.
   - Create a matching permission set for end users.
   - Include app visibility plus only the object, field, Apex, and tab access actually required by the app.
   - Deploy both to my org.
   - Assign the permission set to my current user.
   
   Do not just create a permission set by itself. Include the required Custom Application and permission set flow for internal UI Bundle apps.

2. Confirm that Vibes reports the Custom Application deployment and permission set assignment succeeded.

Step 4: Open and Test the Deployed App

1. Click the Open Default Org in Browser button in the status bar.

2. Open the App Launcher.

3. Search for Merchant Operations Center, then select the app.

4. Confirm that the app loads with Salesforce storefront data.

5. Test the main workflow:

   • Filter, search, sort, and paginate storefronts.
   • Open the storefront detail modal.
   • Review Orders and recommended actions.
   • Create a follow-up Task.

Step 5: Ask Vibes to Fix Deployment or Runtime Issues

1. If something does not work in the deployed app, paste the error or describe what you see.

2. Use this prompt:

   The deployed Merchant Operations Center app has this issue:
   
   [Paste the error message or describe the behavior.]
   
   Diagnose the likely cause, explain the smallest safe fix, update the project, and redeploy.

3. Retest the deployed app after the fix.

Summary

• You reviewed the deployment scope before deploying.
• You deployed the Merchant Operations Center app to Salesforce.
• You created and assigned a permission set for the app.
• You opened and tested the app in your org.
• You used Vibes to diagnose and fix deployment or runtime issues.

You now have a deployed Salesforce Multi-Framework React app that supports storefront analysis and follow-up workflow.