Tailwind Logo

Running a React version of the HeadStart app - local launch

OrderCloud

Published: 2023-08-01

Up until now, we have provided a sample Angular-based version of OrderCloud's management screen mechanism and showed you how to set it up. This time, a React version has been provided and we would like to run it.

Prepare the code

The JavaScript SDK for OrderCloud is available in open source format in the following repositories as an implementation of the management screen. As noted in the notes, there are currently insufficient features for production use, but we are providing it for demo and evaluation purposes.

Since it is available as a template, click Use Template and select Create a new repository to proceed with repository creation. This time, the repository name is the same as the template name, and we have decided to create it as a Private repository.

reactadminlocal01.png

Clone the newly created repository at hand and proceed to check its operation.

Importing data into OrderCloud

This time, we will import the marketplace to be used against OrderCloud's sandbox, as well as the data to be included. Please refer to the previous steps in this article to create your data.

The command is in the form of seeding. The installation procedure is described in the following page.

Actually perform the following (please change the user name and password).

PowerShell
npm run seed -u=YOUR_PORTAL_USERNAME -p=YOUR_PORTAL_PASSWORD -n=ReactShopDemo -r=jpn

After a few moments, data import is complete.

reactadminlocal05.png

Set up the environment

The application configuration is in the form of setting values using .env.local.example. First, create a .env.local file by copying the file. For this file, set the values of OrderCloud that you have already created.

Plain Text
NEXT_PUBLIC_APP_NAME='Sitecore.Commerce.Headstart.ReactAdmin'
NEXT_PUBLIC_OC_CLIENT_ID='YOU_ORDERCLOUD_CLIENT_ID'
NEXT_PUBLIC_OC_API_URL='YOUR_ORDERCLOUD_SANDBOX_URL'
NEXT_PUBLIC_OC_MARKETPLACE_ID='YOUR_MARKETPLACE_ID'
NEXT_PUBLIC_OC_MARKETPLACE_NAME='YOUR_MARKETPLACE_NAME'
NEXT_PUBLIC_DEFAULT_PRODUCT_VIEW_TABBED='false'

First, set NEXT_PUBLIC_OC_API_URL. This is the value that appears in the upper right corner when you select a Marketplace that has already been created.

reactadminlocal02.png

In this case, https://japaneast-sandbox.ordercloud.io is to be set up.

Next, NEXT_PUBLIC_OC_MARKETPLACE_ID and NEXT_PUBLIC_OC_MARKETPLACE_NAME are shown in the screen above, with the Marketplace Identifier item set to NEXT_PUBLIC_OC_MARKETPLACE _ID and the Marketplace Name should be set to ReactShopDemo using the name you specified earlier.

The last item is NEXT_PUBLIC_OC_CLIENT_ID, which is set by selecting API Console from the menu, opening API Clients, and setting the Client ID of the Admin Application.

Start locally

Once the configuration is complete, launch the application locally. Follow the steps below to complete the process.

PowerShell
npm install
npm run dev

Since it is started locally, accessing http://localhost:3000 will display the login screen as shown below.

reactadminlocal03.png

Using the configured administrator account with initialadminuser and password Testingsetup123! you will be able to access the administration screen as follows

reactadminlocal04.png

The page of details also shows images.

reactadminlocal06.png

Summary

In this case, the procedure was to start the sample page. Some parts are actually working and some parts contain dummy data.

Tags