Run one of the following commands:

# using yarn
yarn global add slush-storefront

or

# using npm
npm install -g slush-storefront

Next, make a new directory for your StoreFront project, and run the slush storefront command from within it. For example:

mkdir my-storefront
cd my-storefront && slush storefront

You will be prompted to choose to create one of the following builds:

• Simple - We recommend selecting this build for applications that intend to use the StoreFront components as-is.
• Webpack - The same as the simple build, but sets you up with a webpack build pipeline, and ES6 compilation.
• Advanced - Sets up a complex architecture that allows you to pick and choose the components you include by adding each one individually as a separate NPM package.
• SAYT - Sets up a build with all of the structure from the gb-sayt component tag. Meant for users who intend to build a highly customized SAYT tag.

Simple

If you don’t need any complex build process or ES6 compilation, you can use the simple build process. You will be prompted to input your:

• customerId
• area
• collection
• record structure
• number of autocomplete products to display (in SAYT)

Next, press enter or y to continue setting up your StoreFront build.

This will set you up with the following directory:

|-- .editorconfig # for IDE styling
|-- .gitignore # for files to ignore on git
|-- README.md # explaining how to use the build
|-- index.html # to serve your main HTML
|-- package.json # for dependencies
|-- css/
|     |-- main.css # built css
|     |-- main.scss # scss file for main css
|     |-- reset.scss # css default resets
|     |-- variables.scss # css helper variables
|-- js/
|     |-- index.js # StoreFront configuration
|-- tags/
|     |-- app.tag.html # StoreFront tags

The README.md file will explain how to install the server and run it. You don’t have to use this server if you have your own process of running a server.

CDN

The CDN included in your index.html file from the simple build looks like:

<script src="http://cdn.groupbycloud.com/storefront-canary.js" charset="utf-8"></script>

The canary CDN will always return the latest version of StoreFront. To include a fixed version, modify your script tag to refer to a specific version number:

<script src="http://cdn.groupbycloud.com/storefront-<version>.js" charset="utf-8"></script>

Once you have your project set up, you can follow the steps for development.

Webpack

After selecting the webpack build process, you will be prompted to input your:

• customerId
• area
• collection
• record structure
• number of autocomplete products to display (in SAYT)

Next, press enter or y to continue setting up your StoreFront build.

This will set you up with the following directory:

|-- .babelrc # babel compiling for ES6 code
|-- .editorconfig # for IDE styling
|-- .gitignore # for files to ignore on git
|-- README.md # explaining how to use the build
|-- index.html # to serve your main HTML
|-- package.json # for dependencies
|-- webpack.config.js # file with build instructions
|-- css/
|     |-- main.scss # main css
|     |-- reset.scss # css default resets
|     |-- variables.scss # css helper variables
|-- src/
|     |-- index.js # StoreFront configuration
|-- tags/
|     |-- app.tag.html # StoreFront tags

The README.md file will explain how to install the NPM packages and run the server. You don’t have to use this server if you have your own process of running a server.

Once you have your project set up, you can follow the steps for development.

Advanced

After selecting the advanced build process, you will be prompted to input your:

• customerId
• area
• collection
• record structure
• number of autocomplete products to display (in SAYT)

Next, press enter or y to continue setting up your StoreFront build.

This will set you up with the following directory:

|-- .babelrc # babel compiling for ES6 code
|-- .editorconfig # for IDE styling
|-- .gitignore # for files to ignore on git
|-- README.md # explaining how to use the build
|-- index.html # to serve your main HTML
|-- package.json # for dependencies
|-- webpack.config.js # file with build instructions
|-- css/
|     |-- main.scss # main css
|     |-- reset.scss # css default resets
|     |-- variables.scss # css helper variables
|-- src/
|     |-- index.js # StoreFront configuration
|     |-- library.js # imported StoreFront components
|     |-- tags/
|     |     |-- app/
|     |     |     |-- index.html # StoreFront tags
|     |     |     |-- index.js # App Class file for custom implementations

The README.md file will explain how to install the NPM packages and run the server. You don’t have to use this server if you have your own process of running a server.

Once you have your project set up, you can follow the steps for development.

NPM Packages

In your package.json file, you will find all of the StoreFront packages installed under dependencies. These include all of the components, as well as @storefront/core and @storefront/structure.

SAYT

After selecting the advanced build process, you will be prompted to input your:

• customerId
• area
• collection
• record structure
• number of autocomplete products to display (in SAYT)

Next, press enter or y to continue setting up your StoreFront build.

This will set you up with the following directory:

|-- .editorconfig # for IDE styling
|-- .gitignore # for files to ignore on git
|-- README.md # explaining how to use the build
|-- index.html # to serve your main HTML
|-- package.json # for dependencies
|-- css/
|     |-- main.scss # main css
|     |-- reset.scss # css default resets
|     |-- variables.scss # css helper variables
|-- img/
|     |-- search-icon.svg
|-- js/
|     |-- index.js # StoreFront configuration
|-- tags/
|     |-- app.tag.html # StoreFront tags

The README.md file will explain how to install the NPM packages and run the server. You don’t have to use this server if you have your own process of running a server.

Once you have your project set up, you can follow the steps for development.

Steps For Development

Once you have gone through one of the slush builds to generate your architecture, the steps for development are all the same:

Step 1

Set up your StoreFront Configuration. Make sure your customerId, area, and collection are set, in order to send your search request, and structure is required to display your records’ data for each product.

Step 2

Mount all of the tags you plan to use at the bottom of your StoreFront configuration file.

Step 3

Include your tags in your HTML.