- Install NodeJS
- Open your Terminal and navigate to the project folder
- To get all app prerequisites run
$ npm install
Before you start, make sure you have a recent version of NodeJS environment >=4.0 with NPM 3.
From the project folder, execute the following commands:
npm 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
This command starts the webpack development server that serves the build bundles. You can now browse the skeleton app at http://localhost:9000. Changes in the code will automatically build and reload the app.
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.
To build a development bundle (output to /dist) execute:
npm run build
To build an optimized, minified production bundle (output to /dist) execute:
npm run build:prod
To test either the development or production build execute:
npm run server:prod
The production bundle includes all files that are required for deployment.
You may want to separate out parts of your code to other files.
This can be done by specifying a build resource object inside package.json
.
For example, if you wanted to lazy-load the /users path of the skeleton you could define it as follows:
// (package.json)
"aurelia": {
"build": {
"resources": [
{
"path": "users",
"bundle": "users",
"lazy": true
}
]
}
},
The "path" field can be either a string or an array of strings.
The string should be a path, relative to the src or in case of an external resource, as a require path (e.g. aurelia-plugin/some-resource.html
).
.js
, .ts
and .html
extensions are optional and will be resolved automatically.
The bundle setting is recursive, therefore any files required by the specified path will also be contained by the bundle, unless they are also contained by another one (iteration is done from first to last resource).
Resources must also be specified in case Aurelia is supposed to load an external file or an external module that was not defined as a resource by any of the dependencies. Since the syntax is still relatively new, most Aurelia plugins don't define their resources. There might also be reasons not to declare those resources, in case the plugin is to be consumed only partially. If you'd like to use external resources, you should declare them yourself, like so:
// (package.json)
"aurelia": {
"build": {
"resources": [
"aurelia-some-ui-plugin/dropdown",
"aurelia-some-ui-plugin/checkbox"
]
}
},
You can also combine both features to separate out plugins or resources for lazy-loading:
// (package.json)
"aurelia": {
"build": {
"resources": [
{
"path": "aurelia-animator-css",
"bundle": "animator",
"lazy": true
},
{
"path": [
// lets say we only use the checkbox from within subpage1
// we want those to be bundled together in a bundle called: "subpage1"
"aurelia-some-ui-plugin/checkbox",
"./items/subpage1"
],
"bundle": "subpage1",
"lazy": true
},
"aurelia-some-ui-plugin/dropdown"
]
}
},
Please see https://github.com/aurelia/webpack-plugin for more information.
To run the unit tests:
npm run test
Integration tests are performed with Protractor.
-
Place your E2E-Tests into the folder
test/e2e/src
-
Run the tests by invoking
npm run e2e
- Make sure your app runs and is accessible
WEBPACK_PORT=19876 npm start
- Once bundle is ready, run the E2E-Tests in another console
npm run e2e:start
There is a configuration management in place. Three standart environments are already set (devlopment, test and production).
You can also add more environments with --env <env-name>
but there is a catch: You have to add --
for each npm command you
run throw so if your like to set the evnirnment for npm start
you have to do this like so:
npm start -- -- --env <json-file-name-without-extension>
This because npm start
runs npm run server:dev
and then the target command, so we have to to pass the --env
by providing two times --
.
You can find the configurations in <root>/environment
.
By default pushState, also known as html5 routing, is enabled. The Webpack server is already configured to handle this but many webserver need extra confuration to enable this.
Initiate cordova with the following commands:
npm install -g cordova
npm run cordova:init
Finally add the following code just before the </body>
closing tag:
<!-- Cordova -->
<script src="cordova.js"></script>
Cordova has a issue in the way they serve the source code files to the WebView in the platforms. So we have to remove/alter the following code to make sure everything works in cordova.
Remove the following line in src/index.ejs
12: <base href="<%= htmlWebpackPlugin.options.baseUrl %>">
Remove the following line in src/app/app.ts
8: config.options.pushState = true;
Cordova takes the www
folder source to create the Cordova app. This www
folder is a symlink to the dist
folder.
So make sure you run for example npm run build
first before runing/buildinga Cordova app.