Run Locally

Overview

This quickstart guide walks you through the following steps:

1. Cloning the Clay git repository.
2. Configuring Clay.
3. Running Clay locally in development mode.
4. Building for production.

This guide assumes you are familiar with the following commonly used web development software solutions:

• Command line tools (Windows, Mac, or Linux)
• Git
• NodeJS and npm

Prerequisites

Ensure you have git, NodeJS, and npm installed. You can verify the installation by checking the --version of each tool. Execute the following commands:

Copy
git --version
node --version
npm --version

Clone the Git Repository

Navigate to your projects (or any other) directory:

Copy
cd ~/my-projects

Next, clone the Clay git repository using the following command:

Copy
git clone https://github.com/lana-commerce/clay.git

This command creates a clay directory in the current directory. Then, change to this new directory:

Copy
cd clay

Configure Clay

Clay requires your Lana shop ID. Other configuration options are available, but this is the minimum required. If you haven't created your Lana shop yet, use the public test shop with this ID: sh_dwvPk1Dwg9qX.

You can configure Clay primarily by editing the shop.config.ts file. Open shop.config.ts file in your preferred editor and locate the following line at the end:

Copy
export const inputConfig: InputConfig = {};

Next, add your Lana shop id to the config. It should look something like this:

Copy
export const inputConfig: InputConfig = {
  shopID: "sh_dwvPk1Dwg9qX",
};

Fetch Shop Data

Clay, being an SEO-friendly project, depends on pre-fetched shop data to build all the web pages ahead of time. To fetch the shop's data, execute:

Copy
npm run fetch-data

This script uses shopID from the config file to communicate with the Lana backend API. Upon successful completion, a data.json file appears in the Clay directory.

Run Clay in Development Mode

Since Clay is a Gatsby project, it provides a development mode. To start Clay in development mode, execute the following command:

Copy
npm start

Once Gatsby has prepared the development scripts, it displays the URL of a locally hosted web server. Open this URL in your browser. Typically, it runs on port 8000, so the address is: http://localhost:8000.

With the minimum configuration, the homepage of your Clay-based website is empty. However, you can click the search icon and type a keyword, like "gym" (if you used the test shop), to see a list of products. Product pages, customer menu, and cart are fully functional.

Build for Production

Once you're satisfied with your store website's appearance, you can build a production version by running:

Copy
npm run clean # it's recommended to have Gatsby clean all development files before production build
npm run build

After the build is complete, you can start a local web server again to inspect the production build using:

Copy
npm run serve

As with npm start, the console displays the URL of the web server. Typically, the production server runs on port 9000, so the address is: http://localhost:9000.

What's Next?

• Learn more about Clay's configuration.
• Discover how to customize Clay's design.
• Understand how to work with Clay's code.