dreamstore

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.