[ad_1]
Creating a MEAN App with Angular and Docker Compose: A Complete Guide
Introduction
Note: Update: 30/03/2019
This article has been updated to cover the latest updates to both Docker and Angular. The current version of Angular is 7 and the updates include an attached Docker volume to the Angular client, eliminating the need to run docker-compose build every time.
Docker is a powerful tool that allows you to run applications inside isolated containers. These containers communicate with each other and wrap a piece of software in a complete filesystem that contains everything needed to run. This guarantees that the software will always run the same, regardless of its environment.
In this article, we’ll guide you through the process of creating a MEAN (MongoDB, Express, Angular, and Node.js) app using Angular and Docker Compose. If you haven’t worked with Docker before, this would be a good starting point as we’ll explain every step in detail.
Why Use Docker?
Docker images are lightweight and include only what your application needs to run. This means you don’t have to worry about having a whole operating system with unnecessary components. As a result, your images will be smaller and more efficient.
Platform Independent
One of the major advantages of using Docker is that it makes your application platform independent. You’ve probably heard the phrase ‘It worked on my machine and doesn’t work on the server’. With Docker, all either environments need to have is the Docker Engine or the Docker Daemon, and when we have a successful build of our image, it should run anywhere.
Easy Sharing and Scalability
Once you have an image of your application built, you can easily share it with anyone who wants to run your application. They don’t need to worry about dependencies or setting up their individual environments. All they need is Docker Engine installed.
Docker also allows for easy scalability, as you can spin up multiple instances of your application’s images. This is especially useful for microservices architectures, where each component can be independently scaled.
Isolation
In this article, we’ll demonstrate how to separate the individual apps to become independent and only point to each other. This is because each part of our entire application should be somewhat independent and scalable on its own. With Docker, this can be achieved by building isolated, independently scalable parts of an entire system, a concept known as the Microservices Approach.
Getting Started
Before we dive into the technical details, make sure you have Docker and Docker Compose installed on your system. You can refer to the official documentation for instructions on how to install these tools.
Once you have them installed, run the following commands to verify your installation:
docker -v
Output: Docker version 18.09.2, build 6247962
docker-compose -v
Output: docker-compose version 1.23.2, build 1110ad01
node -v
Output: v11.12.0
Building the Angular and Express Apps
Next, we’ll show you how to build a simple Angular app and an Express app. We’ll be using the Angular CLI to build our app.
Create a directory called ‘mean-docker’ and initialize an Angular app with the Angular CLI.
mkdir mean-docker
npx @angular/cli new angular-client
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
This will scaffold an Angular app and install its dependencies. The directory structure should look like this:
└── mean-docker
└── angular-client
├── README.md
├── angular.json
├── e2e
├── node_modules
├── package.json
├── package-lock.json
├── src
├── tsconfig.json
└── tslint.json
Running ‘npm start’ inside
Please do not forget to bookmark our website for exclusive news, Updates and deals. And Always use the search widget on the page to make all your search queries.
[ad_2]