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.
Why Minimal MEAN?
Angular vs React Video: Angular vs React: An Out-of-the-Box Comparison
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
- Install Node.js v8.3+
- Recommended Editor/IDE: Visual Studio Code
- For a magical development experience download these VS Code Extensions:
- This will kick off a script, which will run
npm installon all child folders.
npm run init:envto configure your environment variables in
Manually Setup Environment Variables
Skip over this if you ran the automated command
- Define a
.envfile 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:
.envfile. Note: In configuring the
MONGO_URI, instead of localhost or an IP address, you must specify
databasewhich is the name of the container as defined in
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
.envfile under Server for development purposses. Note: We specify localhost, not the docker-compose name here.
- From the root directory run
npm cleanto stop or clean Docker's cache.
- For development purposes run each service individually
- Angular Web App:
npm start-- which utilizes
ng serveand will give you livereload. To debug use Augury
npm startor use the debugger within VS Code (debug configuration is already included)
npm start:databasefrom the root
- Angular Web App:
- 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.ymlto pull from the ECS repository
npm run publish:awson 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.
- 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