maroy1986 and AshleyGrant chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f…
…ixes #870

* chore(update) Update skeleton-esnext-webpack to Bootstrap 4.1.0.

* chore(update) Update skeleton-typescript-webpack-ssr to Bootstrap 4.1

* Update AppVeyor NodeJS to 8, force refresh of Jest snapshot.

* Update Jest Snapshot with running command with Yarn

* Update welcome.html which was somehow left out of previous commits...
Latest commit 4cd4138 Apr 18, 2018
Permalink
..
Failed to load latest commit information.
.vscode feat(webpack): update the esnext skeleton to match Apr 8, 2017
src chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
static chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
test chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
.babelrc fix(esnext-webpack): downgrade babel to stable, update dependencies a… Jun 11, 2017
.babelrc.js fix(esnext-webpack): downgrade babel to stable, update dependencies a… Jun 11, 2017
.editorconfig Webpack skeleton fixes (#708) Nov 9, 2016
.eslintrc.json style(package): ES2016 eslint support (#704) Nov 1, 2016
.gitignore feat(webpack): rename karma coverage folder and enable jest coverage May 7, 2017
.yarnrc fix(esnext-webpack): downgrade babel to stable, update dependencies a… Jun 11, 2017
README.md doc(esnext-webpack): fix typos Apr 30, 2017
index.ejs feat(webpack): update the esnext skeleton to match Apr 8, 2017
jsconfig.json feat(webpack): use 'baseUrl' for cleaner, non-relative imports May 7, 2017
package-lock.json chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
package-scripts.js feat(webpack): upgrade to Webpack 3 and other dependencies Jul 17, 2017
package.json chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
webpack.config.js chore(update) - Update remaining Webpack skeletons to Bootstrap 4.1.0 f… Apr 18, 2018
yarn.lock feat(webpack): upgrade to Webpack 3 and other dependencies Jul 17, 2017

README.md

aurelia-skeleton-webpack

Getting started

Before you start, make sure you have a recent version of NodeJS environment >=6.0 with NPM 3 or Yarn.

From the project folder, execute the following commands:

npm install # or: yarn install

This will install all required dependencies, including a local version of Webpack that is going to build and bundle the app. There is no need to install Webpack globally.

To run the app execute the following command:

npm start # or: yarn start

This command starts the webpack development server that serves the build bundles. You can now browse the skeleton app at http://localhost:8080 (or the next available port, notice the output of the command). Changes in the code will automatically build and reload the app.

Running with Hot Module Reload

If you wish to try out the experimental Hot Module Reload, you may run your application with the following command:

npm start -- webpack.server.hmr

Feature configuration

Most of the configuration will happen in the webpack.config.js file. There, you may configure advanced loader features or add direct SASS or LESS loading support.

Bundling

To build an optimized, minified production bundle (output to /dist) execute:

npm start -- build

To build

To test either the development or production build execute:

npm start -- serve

The production bundle includes all files that are required for deployment.

Running The Tests

This skeleton provides three frameworks for running tests.

You can choose one or two and remove the other, or even use all of them for different types of tests.

By default, both Jest and Karma are configured to run the same tests with Jest's matchers (see Jest documentation for more information).

If you wish to only run certain tests under one of the runners, wrap them in an if, like this:

if (jest) {
  // since only jest supports creating snapshot:
  it('should render correctly', () => {
    expect(document.body.outerHTML).toMatchSnapshot();
  });
}

Jest + Jasmine 2

Jest is a powerful unit testing runner and framework. It runs really fast, however the tests are run under NodeJS, not the browser. This means there might be some cases where something you'd expect works in reality, but fails in a test. One of those things will be SVG, which isn't supported under NodeJS. However, the framework is perfect for doing unit tests of pure functions, and works pretty well in combination with aurelia-testing.

To create new Jest tests, create files with the extension .spec.js, either in the src directory or in the test/unit directory.

To run the Jest unit tests, run:

npm test

To run the Jest watcher (re-runs tests on changes), run:

npm start -- test.jest.watch

Karma + Jasmine 2

Karma is also a powerful test runner, which by default runs in the browser. This means that whatever works in real browsers, should also work the same way in the unit tests. But it also means the framework is heavier to execute and not as lean to work with.

To ease transitioning between Jest and Karma, Jasmine 2 is configured with Jest's matchers.

To create new Karma tests, create files with the extension .spec.js, either in the src directory or in the test/unit directory.

To run the Karma unit tests, run:

npm start -- test.karma

To run the Karma watcher (re-runs tests on changes), run:

npm start -- test.karma.watch

Protractor (E2E / integration tests)

Integration tests can be performed with Protractor.

  1. Place your E2E-Tests into the folder test/e2e and name them with the extension .e2e.js.

  2. Run the tests by invoking

npm start -- e2e

Running all test suites

To run all the unit test suites and the E2E tests, you may simply run:

npm start -- test.all