@ovos-media/builder-archetype

builder archetype for ovos play ecosystem projects

This archetype for builder initializes a new project for the ovos play ecosystem.

Installation

# first install builder-init globally
npm i -g builder-init


# then tell builder-init to init the builder-archetype
# for this to work, you have to be a member of the ovos-media org on npm
# contact [e-mail] or [e-mail]
builder-init @ovos-media/builder-archetype

# this will kick off a ton of things
# - initialize the archetypes default files
# - install the dependencies
# - create a new repository on bitbucket (in OPE)
# - git init your local copy
# - git add the files
# - git commit -m "initial commit"
# - add the bitbucket remote
# - push the local repo to bitbucket
# - start the dev server


# to run the application in dev mode (HMR, source maps, debugging...)
builder run start:dev

# in order for testing to work, you'll have to install jest and karma-cli globally
npm i -g jest karma-cli

# you can then run tests just with
builder run test

About

It assumes the following directory structure for it's scripts to work:

- projectName
  - src
    - client
      - __tests__
        - entry.js
      - entry.js

Feel free to exchange packages where you see fit.

It supports client-side HMR out of the box so there's no need to configure any additional stuff.

React Storybook

To use storybooks, you first have to add it to your projects dependencies:

$ yarn add @kadira/storybook

Afterwards, create a src/client/stories.js file with the following content:

const storybook = require('@kadira/storybook');

function loadStories() {
  // require your stories here
}

storybook.configure(loadStories, module);

You can the run storybook with builder run storybook (default port: 6789). You can build a static version of the storybook with builder run build-storybook (output dir: ./storybook | Make sure to add storybook to .gitignore)

You can modify the used webpack configuration by creating a file in webpack/storybook.config.js.

Testing

Client

For client side testing the karma test runner is used and includes the chai testing framework with a mocha style reporter.

If you want to use jest + jasmine however, you can create a new jest config for your project and use this configuration then with a custom npm command.

Server

For server side testing jest is used which includes jasmine by default.

The reason we're not using karma/chai here is that karma does run tests in a browser (which doesn't include nodejs stuff) and jest includes jasmine.

You may however use chai asserts/expects/shoulds in your server side test by importing the chai framework and using it like this:

import chai from 'chai';

describe('calc', () => {
  it('works', () => {
    chai.expect(1 + 1).to.equal(2);
  }
});

Code Coverage

Code coverage will automatically be generated via istanbul for both client and server scripts.

It will only be generated for single-runs and not in watch mode.

Code coverage reports are structured like this:

- projectName
  - coverage
    - client
      - [browserName]
        - index.html

If additional reports are needed for CI we can easily add them to this archetype.

Commands

$ builder run start:dev # starts the dev version of the application (HMR, sourcemaps, ...)

$ builder run test # runs client tests using karma & runs tests in chrome

$ builder run test:watch # watch mode for client tests