Awesome

ceri-dev-server

ceri-dev-server is a small development server for building custom elements with ceriJS. It takes different environments and makes them available in your browser.

Additionally it can create a static version for ghpages or perform unit tests

Install

npm install --save-dev ceri-dev-server

Usage - cli

Usage: ceri-dev-server [options]

  Options:

    -h, --help               output usage information
    -V, --version            output the version number
    -p, --port <number>      port to use (default: 8080)
    -f, --folder <path>      root path (default: dev)
    -s, --static <path>      exports a static version (for ghpages)
    -e, --extensions <list>  extensions to match (default: js,coffee)
    -t, --test               runs karma on the folder
    -w, --watch              only with --test, runs karma in watch mode
    --browsers <list>        only with --test, sets browsers

Setting up an environment

By default ceri-dev-server will look in the dev folder for files. Just create a someName.js|.coffee file there. Require your custom element from there normally.
The server will be accessible under http://localhost:8080/ by default.

Example of project layout

./dev/index.js // Contains an environment to interact with your component.
./src/comp.js // your component.
./comp.js // your component compiled down to ES5.

Also see ceri-boilerplate.

Using static option to create a demo for github pages

in conjuction with gh-pages, creating a demo is as simple as this:

ceri-dev-server --static static/ && gh-pages -d static

just make sure you include the static folder in your .gitignore

Setting up webpack

This is the default loaders list:

module:
  rules: [
      { test: /\.woff(\d*)\??(\d*)$/, use: "url-loader?limit=10000&mimetype=application/font-woff" }
      { test: /\.ttf\??(\d*)$/,    use: "file-loader" }
      { test: /\.eot\??(\d*)$/,    use: "file-loader" }
      { test: /\.svg\??(\d*)$/,    use: "file-loader" }
      { test: /\.css$/, use: ["style-loader","css-loader"] }
      { test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"]}
      { test: /\.styl$/, use: ["style-loader","css-loader","stylus-loader"]}
      { test: /\.html$/, use: "html-loader"}
      { test: /\.coffee$/, use: "coffee-loader"}
      {
        test: /\.(js|coffee)$/
        use: "ceri-loader"
        enforce: "post"
        exclude: /node_modules/
      }
  ]

If you need you own, put a webpack.config.js /.coffee/.json in the project folder, it will get merged for the dev server as well as for karma.

Not all of the loaders are marked as a dependency, if you want to use them you need to install them:

# coffee
npm install --save-dev coffee-script coffee-loader
# sass
npm install --save-dev node-sass sass-loader
# stylus
npm install --save-dev stylus stylus-loader

Additional info

You can create a npm script in your package.json, "scripts": {"dev": "ceri-dev-server", "test": "ceri-dev-server --test"}. Then you can call it by npm run dev or npm test