AngularNest Fullstack Starter

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

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/AngularNest-Fullstack-Starter <PROJECT_NAME>
$ cd <PROJECT_NAME>

Install dependencies

$ yarn install

Set an active project for working direct

$ yarn firebase use development

Start a local server

# front-end
$ yarn start:app

# back-end
$ yarn start:api

Compile and bundle code

# front-end
$ yarn build:app

# back-end
$ yarn build:api

Check the code quality

# front-end
$ yarn lint:app

# back-end
$ yarn lint:api

Run the unit tests

# front-end
$ yarn test:app

# back-end
$ yarn test:api

Run the end-to-end tests

# front-end
$ yarn e2e:app

# back-end
$ yarn e2e:api

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
+ Dockerfile.dev
+ Dockerfile.prod
  *.log

$ docker login
$ docker build -f tools/Dockerfile.<dev|prod> -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|prod>:
-   image: <dev|prod>
-   build:
-     context: .
-     dockerfile: tools/Dockerfile.<dev|prod>
+   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": "<PROJECT_NAME>",
    "production": "<PROJECT_NAME>"
  }
}

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.FIREBASE_CONFIG = process.env.FIREBASE_CONFIG || {
    apiKey: process.env.FIREBASE_API_KEY || '<API_KEY>',
    authDomain: process.env.FIREBASE_AUTH_DOMAIN || '<FIREBASE_AUTH_DOMAIN>',
    databaseURL: process.env.FIREBASE_DATABASE_URL || '<FIREBASE_DATABASE_URL>',
    projectId: process.env.FIREBASE_PROJECT_ID || '<FIREBASE_PROJECT_ID>',
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET || '<FIREBASE_STORAGE_BUCKET>',
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID || '<FIREBASE_MESSAGING_SENDER_ID>',
  };

  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/Dockerfile.<dev|prod>

# 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/Dockerfile.<dev|prod>

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

Directory Structure

The structure follows the LIFT Guidelines.

.
├── src
│   ├── api
│   │   ├── __tests__
│   │   │   └── ...
│   │   ├── _<THING>  -> api of private things
│   │   │   └── ...
│   │   ├── core  -> core feature module
│   │   │   └── ...
│   │   ├── <FEATURE>  -> feature modules
│   │   │   ├── __tests__
│   │   │   │   ├── <FEATURE>.controller.spec.ts
│   │   │   │   └── <FEATURE>.e2e-spec.ts
│   │   │   ├── _<THING>  -> feature of private things
│   │   │   │   └── ...
│   │   │   ├── <FEATURE>.controller.ts
│   │   │   ├── <FEATURE>.module.ts
│   │   │   └── <FEATURE>.service.ts
│   │   ├── <GROUP>  -> module group
│   │   │   └── <FEATURE>  -> feature modules
│   │   │       ├── __tests__
│   │   │       │   ├── <FEATURE>.controller.spec.ts
│   │   │       │   └── <FEATURE>.e2e-spec.ts
│   │   │       ├── _<THING>  -> feature of private things
│   │   │       │   └── ...
│   │   │       ├── <FEATURE>.controller.ts
│   │   │       ├── <FEATURE>.module.ts
│   │   │       └── <FEATURE>.service.ts
│   │   ├── graphql
│   │   │   ├── <FEATURE>  -> feature modules
│   │   │   │   ├── __tests__
│   │   │   │   │   └── ...
│   │   │   │   ├── _<THING>  -> feature of private things
│   │   │   │   │   └── ...
│   │   │   │   └── ...
│   │   │   └── <GROUP>  -> module group
│   │   │       └── <FEATURE>  -> feature modules
│   │   │           ├── __tests__
│   │   │           │   └── ...
│   │   │           ├── _<THING>  -> feature of private things
│   │   │           │   └── ...
│   │   │           └── ...
│   │   ├── shared  -> shared feature module
│   │   │   └── ...
│   │   ├── api.controller.ts
│   │   ├── api.module.ts
│   │   └── api.service.ts
│   ├── app
│   │   ├── __tests__
│   │   │   └── ...
│   │   ├── _<THING>  -> app of private things
│   │   │   └── ...
│   │   ├── core  -> core feature module
│   │   │   └── ...
│   │   ├── <FEATURE>  -> feature modules
│   │   │   ├── __tests__
│   │   │   │   ├── <FEATURE>.component.spec.js
│   │   │   │   └── <FEATURE>.e2e-spec.js
│   │   │   ├── _<THING>  -> feature of private 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 things
│   │   │       │   └── ...
│   │   │       ├── <FEATURE>.component.css
│   │   │       ├── <FEATURE>.component.html
│   │   │       ├── <FEATURE>.component.ts
│   │   │       └── <FEATURE>.module.ts
│   │   ├── shared  -> shared feature module
│   │   │   └── ...
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets  -> datas, fonts, images, medias, styles
│   │   └── ...
│   ├── client.ts
│   ├── index.html
│   └── server.ts
├── tools
│   └── ...
├── .editorconfig
├── .firebaserc
├── .gitignore
├── .postcssrc
├── .stylelintrc
├── Dockerfile
├── LICENSE
├── README.md
├── circle.yml
├── docker-compose.yml
├── env.js
├── firebase.json
├── gulpfile.js
├── jest.config.js
├── package.json
├── tsconfig.api.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.test.json
├── tslint.json
├── webpack.config.js
└── yarn.lock

whjvenyl / angularnest-fullstack-starter Goto Github PK