In the first article of the series, we learned how to create the OrderCloud account and set up the API access for seller and buyer organization by creating API clients, security profiles, admin, and buyer users.

In this second article, we will set up the Next.js application to start the development of the admin portal for our seller organization. Using the admin portal, the seller organization can manage product catalogs, and products, see the orders, etc.

Prerequisites

In order to finish the Next.js application setup for the admin portal, we need access to a marketplace, set up the API clients, and security profiles, and create admin and buyer users. Please refer to the article Setup OrderCloud account and API access for step-by-step guidance.

It is assumed that you have some basic knowledge of Tailwind CSS. You can learn more about Tailwind CSS here.

Though I will provide all the necessary commands and steps for setting up the Next.js application from scratch, it is recommended that you have essential hands-on experience in developing the Next.js application using TypeScript.

You can follow along with the given commands for initial setup and naming convention for creating the Next.js application if you wish or use your own naming conventions. However, I would recommend to clone the GitHub repo from here and work in the admin application folder to follow along with me as I’ll keep the code updated in the said GitHub repo. After cloning the repo, you can read the admin/readme.me file for setting up the Next.js application.

Create Next.js application

First, open the terminal or command prompt and navigate to your desired directory where you want to create the Next.js application.

I’m using the path C:\OrderCloudDemo as my base folder and all other applications will be created inside this folder throughout the series. You are not bound to use the same path and can use the path of your choice.

To create the Next.js application, please execute the following command in the terminal. The command uses the –typescript flag to begin the application using TypeScript.

npx create-next-app@latest --typescript

Once you execute the above command you will be presented with a few questions for which you can provide your inputs as shown in the below image. We are using the ESLint, Tailwind CSS, and src/ directory in the application set up and the inputs for those questions are provided to allow them in the setup as shown below.

Once the application is created successfully open it in the Visual Studio Code.

Now, we will use the terminal available in the Visual Studio Code to perform different operations. Whenever I say execute the command, you must consider that I’m referring to the terminal inside the Visual Studio Code.

Execute the following command in the terminal to install some npm packages we will use during the development.

npm install @headlessui/react @heroicons/react clsx moment ordercloud-javascript-sdk axios

Create the .env.local file in the root directory of your Next.js app as shown in the below image. We will add different environment variables in this file during the development of the application.

So far we are good and you can now set up the basic UI for the admin portal. I’ve implemented the Tailwind CSS-based UI as shown in the below image which I will continue to use and extend in this series.

Now we will set up some valuable code for executing the application and connecting with OrderCloud APIs.

First login to the OrderCloud portal where you created your marketplace and set up the API clients, admin, and buyer users as well as seller and buyer organizations. If you have not done this yet, please follow the article Setup OrderCloud account and API access to set up your OrderCloud account and marketplace.

Once you are in the OrderCloud portal, open Seller > API Clients. Click on the Seller Application to open the details.

From the Client ID section, copy the client id of the seller application API client.

Open the .env.local file and create one variable named SELLER_APP_API_CLIENTID and paste the client id you copied.

Here for the admin portal, we do not need the buyer app API client id. However, if you are implementing a single application to serve the seller and buyer operations, then you need to create the environment variable for the buyer app API client id as well.

Also, add one variable named BASE_API_HOST=https://australiaeast-sandbox.ordercloud.io. My marketplace is created in the Australia-east region and hence the sandbox host URL includes that region. For you, it could be different depending on the region you did choose.

Add the seller admin user scopes to the environment variable or hardcode in the code. I would recommend putting them in the environment variable. I used the following in the .env.local file

SELLER_ADMIN_USER_SCOPES="BuyerReader|CatalogAdmin|MeAdmin|OrderAdmin|PasswordReset|PriceScheduleAdmin|ProductAdmin|ProductAssignmentAdmin|ShipmentAdmin"

Now create the configuration.ts file in the library directory of the application.

Copy and paste the following code into the configuration.ts file. The AppConfiguration class provides the different configurations and access to the variables initialized based on the environment variables. The instance of the class will be used across the application to read the configuration values.

import { ApiRole } from "ordercloud-javascript-sdk/dist/models";

class AppConfiguration {
  public sellerAppAPIClientId: string;
  public sellerAdminScopes: Array<ApiRole>;
  public baseApiHost: string;

  constructor() {
    this.baseApiHost =
      process.env.BASE_API_HOST || process.env.NEXT_PUBLIC_BASE_API_HOST || "";
    this.sellerAppAPIClientId =
      process.env.SELLER_APP_API_CLIENTID ||
      process.env.NEXT_PUBLIC_SELLER_APP_API_CLIENTID ||
      "";
    const scopes =
      process.env.SELLER_ADMIN_USER_SCOPES ||
      process.env.NEXT_PUBLIC_SELLER_ADMIN_USER_SCOPES ||
      "";
    this.sellerAdminScopes =
      (scopes.toString().split("|") as Array<ApiRole>).map(
        (role: string) => role as ApiRole
      ) || [];
  }
}

const appConfiguration = new AppConfiguration();
export default appConfiguration;

Now our initial setup of the application is done. We will learn how to use next-auth to implement OrderCloud authentication for the admin portal, in the next article.