@ovos-media/builder-archetype
v4.9.3
Published
Builder archetype for ovos play ecosystem projects.
Downloads
125
Keywords
Readme
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 [email protected] or [email protected]
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