nimedev/ng-seed

A starting point for building web applications with Angular using Webpack and PostCSS

NG Seed

A starting point for building web applications with Angular using ejected angular-cli application and PostCSS.

Table of Contents

1. Prerequisites
2. Install dependencies
3. Workflow
4. Style Guides
5. Contributing
6. Changelog
7. Licencse

Prerequisites

• Node.js.
• npm, installed with Node.js.

Install dependencies

1) Check Node.js version.

node --version

The version should be at or above 8.6

If you don't have Node.js installed go to nodejs and install the appropiate version or use nvm (Recommended).

2) Check npm version.

npm --version

The version should be at or above 5.0.0

Update npm version

npm install -g npm

Workflow

1. Angular CLI
2. Environment variables
3. Development workflow
4. Production workflow
5. Handle dependencies
6. Testing

Angular CLI

This scaffolding use use and ejected app of angular-cli and some scripts have been rewritten:

• To use ng serve go to development workflow
• To use ng build go to production workflow
• To use ng test and ng e2e go to testing
• To use ng lint go to style guides

Environment variables

##
# ng-seed environment variables
##

# Host configuration
## Environment for server.
export NODE_ENV="development"
## Host of webapplication.
export NG_SEED_HOST=localIP
## Port of webapplication (Use in development).
export NG_SEED_PORT=4200

You can copy this script in bashrc file, modify the variables and delete variables that don't need modification or are undefined.

To change any of this variables:

export NG_SEED_PORT=8000

Development workflow

Install the workspace dependencies.

# cd to project folder
npm install

Static server with live reload

Create a server using webpack-dev-server to serve the application in development environment. The browser reloads the app when any file change:

# cd to project folder
npm start

After run the script, a message indicate the url to run the application in a browser.

Production workflow

# cd to project folder
npm run build

After run this script the dist folder is ready for production.

Handle dependencies

Follow this rules to update dependencies:

• Install dependencies

# To install production dependencies
# cd to project folder
npm install @angular/core

# To install development dependencies
# cd to project folder
npm install eslint -D

• Uninstall dependencies

# cd to project folder
npm uninstall @angular/core

• Check outdated dependencies

# cd to project folder
npm outdated --long

• To Upgrade any dependencies follow Uninstall dependencies step and install again like Install dependencies.

Testing

Running unit tests

npm test

Running end-to-end tests

First start the development server

npm start

Then run the end to end tests in another terminal

npm run e2e

Style Guides and Linters configuration

For TypeScript use TSLint and codelyzer. Check the tslint configuration file.

For JavaScript use JavaScript Standard Style.

For CSS use stylelint as linter, PostCSS to transform some CSS and SuitCSS naming conventions. Check the stylelint configuration file and postcss configuration file.

To run linters in console type:

# Run all linters
npm run lint

# Run only stylelint
npm run lint:css

# Run only standard for js files
npm run lint:js

# Run only tslint for ts files
npm run lint:ts

Contributing

Changelog

License