StoreFront Core

Getting Started

StoreFront's core module can be used to start an instance of StoreFront, mount tags to the DOM and register custom tags. It also contains a number of useful abstractions for the development of custom tags.

Prerequisites

This module is meant to be used in a node environment which is bundled for use in the browser.

Installing

Use npm or yarn to install in a node project that uses webpack, browserify or similar.

npm install --save @storefront/core
# or
yarn add @storefront/core

Usage

This module can be used both to start an entire StoreFront application, or to create a new component that registers with your application.

Start StoreFront

import StoreFront from '@storefront/core';

// start a StoreFront application
const app = new StoreFront({ /* config */ });

// mount a component
StoreFront.mount('gb-query');
// or
app.mount('gb-query');

Configuration

• customerId: The only required configuration that must be passed to start a StoreFront instance

The rest of the configuration can be found in the generated API reference.

Use with Webpack

The current minimal webpack configuration to load components from @storefront npm packages and link them with @storefront/core.

// app.js
var StoreFront = require('@storefront/core').default;
require('@storefront/structure');
require('@storefront/query');

new StoreFront({ customerId: 'myCustomer' }).mount('*');

// webpack.config.js
module.exports = {
  entry: './app',

  module: {
    rules: [{
      test: /\.html$/,
      loader: 'html-loader'
    }, {
      test: /\.css$/,
      use: [
        'to-string-loader',
        'css-loader'
      ]
    }]
  }
};

Register custom component

Although the supplied development tools do not require ES2015+ to function, the examples will show them with that syntax for cleanliness

import { tag } from '@storefront/core';

const template = '<div>{ someContent }</div>';
// or if storing in separate file
const template = require('./my-component.html');

@tag('my-component', template)
class MyComponent {

  init() {
    this.someContent = 'hello world!';
  }
}

Running the tests

Tests can be run to generate coverage information. Once run, open coverage/index.html in your browser to view coverage breakdown.

npm start coverage
# or
yarn start coverage

Tests can be run continuously for development

npm run tdd
# or
yarn tdd

Tests can also be run alone

npm test
# or
yarn test