webpack-vue-demo

A very basic but complete demo project that use VueJs as front-end framework (with Vue-resource, Vue-router and VueX), Babel for ES6/ES7 transpilation, Webpack2 as module bundler, SASS as CSS preprocessor, Karma, Mocha and Chai for unit tests, nightwatch for e2e tests and finally Istanbul for code coverage.

Table of contents

• Quick Start
• Install
• Usage
  • Development
  • Building
  • Testing
    • Unit tests
    • E2E tests
    • Coverage
  • Continuous integration
• License

Quick Start

$ git clone --depth 1 https://github.com/phiphou/webpack-vue-demo.git
$ cd webpack-vue-demo
$ npm install
$ npm run start

Your default browser should open at http://127.0.0.1:8080, then you can start developing in ./src/app/main.js

Install

First, make sure you've got NodeJS installed. If not, go to nodejs.org to download and install it. It will also install NPM.

If everything is ok, node -v should print your node version and npm -v should print NPM's one. Minimum requirements for this project are node >= 5.x.x and NPM >= 3.x.x.

Then, clone or fork this repo and run npm install to install the application.

$ git clone https://github.com/phiphou/webpack-vue-demo.git
$ cd webpack-vue-demo
$ npm install

Dependencies will be installed in the ./node_modules folder.

You can also use the new Yarn package manager (and should have a look on it if you don't know it).

$ yarn

Usage

Start developping

Dive into development right now by just running:

$ npm run start

This will pre-build the application, start webpack's dev server and open your browser at http://127.0.0.1:8080. Then, have a look at ./src/app/main.js.

Building

You can build the app and get a "ready to deploy" release by just running:

$ npm run prod

You'll find your build in the ./dist directory

Testing

Unit-tests

Karma is used as test-runner, you can configure it in the ./config/karma/karma.conf.js file.

You can run tests by just typing :

$ npm run test

Tests are written in ES6 for Mocha and use Chai and chai-as-promised.

Unit-tests are located in the ./test/unit/ folder and reports are available in the ./reports/unit folder, in JUnit format and HTML report.

E2E-tests

NightwatchJs is used as E2E-tests test-runner, you can configure it in the ./config/nightwatch.js file.

E2E-tests are located in the ./test/e2e/ folder.

You can run e2e tests by just typing :

$ npm run e2e

Chrome browser is used as default config, but you can override this by running:

$ npm run e2e -- --env [chrome],[firefox]

Reports are available in the ./reports/e2e folder in JUnit format and HTML report. In case of failed test(s), you'll find screenshots in the ./reports/e2e/screenshots folder.

Code coverage

Istanbul is used as code coverage tool. You can configure it in the ./config/karma/karma.conf.js file.

It will produce reports you'll find in the ./reports/coverage/[browser_name]/ folder (index.html) each time you run unit-tests.

It will also generate LCOV format report in the ./reports/coverage/[browser_name] folder.

Continuous integration

CircleCI is used for continuous integration, Codecov as code coverage tool and SauceLabs for cloud cross-browsers testing.

See ./circleci.yml and badges at the top of this document.

License

This project is licensed under the terms of the MIT license.