Building the Headstart Demo Environment - Part 7 Launching the Buyer and Seller Sites : Haramizu.com

Building the Headstart Demo Environment - Part 7 Launching the Buyer and Seller Sites

Published: 2022-02-10

The middleware has been started and the initial data has been configured. Next, the buyer, which is the storefront of the EC site, and the seller, which is the administration screen of the EC site, are launched locally.

From here on, we will proceed with the procedure in Visual Studio Code.

SDK Build

The first step is to run the build of the SDK to be used for both Buyer and Seller. To do this, go into the src/ui/sdk folder and run npm install and npm run build.

PowerShell

cd src/ui/sdk
npm install
npm run build

Running a Buyer

The path to buyer is src/UI/Buyer. Move to this folder and execute the following command (the first line is moved to a higher level folder and then moved to the buyer folder because it is the same as the previous process).

PowerShell

cd ..
cd buyer
npm install

Next, fill in the settings for starting buyer. First, edit the file src/UI/Buyer/src/environments/environment.local.ts to specify that local middleware will be used. The following settings can be found at the top of this file.

TypeScript

// ===== MAKE CHANGES TO CONFIGURATION BETWEEN THESE LINES ONLY =======
// ====================================================================
const brand = Brand.DEFAULT_BUYER
const appEnvironment = Environment.TEST
const useLocalMiddleware = false
const useLocalBuyerApiClient = false // set to true for running integration events locally
const localMiddlewareURL = 'https://localhost:5001'
const localBuyerApiClient = '800EFEC0-43A5-4EB6-9150-C3BBE628214C'
// ====================================================================
// ======= UNLESS YOU ARE DOING SOMETHING WEIRD =======================

Change useLocalMiddleware and useLocalBuyerApiClient to true and set localBuyerApiClient to the Buyer's ClientID obtained from Postman (Default in OrderCloud's admin screen). HeadStart Buyer UI LOCAL ID). This will now reference the local Middleware.

Next, modify the file src/UI/Buyer/src/assets/appConfigs/defaultbuyer-test.json, which describes the settings necessary for the app to run. The data in the sample is as follows.

JSON

{
  "hostedApp": true,
  "appname": "Default Buyer Test",
  "appID": "defaultbuyer-test",
  "clientID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "incrementorPrefix": "HS_TEST",
  "baseUrl": "https://my-default-buyer-test.com",
  "middlewareUrl": "https://my-hosted-middleware.com",
  "creditCardIframeUrl": "https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html",
  "translateBlobUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net/ngx-translate/i18n/",
  "supportedLanguages": [
    "en",
    "fr",
    "jp"
  ],
  "defaultLanguage": "en",
  "marketplaceID": "my-seller-id",
  "marketplaceName": "Default Seller Test",
  "sellerQuoteContactEmail": "quotes@seller.com",
  "orderCloudApiUrl": "https://sandboxapi.ordercloud.io",
  "useSitecoreSend": false,
  "sitecoreSendWebsiteID": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "useSitecoreCDP": false,
  "sitecoreCDPApiClient": "xxxxxxxxxxxxxxxxxxxxxx",
  "sitecoreCDPTargetEndpoint": "https://api-us.boxever.com/v1.2",
  "sitecoreCDPCookieDomain": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "sitecoreCDPJavascriptLibraryVersion": "1.4.8",
  "sitecoreCDPPointOfSale": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "sitecoreCDPWebFlowTarget": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "theme": {
    "logoSrc": "assets/generic-logo.png"
  },
  "appInsightsInstrumentationKey": null,
  "anonymousShoppingEnabled": true,
  "acceptedPaymentMethods": [
    "CreditCard",
    "PurchaseOrder"
  ]
}

The items to be changed are as follows

Column	Value	Example
clientID	Buyer の ClientID	Default HeadStart Buyer UI LOCAL ID
incrementorPrefix	HS_TEST	DB_TEST
middlewareUrl	URL of the test slot for the web app	https://localhost:5001
translateBlobUrl	Blob URL	https://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/
marketplaceID	Marketplace ID	ID
marketplaceName	Marketplace App Name	List the name of the Marketplace
sellerQuoteContactEmail	quotes@seller.com	Email Address
orderCloudApiUrl	Sandbox URL	https://japaneast-sandbox.ordercloud.io

Once the above configuration is complete, check the status of Middleware running behind the scenes and run the BUYER application.

PowerShell

npm run start

If an error occurs at this point, the browser cache may be causing problems. In this case, please use In Private mode or other mode to start the program so that it is not affected by the cache.

Run Seller

First, we will proceed to npm install so that we can run the Seller application.

PowerShell

cd ..
cd seller
npm install

The Seller application, like the Buyer, has two files: one to run locally and one to configure the application. First, edit the file to run locally.

Use the file src/UI/Seller/src/environments/environment.local.ts to switch settings. There is one point to check the configuration: if useLocalMiddleware is true, it works (it is true by default).

TypeScript

// ===== MAKE CHANGES TO CONFIGURATION BETWEEN THESE LINES ONLY =======
// ====================================================================
const brand = Brand.DEFAULT_ADMIN
const sebEnvironment = Environment.TEST
const useLocalMiddleware = true
const localMiddlewareURL = 'https://localhost:5001'
// ====================================================================
// ======= UNLESS YOU ARE DOING SOMETHING WEIRD =======================

Then modify the file src/UI/Seller/src/assets/appConfigs/defaultadmin-test.json to change the app settings.

JSON

{
  "hostedApp": true,
  "sellerID": "my-seller-id",
  "sellerName": "Default Admin",
  "appname": "Default Admin",
  "clientID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "middlewareUrl": "https://my-hosted-middleware.com",
  "translateBlobUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net/ngx-translate/i18n/",
  "supportedLanguages": ["en", "fr", "jp"],
  "defaultLanguage": "en",
  "blobStorageUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net",
  "orderCloudApiUrl": "https://sandboxapi.ordercloud.io"
}

Column	Description	Value
clientID	Seller ClientID	Default HeadStart Admin UI ID
middlewareUrl	URL of the test slot for the web app	https://localhost:5001
translateBlobUrl	Blob URL	https://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/
blobStorageUrl	Blob URL	https://headstartjpdemo.blob.core.windows.net
orderCloudApiUrl	Sandbox の URL	https://japaneast-sandbox.ordercloud.io

After the above configuration, run the command npm run start.

Summary

Following the middleware, we were able to run the buyer and seller apps locally. Now that we have confirmed that they work, we will deploy them on Microsoft Azure in the next issue.

Part 8 Preparing the Azure environment (Part 2)

Update History

Updated in August 2023 to reflect the latest information.