Easy to learn and use full-stack TypeScript with Angular

Watch the video: Do More with Less: Full Stack TypeScript

Get the book: Minimal MEAN is referenced in my book Angular for Enterprise-Ready Web Applications. You can get it on https://AngularForEnterprise.com.

Lemon Mart Server: Complementing the Lemon Mart project, this server implementation contains realistic examples using a similar server configuration.

Getting Started

Are you an absolute beginner or season veteran? Start your JavaScript journey today at http://thejavascriptpromise.com

Why Minimal MEAN?

It can be daunting to pick the right stack to deliver your idea to the cloud. Without realizing, you can introduce one too many "sandbag of complexity" between you and something you can release. For the first time ever it is possible to do full-stack development with a consistent set of tools and best practices using the same language, JavaScript. No more to context switching between front-end and back-end languages, libraries and tools. That is The JavaScript Promise. My easy to learn and use stack 'Minimal MEAN' will get you started and deployed on the cloud over a lazy weekend, without requiring a MongoDB install, while leveraging the latest tools like async/await with Typescript, Angular LTS, Node LTS.

Angular vs React Video: Angular vs React: An Out-of-the-Box Comparison

Pre-requisites

• Install Docker CE
• Read more about why Docker is important here

To avoid issues that aries from maintaining varying versions of Angular CLI and TypeScript across multiple projects, it is highly recommended that you do not globally install @angular/cli and typescript.

Setup

• Install Node.js v8.3+
• Recommended Editor/IDE: Visual Studio Code
• For a magical development experience download these VS Code Extensions:
  • Configure my preferred extentions.json and settings.json files.
• npm install
• This will kick off a script, which will run npm install on all child folders.
• Run npm run init:env to configure your environment variables in .env files

Manually Setup Environment Variables

Skip over this if you ran the automated command

• Define a .env file at the root of the project and set the MongoDB admin passowrd. Do NOT commit this file.

MONGODB_ADMIN_PASS=your_password_goes_here
MONGODB_APPLICATION_DATABASE=app_db_name
MONGODB_APPLICATION_USER=app_user
MONGODB_APPLICATION_PASS=app_password
MONGO_URI=uri_to_mongodb

• See more details about the MongoDB Docker container at excellalabs/mongo which also contains instructions on how to set things up on AWS ECS.

  In your server application use the application information to connect to the database. Sample connection URI: mongodb://app_user:app_password@localhost:27017/app_db_name?readPreference=primary

• Sample .env file. Note: In configuring the MONGO_URI, instead of localhost or an IP address, you must specify database which is the name of the container as defined in docker-compose.yml file.

MONGODB_ADMIN_PASS=admin
MONGODB_APPLICATION_DATABASE=acme
MONGODB_APPLICATION_USER=john.smith
MONGODB_APPLICATION_PASS=g00fy
MONGO_URI=mongodb://john.smith:g00fy@database/acme

• You need a seperate .env file under Server for development purposses. Note: We specify localhost, not the docker-compose name here.

MONGO_URI=mongodb://john.smith:g00fy@localhost:27017/acme

Run

• From the root directory run npm start
  • This will kick off docker-compose up which will build and configure your web app, server and database.
  • Angular Web App: http://localhost:8080
  • Server: http://localhost:3000
  • Database: http://localhost:27017
• Run npm stop or npm clean to stop or clean Docker's cache.

Development

• For development purposes run each service individually
  • Angular Web App: cd web-app then npm start -- which utilizes ng serve and will give you livereload. To debug use Augury
  • Server: cd server then npm start or use the debugger within VS Code (debug configuration is already included)
  • Database: npm start:database from the root

Architecture

• web-app: This folder contains the client side Angular app, configured using Angular CLI along with its own individual Node.js server
• server: This folder contains the server side Node.js app that can be used to serve REST APIs and it is capable of connecting to MongoDB
• document-ts: The library to connect and query Mongo in an async, flexible and convenient manner
• excellalabs/mongo: A fully-featured Mongo image (with Auth and SSL) inherited from the official image.

Continuous Integration and Hosting

• CI is implemented on CircleCI
• Hosted on AWS ECS
  • You'll need to individually publish your Docker containers to ECS
  • Then update docker-compose.aws.yml to pull from the ECS repository
  • Run npm run publish:aws on the root folder to create the task definition
  • You'll need to create a new service and attach this task definition to it
  • See the Step-by-Step AWS ECS Guide on how to create container repositories, and attaching a task definition to a service here.
  • See the Configuring AWS ECS to have access to AWS EFS Guide to persist data using MongoDB here.

TODO

• Use Angular CLI https://github.com/angular/angular-cli for client-side app setup
• Add Angular Material https://github.com/angular/material2/blob/master/guides/getting-started.md
• Dockerize, because https://gist.github.com/duluca/25de70e41347f38b2283ef90ed69840a
• Simplify build process to only rely on npm scripts https://gist.github.com/duluca/4468df69f04d60478af824c23fe094f9
• Docker Compose Deployment to AWS ECS https://medium.com/@Electricste/amazon-ecs-using-the-cli-with-docker-compose-74287f19b181 http://docs.aws.amazon.com/AmazonECS/latest/developerguide/cmd-ecs-cli-compose.html http://docs.aws.amazon.com/AmazonECS/latest/developerguide/cmd-ecs-cli-compose-service.html
• HTTPS using Let's Encrypt
• Sanitize inputs using TypeScript interfaces with https://www.npmjs.com/package/validator.ts