Angular Starter

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

	Project Information
Live Demo
Develop Branch
Master Branch
Npm Package

Getting Started
Key Features
Dockerization
Configuration
Directory Structure

Getting Started

Follow steps to execute this boilerplate.

Clone this boilerplate

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

Install dependencies

$ yarn install

Start a local server

$ yarn serve

Compile and bundle code

$ yarn build

Check code quality

$ yarn lint

Runs unit tests

$ yarn unit

Runs end-to-end tests

$ yarn e2e

Key Features

This seed repository provides the following features:

Dockerization

Dockerize an application.

Build and run the container in the background

$ docker-compose up -d <SERVICE>

Run a command in a running container

$ docker-compose exec <SERVICE> <COMMAND>

Remove the old container before creating the new one

$ docker-compose rm -fs

Restart up the container in the background

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

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>

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

Shyam-Chen/Angular-Starter