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.
Are you an absolute beginner or season veteran? Start your JavaScript journey today at http://thejavascriptpromise.com
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
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
andtypescript
.
- 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
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 theMONGO_URI
, instead of localhost or an IP address, you must specifydatabase
which is the name of the container as defined indocker-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
- 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
- This will kick off
- Run
npm stop
ornpm clean
to stop or clean Docker's cache.
- For development purposes run each service individually
- Angular Web App:
cd web-app
thennpm start
-- which utilizesng serve
and will give you livereload. To debug use Augury - Server:
cd server
thennpm start
or use the debugger within VS Code (debug configuration is already included) - Database:
npm start:database
from 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.
- 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.
- 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