# Home

# Angluar 4.0 Template Project

I use this template as a starter for any new Angular projects.

Check out the demo

#### Features

- Angular Universal (prerendering)
- Pug templates instead of HTML
- Bootstrap Sass
- Font Awesome
- Angular HTML5 Router
- Standard navbar/body layout

## Running the Demo

#### Install

    npm install

#### Run (development mode)

Start the server on port 3000:

    npm run start

#### Build (production)

Build everything and put it in the `dist/` folder:

    npm run build

Or build for GitHub pages by copying `dist/browser` to `docs/`. Be sure to change the settings in your repo to point GitHub pages to the `docs/` folder on the `master` branch.

## Customizing

### Base href

The app uses the base href `/` for development builds, and `/angular4-template` for production builds (to accomodate GitHub pages, which uses the repository name in the URL's path). You will probably want to change the base href in `./src/environments/environment.prod.ts`.

### Prerendering

Prerendering is a performance optimization - your page's HTML is generated at build time, so the user sees a near-instant load of the page, while Angular loads in the background.

In this build, only the homepage is prerendered - you can add other routes by editing `./static.paths.ts`.

## New Components

A helper script for creating new components is in `./scripts/new-component.js`.

    node ./scripts/new-component.js --name "Widget Viewer"