Launching Your Storefront

This guide describes how to launch a new PWA Kit storefront and make it accessible from its official, public web address. We cover how to “go live” in three stages: preparation, launching a staging environment, and launching the production environment.

Throughout this guide we use an example storefront with the following attributes:

  • Production URL: https://www.example.com
  • Project ID: example
  • Environments: staging and production

What Is Mobify?

In this guide, the word “Mobify” appears in a few places. Mobify is the name of the company that originally developed the technology that became PWA Kit and Managed Runtime. In 2020, Salesforce acquired Mobify along with all of its technology.

The process of rebranding from Mobify to Salesforce is still ongoing. The Mobify brand name still appears in the mobify-storefront.com domain used to host your storefront and the cloud.mobify.com domain used by the Managed Runtime API. Although new Salesforce domains will eventually take the place of these Mobify domains, support for the Mobify domains will continue.

Before We Begin

This guide assumes that you have access to the Runtime Admin web application and the Managed Runtime API to perform administrative tasks. To get access to these tools, contact your Commerce Cloud administrator and ask them to add either one of the following roles to your account using Account Manager: Managed Runtime User or Managed Runtime Admin.

To make requests to the Managed Runtime API, you must include an API key in the HTTP request Authorization header with the value, Bearer {{api_key}}. For all the sample requests provided, don’t forget to replace {{api_key}} with your actual API key.

To find your API key, log in to Runtime Admin and go to the Account Settings page.

Important: Treat your API key like a password because it allows scripts to perform operations on your behalf.

Stage 1: Preparation

You can complete these steps at any time, but we recommend that you start them as soon as you start using PWA Kit.

1. Create a Staging Environment

Use the Managed Runtime API or the Runtime Admin web application to create an environment (also known as a target) called staging to practice launching the storefront.

Here's a sample request that uses the target endpoint of the Managed Runtime API to create a new environment. Make sure to replace example in the request with your actual project ID string and replace {{api_key}} with your actual API key.

For instructions on creating an environment with Runtime Admin, see our guide to Managed Runtime Administration.

2. Make Your APIs Publicly Available

Your storefront code must be able to access your B2C Commerce instance, so your APIs must be publicly available.

Imagine www.example.com currently resolves to a B2C Commerce instance. After launch, www.example.com will resolve to the mobify-storefront.com domain. Your storefront code needs a way to address the APIs associated with your B2C Commerce instance. You can choose to make your APIs available at api.example.com and update your environment’s proxy settings to use it. For more information, see our guide to Proxying Requests.

3. Allow Salesforce to Issue TLS Certificates

To allow Salesforce to issue a TLS certificate for your domain, you must create a CNAME record. Contact Salesforce Customer Support and ask them to provide you with the necessary details for creating a CNAME record for your storefront.

You must create the CNAME record within 24 hours of receiving the details. A CNAME record looks like this:

Stage 2: Launching a Staging Environment

Always test the launch process on a staging environment first.

Imagine you’re launching a storefront at staging.example.com, your project ID in the Managed Runtime is example, and your bundle is deployed to an environment called staging.

1. Reduce the Time to Live for the DNS CNAME

Reduce the time to live (TTL) for staging.example.com to one minute. Reducing the TTL speeds up the DNS cutover process, and if something goes wrong, allows you to roll back quickly.

You can verify the TTL using the dig command:

2. Configure Your Environment

Configure the environment to receive traffic from the host staging.example.com.

Update the environment’s ssr_external_domain and ssr_external_hostname settings using the Managed Runtime API:

Important After this step, the environment is no longer accessible at its mobify-storefront.com domain.

Verify that the new settings are in effect using a cURL command that makes a request with DNS spoofing:

3. Perform the DNS Cutover

Salesforce Support will provide you with a stable domain following the convention {{project}}-{{environment}}-cdn.mobify-storefront.com where {{project}} is your project ID, and {{environment}} is your environment ID.

Update the DNS CNAME record for staging.example.com to example-staging-cdn.mobify-storefront.com. Open your web browser and navigate to staging.example.com.

Congrats, you’ve completed your test launch! 🥳

Stage 3: Launching the Production Environment

When you’re ready to launch, complete the same steps as the test launch, but with your production environment and domain.

From here, the Customer Success Group will assist you in monitoring the site’s traffic to make sure that the launch has succeeded. The goal is to ensure that everything happens as expected during launch!

After launch, customers with a Signature Success Plan receive proactive site monitoring.

Technical Limitations

  • The ssr_external_domain target setting controls which host the target receives traffic from. If the HTTP Host header of a request doesn’t match this value, the request will fail.
  • Currently, Salesforce doesn’t support storefront URLs with a bare domain like example.com (with no www subdomain). To use a bare domain, you must set up a server to redirect requests from the bare domain to your CNAME.