VTEX DreamStore

The way a store is meant to be.

Development Setup

Download the Dream CLI

npm i -g dream-cli

Call dream inside the store directory

cd dreamstore
dream

(...)

DE >> App started on port 1337 with environment development

That's it!

Store structure

A Dream-Engine store has two important files and three important directories:

package.json

This file describes your store name and version.
It also describes in which hosts your store should be published.

store.json

Here you can configure global variables for your templates:

"global": {
  "compatibility": {
    "legacyBrowsers": true
  },
  "title": "Dreamstore",
  "storeName": "Dreamstore"
}

and specific options for every VTEX provider:

"providers": {
  "catalog": {
    "exportUnavailableVariations": false
  }
}

pages/

Here, you define your pages.
Pages have only two required properties: template and route. All other properties will be available as variables to your template.
These variables overwrite global variables with the same name.

{
  "route": "/category/:category",
  "template": "templates/category.hbs",
  "category": "catalog/categories/:category",
  "products": "catalog/products?category=:category",
  "orderform": "checkout/orderform?expected=items",
  "banner": "portal/banners?featured_products_category=:category"
}

templates/

This is where all your templates and partials reside.
In these templates, you can use any of the variables injected by the available providers, based on the page configuration.

public/

This is your assets folder.
Everything served here will be acessible in your store root.
Use it for JavaScript files, CSS sheets, images, etc.

For details on publishing your store, refer to the Dream CLI guide.