If you already have a B2C Commerce instance, you can connect to it when you generate a project. In that case you can skip the steps below because you don’t need an on-demand sandbox.
Note
An on-demand sandbox (ODS) is a special B2C Commerce instance used for development and testing purposes. Although ODS instances are only temporary, they can be made available for up to 90 days.
The code for your PWA Kit storefront doesn’t include info data about catalogs, customers, baskets, etc. To get that critical commerce data, it needs to request it from an ecommerce back end using headless APIs.
Most PWA Kit projects start with at least one on-demand sandbox to serve as a back end while developing the storefront code. Some development teams share a small number of sandboxes while others create many different sandboxes for different purposes.
This guide helps you get started with PWA Kit as quickly as possible without tools or automation. The following steps walk you through creating an on-demand sandbox, importing a demo site, and using demo data. To create an ODS to test your own code and data, see Get Started with On-Demand Sandboxes.
To create an on-demand sandbox using B2C Commerce Developer Sandbox REST API:
Go to the B2C Commerce Developer Sandbox REST API.
Click Authorize.
Enter the API client ID for sandbox creation.
Click Authorize.
Log in with your Account Manager credentials.
To dismiss the authorization window and return to the Sandbox API user interface, click Close.
In the Sandboxes section of the Sandbox API user interface, click to expand the POST/sandboxes method.
Click Try it out.
Delete the JSON object in the ProvisioningRequest field.
Copy the following JSON object and paste it into the ProvisioningRequest field:
1{
2 "realm": "<your realm id>",
3 "ttl": 24,
4 "autoScheduled": false,
5 "resourceProfile": "medium"
6}Replace <your realm id> with your actual realm ID. Example: zzdc.
If you want the sandbox to be available for more than 24 hours, replace the ttl value with any number of hours up to 2160 (90 days).
You can also enter 0 or less for ttl to specify that the sandbox lasts until you delete it.
Click Execute.
If the ProvisioningRequest JSON is valid, a server response appears.
Copy the response body or click Download so that you can refer to it later.
In the next section, you must provide the Business Manager URL for your sandbox. The Business Manager URL can be found in the response body object in data.links.bm.
A Business Manager URL looks like this (but with its own unique hostname based on the realm ID and instance ID): https://zzdc-001.dx.commercecloud.salesforce.com/on/demandware.store/Sites-Site
More help with on-demand sandboxes is available in the B2C Commerce guide: Get Started with On-Demand Sandboxes.
A more detailed Trailhead module is also available: Salesforce B2C Commerce On-Demand Sandboxes.
We recommend starting your PWA Kit project with a B2C Commerce instance that contains sample data.
Importing site data requires the Business Manager administrator permission. To import sample data into an instance:
and then select Administration > Site Development > Site Import & Export.After the deployment process is complete (about 15 minutes), your instance will contain sample data that can be used while developing with PWA Kit. The sample data import adds two sites: RefArch and RefArchGlobal.
After your sample data has finished deploying, rebuild your search indexes to reflect the new data.
and then select Merchant Tools > Your Site > Search > Search Indexes.After importing the sample data, you have two sites, RefArch and RefArchGlobal, each for a different currency and locale. Choose a default site based on the desired currency and locale.
The RefArch site uses the US dollar (USD) currency and en-US locale. The RefArchGlobal site uses the British Pound (GBP) currency and en-GB locale. The config/sites.js file contains a definition of the sites that you configured in Business Manager. In the /config/default.js file, you can set the default site and optionally, map the site IDs with aliases. If no alias is defined for the site, then IDs are used in URLs. This example sets the default site to RefArch and defines an alias.
1// /config/default.js
2
3defaultSite: 'RefArch',
4siteAliases: {
5 RefArch: 'us'
6},If you see broken catalog images on your PWA Kit storefront shortly after creating a new ODS, wait another 10 minutes or so for the issues to resolve on its own.
j