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 will create a clay directory in the current directory. Then, change to this new directory:

Copy
cd clay

Configure Clay

For Clay to function, it needs your Lana shop id. While there are other configuration options, this is the bare minimum. If you haven't created your Lana shop yet, you can use our 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 will use shopID from the config file to communicate with the Lana backend API. Upon successful data fetching, a data.json file will appear 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 will display the URL of a locally hosted web server. You can now open this in your browser. Typically, it runs on port 8000, so the address is: http://localhost:8000.

With the bare minimum configured, the homepage of your Clay-based website will be empty. However, you can click on the search icon and type a keyword, like "gym" (if you used our test shop), to see a list of products. Product pages, customer menu, and cart should be 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, it will display the URL of the web server in the output. 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.