Build a Next.js storefront in minutes!

Today, we’re excited to announce it’s now even easier to get started with Elastic Path by using our full-featured Next.js starter kit.Our customers love our clean and focussed APIs that allow you to build almost any shopping experience. However APIs are only part of what’s needed to build great websites and apps.

Composable Frontend now provides a modern CLI for generating Next.js storefronts. It has never been simpler for developers to get started with our APIs. We call this Composable Frontend 2.0, and we just launched the developer preview! Sign up for the Composable Frontend 2.0 developer preview.

To get started, simply install the NPM package:

npm install -g composable-cli

And generate the storefront with the EP command:

In just minutes the CLI lets you configure and generate your own Next.js application. All the setup is automatic, your store will be configured by the CLI to match your selected preferences.

Powered by the latest Next.js

Here's an abbreviated view of the Next.js project folder structure:

.
├── e2e
├── public
├── src
│ ├── app
│ │ ├── (auth)
│ │ ├── (checkout)
│ │ ├── (store)
│ │ │ ├── about
│ │ │ ├── account
│ │ │ ├── cart
│ │ │ ├── faq
│ │ │ ├── products
│ │ │ ├── search
│ │ │ ├── shipping
│ │ │ └── terms
│ ├── components
│ ├── hooks
│ ├── lib
│ ├── services
│ └── styles

We leverage Next.js app router to split out the app into three core page layouts:

• Authentication (auth)
• Checkout (checkout)
• Store (store)

The great thing about this architecture is that after generating the site you can customize anything to your liking. Want a 2-step checkout? Break it out on multiple pages. Want different product pages? Customize the product component. Everything is available in nicely factored React code.

Thanks to shadcn-ui we have simple, reusable components for you to modify and expand. These live in the /src/components directory and are used throughout the app.

The starter ships with lots of functionality out of the box:

Customer accounts

We support customer self-signup which normally requires manual setup in your store - but the CLI takes care of it for you. If you have more advanced account needs then you can expand the integration to work with some of the features from the accounts service, including passwordless authentication and multiple member accounts.

Customers can login and manage their accounts. We are still working on transactional email support for password reset functionality but you can integrate with your own mail service today and re-use the React form components to create the UI in a few minutes.

Customer account management provides UI to manage contact information, addresses, order history and passwords.

Multiple product types

Product pages support simple products, variations and bundles out of the box, but this is just the beginning. You can fully customize the product components to give your user the shopping experience you envision.

Single page checkout

Configure your chosen payment provider at generation time for a clean, ready-to-go checkout experience. If you prefer a more tailored checkout you have a solid foundation to build on.

Shipping is mocked out to give you a kick off point to integrate with your own shipping provider. As we progress through the developer preview we will be releasing fully integrated shipping support.

A customer who placed their order using an authenticated account can view their order history in the account pages.

Look out for these improvements coming soon:

• Expanded payment provider support
• Tax handling
• Improved shipping
• Transactional emails (including password reset)
• Analytics
• Subscription products

Fast, automatic configuration

When it comes to setup and configuration the CLI will do a lot of the heavy lifting for you. The CLI runs configuration scripts against your selected Elastic Path store, ensuring the generated app just works when you start developing.

Shipping today:

1. Product listing pages

• Algolia
• Zero dependency quick start

2. Payment provider

• Elastic Path Payments
• Zero dependency quick start

While we have a modest range of options today many more configuration options and presets are in the pipeline and will be rolled out as the developer preview moves forward.

Opinionated without the lock in

Elastic Path is incredibly flexible with it’s unopinionated architecture. Flexibility normally means a learning curve, but with our starter you can move fast. Building on our best practices, you get just enough opinionated tech choices to get moving without locking you into something that will be painful to replace as your app develops.

• Elastic Path Product Experience Manager: our next generation product and catalog management APIs
• Next.js: a React framework for building static and server-side rendered applications
• Tailwind CSS: enabling you to get started with a range of out the box components that are easy to customize
• Headless UI: completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS
• Radix Primitives: Unstyled, accessible, open source React primitives for high-quality web apps and design systems.
• Typescript: JavaScript with syntax for types

Sign up for the Composable Frontend 2.0 developer preview

Composable Frontend 2.0 is currently in developer preview and there's a lot more to come but we are releasing it now so you can help us make it an even better experience. Sign up here to get the latest changes as they go live.