Angular Starter

🐯 A boilerplate for Angular, Material, TypeScript, and ReactiveX.

	Project Information
Live Demo
Develop Branch
Master Branch
Npm Package

Table of Contents

• Getting Started
• Key Features
• Dockerization
• Configuration
• Directory Structure

Getting Started

Follow steps to execute this boilerplate.

1. Clone this boilerplate

$ git clone --depth 1 https://github.com/Shyam-Chen/Angular-Starter <PROJECT_NAME>
$ cd <PROJECT_NAME>

2. Install dependencies

$ yarn install

3. Start a local server

$ yarn serve

4. Compile and bundle code

$ yarn build

5. Check code quality

$ yarn lint

6. Runs unit tests

$ yarn unit

7. Runs end-to-end tests

$ yarn e2e

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• [x] Angular
• [x] Angular Material
• [x] ReactiveX
• [x] NGXS
• [ ] Ngx Translate
• [ ] Apollo GraphQL
• ---------- Tools ----------
• [x] Webpack
• [x] TypeScript
• [x] PostCSS
• [x] TSLint
• [x] StyleLint
• [x] Jest
• [x] Puppeteer
• ---------- Environments ----------
• [x] Firebase
• [x] CircleCI
• [x] Codecov
• [x] Docker

Dockerization

Dockerize an application.

1. Build and run the container in the background

$ docker-compose up -d <SERVICE>

2. Run a command in a running container

$ docker-compose exec <SERVICE> <COMMAND>

3. Remove the old container before creating the new one

$ docker-compose rm -fs

4. Restart up the container in the background

$ docker-compose up -d --build <SERVICE>

5. Push images to Docker Cloud

# .gitignore

  .DS_Store
  node_modules
  npm
  public
  functions
  coverage
+ dev.Dockerfile
+ stage.Dockerfile
+ prod.Dockerfile
  *.log

$ docker login
$ docker build -f tools/<dev|stage|prod>.Dockerfile -t <IMAGE_NAME>:<IMAGE_TAG> .

# checkout
$ docker images

$ docker tag <IMAGE_NAME>:<IMAGE_TAG> <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
$ docker push <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>

# remove
$ docker rmi <REPOSITORY>:<TAG>
# or
$ docker rmi <IMAGE_ID>

6. Pull images from Docker Cloud

# docker-compose.yml

  <dev|stage|prod>:
-   image: <dev|stage|prod>
-   build:
-     context: .
-     dockerfile: tools/<dev|stage|prod>.Dockerfile
+   image: <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
    volumes:
      - yarn:/home/node/.cache/yarn
    tty: true

Configuration

Project environments

Change to your project.

// .firebaserc
{
  "projects": {
    "development": "<DEV_PROJECT_NAME>",
    "staging": "<STAGE_PROJECT_NAME>",
    "production": "<PROD_PROJECT_NAME>"
  }
}

Set an active project for working direct

$ yarn firebase use development

Default environments

Set your local environment variables. (use this.<ENV_NAME> = process.env.<ENV_NAME> || <LOCAL_ENV>;)

// env.js
function Environments() {
  this.NODE_ENV = process.env.NODE_ENV || 'development';

  this.PROJECT_NAME = process.env.PROJECT_NAME || '<PROJECT_NAME>';

  this.HOST_NAME = process.env.HOST_NAME || '0.0.0.0';

  this.SITE_PORT = process.env.SITE_PORT || 8000;
  this.SITE_URL = process.env.SITE_URL || `http://${this.HOST_NAME}:${this.SITE_PORT}`;

  this.FUNC_PORT = process.env.FUNC_PORT || 5000;
  this.FUNC_URL = process.env.FUNC_URL || `http://${this.HOST_NAME}:${this.FUNC_PORT}/${this.PROJECT_NAME}/us-central1`;

  this.APP_BASE = process.env.APP_BASE || '/';

  this.GOOGLE_ANALYTICS = process.env.GOOGLE_ANALYTICS || '<GOOGLE_ANALYTICS>';

  this.SENTRY_DSN = process.env.SENTRY_DSN || null;
  this.RENDERTRON_URL = process.env.RENDERTRON_URL || null;
}

Deployment environment

Set your deployment environment variables.

# tools/<dev|stage|prod>.Dockerfile

# envs --
ENV SITE_URL <SITE_URL>
ENV FUNC_URL <FUNC_URL>
# -- envs

CI environment

Add environment variables to the CircleCI build.

CODECOV_TOKEN
DOCKER_PASSWORD
DOCKER_USERNAME
FIREBASE_TOKEN

SEO friendly

Enable billing on your Firebase Platform and Google Cloud the project by switching to the Blaze plan.

Serve dynamic content for bots.

// firebase.json
    "rewrites": [
      {
        "source": "**",
-       "destination": "/index.html"
+       "function": "app"
      }
    ],

Deploy rendertron instance to Google App Engine.

$ git clone https://github.com/GoogleChrome/rendertron
$ cd rendertron
$ gcloud auth login
$ gcloud app deploy app.yaml --project <RENDERTRON_NAME>

Set your rendertron instance in deployment environment.

# tools/<dev|stage|prod>.Dockerfile

# envs --
ENV RENDERTRON_URL <RENDERTRON_URL>
# -- envs

Directory Structure

The structure follows the LIFT Guidelines.

.
├── functions
│   ├── index.js
│   ├── package.json
│   └── yarn.lock
├── src
│   ├── __tests__
│   │   └── ...
│   ├── _<THING>  -> app of private or protected things
│   │   └── ...
│   ├── assets  -> datas, fonts, images, medias, styles
│   │   └── ...
│   ├── core  -> core feature module
│   │   └── ...
│   ├── <FEATURE>  -> feature modules
│   │   ├── __tests__
│   │   │   ├── <FEATURE>.component.spec.js
│   │   │   └── <FEATURE>.e2e-spec.js
│   │   ├── _<THING>  -> feature of private or protected things
│   │   │   └── ...
│   │   ├── <FEATURE>.component.css
│   │   ├── <FEATURE>.component.html
│   │   ├── <FEATURE>.component.ts
│   │   └── <FEATURE>.module.ts
│   ├── <GROUP>  -> module group
│   │   └── <FEATURE>  -> feature modules
│   │       ├── __tests__
│   │       │   ├── <FEATURE>.component.spec.js
│   │       │   └── <FEATURE>.e2e-spec.js
│   │       ├── _<THING>  -> feature of private or protected things
│   │       │   └── ...
│   │       ├── <FEATURE>.component.css
│   │       ├── <FEATURE>.component.html
│   │       ├── <FEATURE>.component.ts
│   │       └── <FEATURE>.module.ts
│   ├── shared  -> shared feature module
│   │   └── ...
│   ├── app-routing.module.ts
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── index.html
│   └── main.ts
├── tools
│   └── ...
├── .editorconfig
├── .firebaserc
├── .gitignore
├── .postcssrc
├── .stylelintrc
├── Dockerfile
├── LICENSE
├── README.md
├── circle.yml
├── docker-compose.yml
├── env.js
├── firebase.json
├── jest.config.js
├── package.json
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── yarn.lock