Sign Up
  1. Znode
  2. Solution home
  3. Developer Documentation - V10
  4. Getting Started with Commerce Portal - V10

Commerce Portal & API Architecture

TABLE OF CONTENTS

Introduction

This article provides a step-by-step overview to help developers understand the architectural and design components of the Commerce Portal application and associated APIs. It also describes the components used in the Commerce Portal user interface and outlines the different types of APIs involved.

The Commerce Portal is a user interface-based application designed to create and manage orders at the individual and team levels. It also supports order tracking, fulfillment, and follow-up activities.

Commerce Portal APIs are categorized into two types:

  • Absolute APIs – Support the Commerce Portal UI application
  • CP Schema-Based APIs – Support integration with external systems such as Znode Admin, the Storefront, and third-party systems

Features Supported

  • Manage Orders
    • All Orders
    • My Team’s Orders
    • Managed Orders
    • Delegated to Me
    • Followed Orders
    • My Orders
  • Order Summary
  • Profile Management
  • Saved Orders

System Design

Commerce Portal Application

A React-based front-end application used to:

  • Create and manage orders and fulfillments
  • Perform follow-ups
  • Support user interactions

Commerce Portal Absolute APIs

  • Provide core services such as orders, fulfillments, and follow-ups
  • Designed specifically to support the Commerce Portal application

Commerce Portal Single Schema APIs

  • Znode API services that support order management features (order history, cancel orders, etc.)
  • Interact with Znode Core APIs and manage data within Znode data stores

Tools and Technologies

  • Frameworks: React, .NET Core
  • Languages: TypeScript
  • Libraries: ESLint, Husky, Sass
  • Code Editors: Visual Studio Code, Visual Studio
  • Documentation: Swagger
  • CI/CD: Docker containers, GitHub Actions

Commerce Portal Application Technical Details

Setup Instructions

  • Clone the repository: znode10-commerceportal
  • Open the solution in Visual Studio Code
  • Build and run the application

Key Files and Structure

  • .env: Configuration file used across the application
REACT_APP_API_URL=https://localhost:44330
REACT_APP_BASE_URL=http://localhost:3000
REACT_APP_THUMBNAIL_IMAGE_PATH=https://localhost:44375
REACT_APP_CP_URL_PATH=https://localhost:7142
REACT_APP_CP_Client_Name="api-z10-qa.amla.io"
REACT_APP_CP_Client_Key="a2c32d26-fb56-4e2d-aa44-10ae401a0970"
  • Dockerfile: Contains deployment instructions for containerization
  • src/: Source directory with the following structure:
  • Components: UI elements such as Products, Create Order, Edit Order, Login, User Profile
  • Interfaces: Data models (API interface, Client interface)
  • Hooks: Custom hooks used across the application
  • API: Contains modules for API interaction
  • Pages: UI components corresponding to various views
  • Layouts: Page structure templates
  • Routes: URL routing for page navigation
  • Stores: State management
  • Utils: Utility functions

Commerce Portal API Technical Details

Setup Instructions

  • Clone the repository: znode10-commerceportal-api
  • Open the solution in Visual Studio
  • Build and run the application

Key Files and Projects

  • .env: Configuration file
  • Dockerfile: Container deployment file
  • Znode.Engine.CommercePortal.Api: Main API project containing:
    • Controllers
    • Models
    • Event emitter logic
  • Project Structure:
    • Znode.Engine.CommercePortal.Api: API controllers
    • Znode.Engine.CommercePortal.Models: API data models
    • Znode.Engine.CommercePortal.Services: Business logic
    • Znode.Engine.CommercePortal.Data: Data access layer
    • Znode.Engine.CommercePortal.Resources: Resource strings and .resx files
    • Znode.Engine.CommercePortal.Client: API client generation and models

Commerce Portal Local Setup and Hosting

Hosting Requirements

To host the Commerce Portal on a server, three domains are required:

  • CP API Gateway
  • CP Admin
  • CP API

Prerequisites

Ensure the following tools are installed:

  • Visual Studio Code (64-bit)
  • Node.js (64-bit)
  • Git Desktop (64-bit)
  • .NET 7 Core (64-bit)
  • Microsoft Access Database Engine 2016 Redistributable

CP API Gateway Configuration

Modify Ocelot Configuration

  • Open Znode.APIGateway
  • In ocelot.json, update "Host": "localhost" to the appropriate domain for each port
  • Leave "Port" field blank
  • Update all localhost references in appsettings.json with the new domain URLs

Build and Publish

  • Build the project
  • Publish in Release mode
  • Deploy in the Znode directory alongside other services (Admin, API, Storefront, Payment API)

IIS Setup

  • Create a new site in IIS for the CP API Gateway
  • Assign the path to the published folder

Commerce Portal Admin Configuration

React Application Setup

  • Navigate to the Znode.Engine.CommercePortal folder
  • Open the project in Visual Studio Code
  • Run the following commands:

npm install
npm start

IIS Hosting

  • Replace all localhost URLs with the actual domain
  • Run npm run build to generate the production-ready files
  • Copy the build/ folder to the server directory for CP Admin
  • Create a new domain in IIS pointing to the copied build folder

Commerce Portal API Configuration

Admin Settings

  • Update ZnodeServiceApiRootUri for the CP API in appsettings.json under Znode Admin

Database Configuration

  • Ensure that a ZnodeDomain entry exists for localhost on port 44309
  • If not present, insert a new record manually

Update CP API Configuration

In the Znode.Engine.CommercePortal.Api project, update the connection string in appsettings.json with the appropriate database credentials

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Getting Started with Commerce Portal - V10