angularjs-webpack-seed (seed-webapp-1.0)

AngularJS 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.

Tooling

The following tools are used in the application

• AngularJS - as the Front-End framework
• Webpack - Module loader / bundler, primary build tool
• Node LTS - local development and build time JavaScript runtime
• Yarn - package manager for build and application dependencies

Links

• Repository (Github)- TODO: your-link-here
• Issue Tracker (JIRA) - TODO: your-link-here
• Documentation (Confluence) - TODO: your-link-here
• Continuous Integration (Jenkins) - TODO: your-link-here
• Development Environment - TODO: your-link-here
• Production Enviornment - TODO: your-link-here

Project Setup

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:

• Git (can show changed lines in the gutter when viewing a file)
• EditorConfig
• gitignore
• Sass
• NodeJS

Installation

1. If you don't already have it, download and install NodeJS (which comes with NPM)
2. This project favors Yarn, so make sure you have the expected version by installing it after installing Node

$ npm install -g yarn@^1.0.0

3. Now install the build and application dependencies by running

$ yarn install

Project Layout

An overview of important files and configurations for the applications

Root Files

Also know as "dot" files, these are the build and build configuration files for the application

• bin/ - shell scripts for continuous and build environments
• .editorconfig - configuration file for EditorConfig IDE plugin
• .eslintrc - configuratin file for ESLint
• package.json - dependency configuration file, for project related dependencies and defines all runnable scripts and commands
• webpack.config.common.js - webpack config for managing shared webpack configurations
• webpack.config.develop.js - webpack config for local development
• webpack.config.prod.js - webpack config for production builds

Application Files

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.

• src - application code
• src/components/ - resusable UI features, typically directives. A BootstrapComponent has been designated to manage starting up the application, from index.js
• src/services/ - APIs for handling backend REST APIs or browser APIs, non UI related "helpers"
• src/views/ - routable states ("pages"), generally exposed with class controllers
• src/index.html - main layout of the application
• src/index.js - main entry way into the application and pulls in the application's BootstrapComponent
• src/routes.js - routes for the application, maps to different views
• src/vendor.js - vendor files from node_modules

Tasks

This project uses Webpack as the build tool, executed via NPM scripts. All available tasks are in the scripts section of package.json

Development

This will start up a Node (Express) server which watches for changes and "redeploys" as needed.

$ yarn run develop

Production

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

Testing is an important part of software development. There are three types of automated testing supported:

1. Unit - Used for testing discrete pieces of code in an isolated environemnt (i.e. mocked dependencies). Ideal for testing services and componengs.
2. Integration - Often we want to test how components and services behavior together without mocking. Integration testing is ideal for testing our view components.
3. E2E - End-to-End testing uses real browsers (often multiple) and aims to simulate real user ineractions with the application. This is done to validate our critical User Stories.

To run unit and integration tests, run

$ yarn run test

Continuous Integration / Delivery

TODO Document Your Continuous Integration Environment Here

Serve / Run

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.

Dependency Management

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

$ yarn add <package-name>

Continuous Integration

//TODO Document Your Continuous Integration Environment Here

Release Procedure

//TODO Document Your Release Procedure Here

AWS Info

//TODO Document Your AWS Info here (NO CREDENTIALS!!!!)

• s3 bucket -
• cloudfront distribution -