Publishing a React Store

The site administrator must first publish the React Store data model by using the Gradle script and the starterstores/EmeraldDataTemplate.zip template.

Publishing a full React Store model

The EmeraldDataTemplate.zip template publishes the store resources as a headless store model into the Store server database and can create or reference existing stores models. EmeraldDataTemplate.zip contains the configurations for both B2C and B2B headless store models. It also contains sample catalog data for the B2C Emerald stores.

Note: For the B2C Sapphire stores, the Aurora store catalog data is used as the sample catalog data.

Catalog Asset Store (CAS) - The asset store that contains the catalog intended for use with the headless model.
Storefront Asset Store (SAS) - The asset store that contains the marketing and promotion content for use with the headless model. The SAS can be associated with a default React application name. JSPs can optionally still be included in the model to enable for email and site map templates.
ExtendedSite Store (eSite) - The eSite is the headless store and references the CAS and SAS to inherit. The Extended Site can be associated to the React application name or can inherit from the SAS.

Note: You must publish the store using the Gradle script if you are creating a new Catalog Asset Store (CAS) or a new Storefront Asset Store (SAS).

To publish the store data model for a React Store application, you must provide the following parameters in the EmeraldDataTemplate.zip file.

crsESiteStoreDirName - specifies the React app name to use for the eSite. The React app that you create for the esite must have the same name as used for the crsESiteStoreDirName parameter when you publish the store.
crsFrontAssetStoreDirName - specifies the React app name to use for the SAS. If the crsFrontAssetStoreDirName is not specified, the specified React app is used.

Note: You can deploy the React Store application without a context root. For example, instead of deploying to https://<hostname>:6443/Emerald you can deploy it at https://<hostname>:6443.

The Gradle script creates a directory that can then be deployed to the server by using one of the following methods:

Toolkit Gradle publish with a scheduled job
Runtime Gradle publish + FTP + scheduled job

Consider the following points for publishing a full React Store:

Store publish for the React Store supports both B2C and B2B store models and each requires its own separate SAS.
The React Store application can support multiple Stores and the site administrator can publish other eSites that refer to the same React app name.
CRS assets are not required to run the headless React Storefront. All pages are render even if CRS assets are not deployed or if the CRS Docker is not present.
CRS assets or CRS Docker is required if you want to use features in the React Store that rely on JSP files in CRS. To enable these features you must copy the required JSP files into the CRS.
- Commerce eMail messaging and notification
- Commerce Site Map Generation
You can build your own custom data template for the React Store based on EmeraldDataTemplate.zip and use that in the Gradle script.

Note: A new value of Gradle properties is used to copy email template assets to headless React stores. The value headless for the property crsStoreServerAssets is used for React stores.

#Indication whether to copy Store front asset or not
#no|yes|headless -> not copy|copy Aurora asset| copy headless store asset (Emerald)
crsStoreServerAssets=headless

Adding a new eSite to an existing React Store model

You can add an eSite React Store to an existing CAS or SAS store that is published with an Emerald, Aurora, or custom template by using the Gradle script from the Emerald data template. If the CAS or SAS stores are not React Stores, you must specify the location of the store by using the crsFrontAssetStoreDirName parameter in the template.

If a React Store model with CAS and SAS is already published, you can add eSites by using the Add Store functionality in the Extended Site Management tool or the Site Management tool in the Administration Console. The eSite created by using Add store is associated with the React application specified in the crsFrontAssetStoreDirName parameter for the SAS store.

Important: The eSite that is created by using Add store has the same framework and styling as the existing React Store model.

Note: The React eSite model does not support the Remember Me - Persistent Session functionality. You must disable the Persistent Session. If the Persistent Session is not disabled globally and is used for other stores, you must disable it manually for the React eSite that is created by using Add Store by using the following command.

update store where store_id=<ID for new published eSite> set PERSISTENTSESSION=0.

For more information, see Persistent sessions (Remember Me).

Adding a new eSite to an existing JSP Store model

You might already have JSP Store models with existing CAS and SAS created for your operational stores. You can add an new React Store as an eSite by reusing the existing catalog and marketing content.

Use Gradle to publish the new headless eSite store by using the EmeraldDataTemplate.zip template, pointing to the existing CAS/SAS stores with crsESiteStoreDirName set to the React app name. This creates the possible data models for the React Store to operate. However, the following additional manual steps might be required.

Digital Assets - The set of digital assets that are defined with the CAS or SAS from the JSP Store model may be referenced relative to the current CRS application. For the React Store to access these assets, a routing rule/proxy must be added to the store. The /wcsstore/CAS path must route to the CRS.
Similarly, marketing assets that you want to use in eSpots must also be routed when accessed from the React Store back to its location.
Contract Pricing - The React Store is preconfigured to expect contract pricing for the catalog and the other JSP Store within the same model might not be. If a hybrid mode is required, the React Store can be disabled to use the default offer prices and not require a search based price indexing. As such, we recommend that you remove the wc.search.priceMode.compatiblePriceIndex from the storeconf setting for the React Store.
Elasticsearch or SOLR - On a single instance of Commerce, both Elasticsearch and SOLR are not supported simultaneously. The React Stores support only Elasticsearch. It is recommended that you first migrate your JSP Store from SOLR to Elasticsearch before you add support for the React Store.

Note: The Reference Store application can display any store directed against it, even one published with the JSP model.