Create a Storefront Using an On-Demand Sandbox

To get started with creating a storefront app, set up an on-demand sandbox, and import sample data. Next, deploy your site using Managed Runtime.

Unlike the quick start that uses the demo sandbox preset instance, which is preconfigured, this procedure is based on an on-demand sandbox that you create.

  1. To create an on-demand sandbox, see Create an On-Demand Sandbox.

  2. After creating your sandbox, ask an administrator with the Account Administrator role in Account Manager to create a SLAS Client. The SLAS client enables you to use Shopper APIs. See Set Up API Access and Authorization for Shopper APIs.

  3. Get the organization ID of your sandbox. See Organization ID in Base URL and Request Formation. Save this organization ID as you'll use it in a later step.

  4. Get the short code for the sandbox's realm in Business Manager. See Short Code in Base URL and Request Formation. Save this short code as you'll use it in a later step.

  5. To be able to upload your app, create a Managed Runtime project and environment. When creating the new environment, connect the sandbox instance to the B2C Commerce instance, or for an existing environment, change the B2C Commerce instance Managed Runtime Environment settings. See Managed Runtime Administration.

  6. Add a proxy setting for Commerce API calls to avoid adding cross-origin resource sharing (CORS) headers. See Configure Managed Runtime Environments. For the path, use api, and for the host, use {short-code}.api.commercecloud.salesforce.com after replacing {short-code} with your sandbox instance short code, which you obtained earlier.

  7. Get your project ID from Project Settings.

    • In Runtime Admin, click the name of your project.
    • Click Project Settings and copy the Project ID string. Example: my-project.

  8. Create a storefront app based on the Retail React template and configure the app to point to your sandbox. To set up Node.js, see Set Up Your Local Environment. Run this Node.js package to create the storefront.

  9. Answer each prompt that the tool outputs.

    • For the template, choose the option for the retail app that uses your own Commerce Cloud instance.
    • Choose whether you want template extensibility.
    • Enter your Managed Runtime project ID.
    • Enter your on-demand sandbox instance URL.
    • Enter SLAS client ID that you created earlier and whether your SLAS client is private.
    • Enter the site ID of your default site that you configured for your sandbox.
    • Enter the Commerce API organization ID of your sandbox that you obtained earlier.
    • Enter the Commerce short code of your sandbox that you obtained earlier.

  10. In config/sites.js, make sure the correct currency and locale is selected for the default site.

  11. From the app's directory, upload the storefront app to the Managed Runtime project and deploy it to the environment by typing this command in a Terminal window. Replace {project-id} with your project ID from Project Settings and {environment-id} with your target environment ID from Environment Settings.

Congratulations! You created a storefront app based on your on-demand sandbox and uploaded it to Managed Runtime!