Skip to content

project setup

Jump to bottom
benholloway edited this page Jun 22, 2016 · 7 revisions

Please read in full. Failure to configure any one of the following may leave you with a broken project.

For new projects, refer to conventions and ensure you understand how compositions are defined:

  • create an /app directory

For existing projects, you may delete the redundant files:

  • angularity.json

Ensure you add or amend the following files as detailed below:

  • For each composition in your /app directory

  • index.html

  • In your project root

  • package.json

  • webpack.config.js

  • .babelrc

index.html

The injection tags have changed slightly. Your file should look like this.

<html>
  <head>
    <!-- inject:css -->
    <!-- endinject -->
  </head>

  <body>
    <!-- inject:js -->
    <!-- endinject -->
  </body>
</head>

For existing compositions, the changes may be summarised as:

  • Remove bower:css
  • Remove bower:js

package.json

Usage is typically per npm scripts.

We suggest the following scripts for most projects.

{
  "scripts": {
    "build": "webpack --progress",
    "build-unminified": "cross-env UNMINIFIED=true webpack --progress",
    "watch": "webpack --watch",
    "watch-unminified": "cross-env UNMINIFIED=true webpack --watch",
    "release": "cross-env MODE=release webpack --progress"
  }
}

Based on installation instructions you should also have dependencies similar to the following.

{
  "devDependencies": {
    "webpack-angularity-solution": "^1.0.0",
    "babel-plugin-add-module-exports": "^0.1.1",
    "babel-preset-es2015": "^6.3.13"
  }
}

Some explanation:

  • BabelJS

    You may be able to omit the BabelJS dependencies if you have not been writing ES6 javascript.

  • cross-env

    Any setting passed to cross-env corresponds to environment variables. By convention they are UPPERCASE. These environment variables are private to the executable that follows so you don't need to worry about name conflicts across different projects.

webpack.config.js

Create a Webpack configuration file that delegates to the webpack-angularity-solution package.

The following is pro-forma and for many projects.

/* global process:true */

var angularity = require('webpack-angularity-solution');

const PORT    = 55555,
      GLOBALS = {
        $              : 'jquery',
        jQuery         : 'jquery',
        'window.jQuery': 'jquery'
      };

module.exports = angularity({globals: GLOBALS, port: PORT}, process.env)
  .include(process.env.MODE) // app|test|release
  .otherwise('app,test')	 // run app+test if MODE is unspecified
  .resolve();

Refer to configuration and the options reference for more detail.

At minimum you will need the following customisations on every project.

  • Option globals

    Note that there are no globals in applications bundled by Webpack. If your code relies on globals such as jQuery, you will have to configure the globals option as shown above.

    Add additional globals as required by your application.

    Better practice may be to solve the problem at its source using module shimming.

  • Option port

    By default --watch in the app mode will launch a BrowserSync server on port 55555. You should override this port to some unique value so that your projects to no conflict with each other.

.babelrc

If you are compiling future Javascript down to to current javascript you will need to configure BabelJS with the features you desire.

Angularity has traditionally supported ES6 (now es2015) so we will use that as an example. Also note that the Babel default export behaviour has changed so we will be use babel-plugin-add-module-exports so that require() statements yeild the default export.

Both of these aspects were installed above as devDependencies so we can now create a babel-js configuration file that uses them.

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "add-module-exports"
  ]
}
Clone this wiki locally