Webstore Development & Page Builder Setup Guide

TABLE OF CONTENTS

Introduction
Prerequisites
Tech Stack
Project Architecture

Introduction

This article provides a step-by-step walkthrough for setting up a development environment, configuring Webstore-required services, and running the platform locally. Whether customizing themes, building new components, or managing content visually, this document provides the necessary instructions for a seamless development experience.

Prerequisites

Before beginning, ensure the following tools are installed:

Node.js version 18 or later
Download Node.js
npm or Yarn
Git
Visual Studio Code
Download VS Code

Recommended Visual Studio Code Extensions (Optional)

These extensions help improve code quality and consistency:

Code Spell Checker – Catch spelling issues in code and comments
Bundle Size – Visualize the impact of imports
Git History – View git logs and file history
Prettier – Auto-format code on save
ESLint – Enforce consistent JavaScript/TypeScript style
SonarLint – Detect bugs and code smells in real-time

Tech Stack

All required components are installed automatically through the CLI tool.

Components:

Node.js and Next.js:
Node.js is used as the runtime environment, and Next.js is the framework for web application development.
HTML, CSS, Tailwind CSS:
Used for content structure and styling with responsive design.
Redis:
Utilized as a caching mechanism for efficient data access.
JavaScript and React:
JavaScript handles scripting and interactivity. React is used for building dynamic user interfaces.
NX:
NX is used for managing the monorepo, including both Page Builder and Webstore.
IDE:
Visual Studio Code is the recommended integrated development environment.

Project Architecture

Refer to the “Znode 10 Webstore Architecture” document for architecture details.

Environment Setup

Step 1: Znode CLI Tool

Follow the Znode 10 CLI setup guide to download the Webstore SDK locally. Refer to the “How to Install and Setup Znode CLI” document for additional details.

Step 2: Navigate to Repository

Navigate to the directory where the codebase has been downloaded:

cd webstore-platform

Note: There are two variations of the apps:

Webstore
Page Builder

Step 3: Install Dependencies

Run the following command:

npm install

Step 4: Configure Environment Variables

Both the Webstore and Page Builder applications include pre-generated .env files. Open and update the following files:

webstore/.env
page-builder/.env

Update the values of the required environment variables:

Key	Description
API_URL	The base URL for the primary back-end API
API_DOMAIN	Domain name used to route API calls
API_V2_DOMAIN	Endpoint for version 2 of the back-end API
API_KEY	Authentication key used to authorize API requests

Step 5: Run Locally
Start Webstore

npx nx dev webstore

Access the Webstore at: http://localhost:3000

Key Features:

Page rendering from JSON (Page Builder output)
SEO-friendly routes
Modular components and reusable themes

Start Page Builder

npx nx dev page-builder

Access Page Builder at: http://localhost:3000

Preview a Page in the Webstore

To preview and edit a specific section in the Webstore using Page Builder, use the following URL:

http://localhost:3000/en-US/page-builder?url=header&theme=base&publishState=preview&themeCode=base&storeCode=MaxwellsHardware&pageCode=Header

Query Parameters

Parameter	Description
url	Component or page to be edited (e.g., header)
theme	Theme name (e.g., base, dark-mode)
publishState	State (e.g., preview, published)
themeCode	Internal reference for the theme
storeCode	Identifies the store (e.g., MaxwellsHardware)
pageCode	Page section identifier (e.g., Header, Footer)

Features

Drag-and-drop page sections
Component library
Save as JSON block structure

Enable Real-Time Changes Between Page Builder and Webstore

To reflect changes instantly from Page Builder to Webstore, disable caching and enable debug mode:

In page-builder/.env, set:

IS_DEBUGGING=true

In webstore/.env, set:

IS_DEBUGGING=true
ENABLE_CACHE=false

Enable the Publish Button in Page Builder

To allow publishing changes from Page Builder:

Open the following file:

packages/page-builder/src/constants/visual-editor.ts

In the VISUAL_EDITOR_SETTINGS object, update:

ENABLE_EDIT_WIDGET: true

Important: Ensure a corresponding domain entry exists in the Znode domain database table for proper routing and preview functionality.

Step 5: Run Production Build Locally

Ensure the working directory contains files such as package.json, nx.json, and next.config.js.

To build and run the application in production mode:

npx nx start webstore

Access the application at: http://localhost:3000

Quick Links