Skip to main content

Getting started with Composable Starter

Composable Starter is the toolkit recommended by Elastic Path for creating headless commerce storefronts. It includes a set of practical components, tools, and utilities that reflect Elastic Path's best practices for building custom web storefronts.

What you’ll build​

You’re going to complete the following tasks:

  • Creating a new Composable Starter (Next.js) app using the Composable CLI
  • Running your storefront in your local development environment
  • Setting up continuous deployment with GitHub and Vercel
  • Deploying your app to production

Prerequisites​

  • Node.js v18 or later
  • You've installed a Node.js package manager: either npm, Yarn 1.x, or pnpm.
  • You've installed Git

Elastic Path account​

You'll also need an Elastic Path account to access the backend. If you don't have one, you can sign up for a free trial.

Install Composable CLI globally and authenticate​

You'll need to install the latest version of composable-cli to get started. You can do this by running the following command:

npm install -g composable-cli

Then authenticate with Elastic Path by running the following command:

ep login

For further explanation see Authentication.

Create a new Composable Starter app​

In your terminal, run the following command to create a new Composable Starter app:

ep generate my-storefront

where my-storefront is the name you want to call your storefront project.

Select a store​

If you've not selected a store yet, you'll be prompted to select a store from a list of stores that you have access to.

Select the store you want to use for your storefront. If you've already selected a store you will see the "Using store" info message that tells you what store is active. You can switch store by calling the ep store set command learn more here

Select configuration​

The Composable CLI will prompt you to select from different configurations.

  • PLP (Product List Page) type - storefront page that presents a list of products based on a category or search query
  • Payment Gateway - the payment processor that will handle checkout in the storefront

For this tutorial, select the following options:

  • PLP type: Simple
  • Payment Gateway: Simple (quick start)

Once you've selected your configuration, the Composable CLI will create a new directory with the name you provided, scaffold out your new storefront project and perform configurations based on the options you selected.

Running the storefront locally​

The Composable Starter app is built on top of Next.js. Your local developer experience will be the same as any Next.js app. To learn more about Next.js, see the Next.js documentation.

If it's the first time your running a composable starter project, don't forget to install your dependencies by running the following command from your project directory:

npm install

To run your storefront locally, run the following command from your project directory:

npm run dev

Your Next.js Elastic Path powered storefront will run at http://localhost:3000 (look at the terminal output for the exact URL as your local environment may be different).

Deploying your storefront​

Lean how to deploy your storefront to production here.