Easy to learn and use full-stack MEAN implementation using TypeScript & Angular
TypeScript JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 93545a0 Sep 29, 2017

README.md

Minimal MEAN

Easy to learn and use full-stack TypeScript with Angular Demo Site

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

Looking for Angular 1.5 Material starter? See demo at http://ng15demo.thejavascriptpromise.com/ and get the source code at https://github.com/duluca/angular1.5-starter

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-requisite

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:
  • npm install
  • This will kick off a script, which will run npm install on all child folders.
  • 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

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 will be 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 AWS ECS Guide on how to create container repositories, and attaching a task definition to a service: https://gist.github.com/duluca/ebcf98923f733a1fdb6682f111b1a832

TODO