Minimal MEAN:

Full-Stack TypeScript

2

Doguhan Uluca

Technical Fellow

Excella

😰

🤮

🤬

😱

😎

Doguhan Uluca

@duluca

linkedin.com/in/duluca

  1. Shipping Code
  2. Choosing of the Right Stack
  3. Anatomy of Minimal MEAN
  4. Code Demo
  5. GitHub Flow 
  6. Anatomy of the Dockerfile
  7. How to configure CircleCI

  8. n-to-n Deployments

Choosing the Right Stack

What is in a name?

name

stack

Ease of use

Happiness

Effectiveness

stack is key

for a great

Developer Experience

Presentation

API

Business

Persistence

Best Practices

IDE

Patterns

Libraries

Testing

Full Stack Nirvana

Do

more

 with less

Think

Wait

Fast

Become

a minimalist

Minimal MEAN

Angular

Express

Node

Mongo

VS Code

npm

GitHub

jasmine

TypeScript

CI

Docker

Angular

Angular Material

Angular Evergreen

angular-unit-test-helper

Fundamentals

duluca/minimal-nginx-web-server

Capable, reliable development platform

Well understood, great community

Express

body-parser

cors

morgan

passport

Fast, unopinionated, minimalist web framework for Node.js

Vast plugin eco-system

Node

TypeScript

duluca/minimal-node-web-server

duluca/minimal-node-build-env

Lightweight and efficient JavaScript runtime, using an event-driven, non-blocking I/O model

Runs everywhere

Mongo

mongodb

document-ts

Document-oriented database with dynamic JSON-like schemas

Mature, performant and capable

VS Code

Free, fast and extensible

TypeScript

Covers the

JavaScript Feature Gap

Credit: Anders Hejlsberg

npm

Cross-platform scripting platform

GitHub

Kanban support, enables GitHub Flow

Docker

Covers the Configuration Gap

Branch

Merge

GitHub Flow

Branch

Merge

Ship

The Configuration Gap

.

Free and container-based

jasmine

Batteries included

Fast

Full-stack

[demo]

  • Mono repo
  • docker & docker-compose
  • Secret management with .env
  • Actions taken by devs are recorded in scripts
  • Evergreen
  • No needless data-object transformations
  • Same language in full-stack
  • Same testing tools
  • Similar patterns
  • No unnecessary abstraction layers

GitHub Flow

Branch

Commit

Open Pull Request

Discuss and Review

Deploy

Merge

  • enforce standards

  • isolate changes

  • make it repeatable

Dockerfile

Anatomy of a Dockerfile

FROM
SETUP
COPY
CMD

Anatomy of a Dockerfile

FROM

Operating Environment

Dockerfile Inheritance

FROM
FROM
FROM
scratch
nginx
alpine

Anatomy of a Dockerfile

FROM
SETUP

Security

Dependencies

Operating Environment

Docker Security

Host OS
Docker

Runtime
Container
Web Server
App

Anatomy of a Dockerfile

FROM
SETUP
COPY

Security

Dependencies

Operating Environment

Compiled Code

Assets

Anatomy of a Dockerfile

FROM
SETUP
COPY

Security

Dependencies

Operating Environment

Compiled Code

Assets

Copying Code

Host OS
Docker

Runtime
Docker Image
Web Server
App Code

Copying Code

Host OS
Docker

Runtime
minimal-nginx-web-server
nginx
Angular

/dist

/usr/src/app

Anatomy of a Dockerfile

FROM
SETUP
COPY
CMD

Security

Dependencies

npm Scripts for Docker

bit.ly/npmScriptsForDocker

  • Create living documentation

  • Achieve DevOps

  • Close the configuration gap

.circleci/config.yml

.circleci/config.yml

FROM
jobs
build
deploy

.circleci/config.yml

FROM
build
env
steps

Docker

checkout

run

store build artifacts

store test results

Multi-Stage Dockerfile

FROM
FROM
FROM
as builder
as tester
COPY
from builder
CMD

copy end result

duluca/lemon-mart

FROM
FROM
FROM
as builder
as tester
COPY
from builder
CMD

minimal-node-build-env

alpine-node-chromium

minimal-nginx-web-server

50+ Mb

200+ Mb

7 Mb

Execution

docker build -f Dockerfile.integration . -t lemon-mart

github.com/duluca/lemon-mart

  • Use declarative tools

  • Achieve Infrastructure-as-Code

  • Repeatable Integration

n ➡️ n Deployments

Local build

CI-x build

...

.circleci/config.yml

FROM
jobs
build
deploy

.circleci/config.yml

FROM
deploy
restore
steps

 Build artifact

Sign in to container repo

Publish to repo

Trigger deployment

npm Script for AWS

bit.ly/npmScriptsForAWS

npm run aws:fargate-release
heroku container:push web -a lemon-mart
gcloud beta run deploy --image lemon-mart

Google Cloud Run

  • Use declarative tools

  • Achieve Infrastructure-as-Code

  • Repeatable deployments

  • n ➡️ n Flexibility

⛴ 👈 or 👉 😣 🤷

@duluca

AngularForEnterprise.com