The purpose of this fork is to give you a jump start on setting up a local installation of Sitecore OrderCloud applications.
Besides I wanted to make it possible that for the basic features no account is needed for the various third party services the Headstart solution relies on. So you don't have to deal with costs and regional market peculiarities of third party services right from the beginning.
I hope this helps some of you to avoid some pitfalls and to get a quicker impression of the Sitecore Headstart solution.
In preparation for this minimal setup, you need to provide the following Azure resources. The tables below document what resource information you need for the further installation process and where you can find it.
You need to configure the Cosmos DB as Core (SQL) - the database itself is created automatically by the Headstart solution.
| Property | Can be found in |
|---|---|
| EndpointUri | Cosmos DB > Overview > URI |
| PrimaryKey | Cosmos DB > Keys > Primary Key |
| Property | Can be found in |
|---|---|
| ConnectionString | Storage Account > Access Keys |
| BlobPrimaryEndpoint | Storage Account > Endpoints > Primary endpoint |
If you want to know a little more about what service is used for what, check out the official readme.
This section describes how to set up a local middleware of the Headstart solution. In summary, a marketplace is created and seeded with initial data and the local middleware is set up and made known to ordercloud.io.
-
Create a new marketplace at ordercloud.io and remember the unique identifier as
MarketplaceID.Hint: Make sure to specify "US West" as the region. Other regions are currently not supported by the Headstart solution and various errors will occur.
-
Open the Headstart solution:
src/Middleware/Headstart.sln -
Update the following settings in the
appSettings.jsonfile at the root directory of the Headstart.API:- OrderCloudSettings:MarketplaceID
- StorageAccountSettings:ConnectionString
- StorageAccountSettings:BlobPrimaryEndpoint
- CosmosSettings:DatabaseName (Chooese any name)
- CosmosSettings:EndpointUri
- CosmosSettings:PrimaryKey
For more detailed information please read this part of the official Readme.
-
Run the Headstart.API project. After the successful start, the 'Headstart Middleware API Documentation' should open in the browser at https://localhost:5001/index.html.
-
Start seeding the marketplace with a POST request to the
/seedendpoint of the middleware with the following body:{ "PortalUsername": "YourUsername", "PortalPassword": "YourPassword", "InitialAdminUsername": "AnyName", "InitialAdminPassword": "AnyPassword", "MiddlewareBaseUrl": "https://localhost:5001", "MarketplaceID": "IdOfYourMarketplace", "OrderCloudSettings": { "Environment": "sandbox", "WebhookHashKey": "AnyKey" }, "StorageAccountSettings": { "ConnectionString": "YourConnectionString" } }Note: For now it's ok to use localhost as MiddlewareBaseUrl, because it's mandatory but not used for local installations.
For more detailed information read this part of the official documentation.
-
The successfull response contains the following settings of the preconfigured API clients of your marketplace. You will need these data in the further process.
API Client Configuration Middlware ClientID
ClientSecretSeller ClientID Buyer ClientID_LOCAL -
Complete the configuration of the middleware by updating the following settings in
appSettings.json:- OrderCloudSettings:MiddlewareClientID
- OrderCloudSettings:MiddlewareClientSecret
-
Run/Restart the Headstart.API project.
- To expose your local server you can use ngrok:
- Run
ngrok authtoken XXXYourToken - Run
ngrok http https://localhost:5001 - Extract public ngrok url, like
https://5ed8-37-201-144-21.ngrok.io
- Run
- Afterwards you need to persist the ngrok url to the relevant integration event in ordercloud portal. That basically means you have to update the
CustomImplementationUrlof the integration event with ID 'HeadStartCheckoutLOCAL' (PATCH Partially update an integration event)'.
This section describes how to set up the frontend application for buyers (the ecommerce website) and the backend application to administrate the shop (the admin interface).
- Open Visual Studio Code
- Installl Angular CLI:
npm install -g @angular/cli - Install and build the Headstart SDK
- Open folder
src/UI/SDK - Install dependencies:
npm install - Build the project:
npm run build
- Open folder
-
Open folder
src/UI/Buyer -
Install dependencies:
npm install -
Configure App:
src/assets/appConfigs/defaultbuyer-test.json:- clientID = Id of local Buyer API Client
- translateBlobUrl = Enter your storage account name
src/environments/environment.local.ts:- localBuyerApiClient = Id of local Buyer API Client
-
Build the project:
npm run build -
Open http://localhost:4300/ and enjoy
For more detailed information read the official readme of buyer application.
- Open folder
src/UI/Seller/src - Install dependencies:
npm install - Configure App:
src/assets/appConfigs/defaultadmin-test.json:- clientID = Id of Seller API Client
- translateBlobUrl = Enter your storage account name
- blobStorageUrl = Enter your storage account name
- Build the project:
npm run build - Open http://localhost:4200/
- Login with your seeded
InitialAdminUsernameand enjoy
For more detailed information read the official readme of seller application.
- If you don't have any experience with Sitecore OrderCloud, the Headstart team has made a suggestion for getting started with the Headstart application in this section of the readme
- Specifics of this solution:
- The shipping costs are always 0, because the EasyPost connection has been disabled.
- Each address is valid because the US address validation by SmartyStreets has been disabled.
- You find some creditcard data in this section of the official Readme.
- If you've any issue with authorization or tokens, use jwt.io, it saves a lot of time!
ngrok http 5001does not work, you will get a 500 server error at checkout. This article explains why.- In case of any error, take a closer look at the response of the previous integration event (so called Worksheet). For example, I found this error message in the middle of it:
...
"ShipEstimateResponse": {
"ShipEstimates": null,
"HttpStatusCode": 503,
"UnhandledErrorBody": "ngrok gateway error\nThe server returned an invalid or incomplete HTTP response.\r\n\r\nERR_NGROK_3004\r\n",
"xp": null
},
...