Angular 2 and Webpack Seed Project for The Greenhouse, as a template / starter project for frontend web applications. This is a simple starter project meant to get you up and running as fast as possible with a full local and production build with all the tools working together and as minimal friction and configuration as possible. Simply clone the repo and edit the files as needed to match your project.
This was based on the excellent starter AngularClass/angular2-webpack-starter as well as many other resources around the internet.
Note:
A principal motivation in the direction and maintenance of this starter repo will be in support of adoption of latest standards and specifications of ECMAScript. For example, the decision to adopt Webpack was done with the understanding that ES6 imports
and the System specification would be supported in the 2.0 release. This project will always strive to work as close to the spec as possible to ensure the least amount of tools get in the way between your user's browser and the source code written.
//TODO - discuss environment variables, continuous integration, AWS keys, build scripts
The following tools are used in the application
Note: It is recommended that a Javascript based IDE is used, like Webstorm, as they have a lot of the code quality and syntax tooling supported as plugins, often times right out of the box.
Recommended plugins to have are:
$ npm install -g yarn@^1.0.0 // may need sudo
$ yarn --version
1.1.0
$ yarn install
An overview of important files and configurations for the applications
Also know as "dot" files, these are the build and build configuration files for the application
Application code, including unit tests. Directories are intended to be kept as flat as possible with a B.O.F. (birds of a feather) organization.
@NgModule
)This project uses Webpack as the build tool, executed via NPM scripts. All available tasks are in the scripts
section of package.json
This will start up Webpack's Dev Server which watches for changes and "redeploys" as needed.
$ yarn run develop
See it in a browser by opening up (should be automatic)
http://localhost:1981/
Note: This task exports NODE_ENV=development
This is the production build task for the project. It is used prior to deploying to an environment and builds a production version of the application.
$ yarn run build
Testing is an important part of software development. There are three types of automated testing supported:
To run unit and integration tests, run
$ yarn run test
For CI / CD, the production task is combined with the testing task with whatever other relevant post task is needed for that specific job's responsibility
$ export NODE_ENV=production
$ yarn run test
$ yarn run build
To serve a production build locally, like for a demo run:
$ yarn run serve
Note: it is recommended you run this command from the master branch or a tag. By Default this proxies with the webpack-dev-server proxy.
Build packages (like Webpack) are installed through Yarn into package.json, using
$ yarn add <package-name> --dev
Dependencies for the application (like Angular) are installed by running
$ npm add <package-name>
//TODO Document Your Continuous Integration Environment Here
//TODO Document Your Release Procedure Here
//TODO Document Your AWS Info here (NO CREDENTIALS!!!!)