How To Containerise MEAN Stack?

In the previous parts we discussed what we need to start developing our web app in a simple and neat way. Just to remind you, it was all about getting Docker-compatible operating system and installing Docker. Ready? Let us prepare our test environment then, so we can see our work up and running!

You need to remain online for all the steps below!

Mac OS X, Linux and other *nix users might require root priviliges to execute Docker commands. Put sudo in front of each later mentioned commands or switch to root shell using su -, if sudo command is not available on your system.

1. Create a directory where you will keep your project. In that directory create two subdirectories: frontend and backend. I hope this is pretty straightforward.
2. Write down or copy to your favourite app for note-taking the path of that directory. We will need it later when creating container.
3. Create the container with the database engine. The only thing you need is executing the following command:
4. docker run --name myFirstAppDB -d -p 27017:27017 mongo
5. -d parameter is shorthand for --detach. Port 27017 is the default connection port for MongoDB, database engine we use over this tutorial.
6. Create the container with back-end development environment and bind the “backend” directory to this container. We will need to be able to attach terminal output to that container in order to see errors, logs, etc.
   All you need to achieve all that is also to execute one command:
7. docker run --name myFirstAppBack -v |your back-end folder|:/root/backend/ -it -p 9514:9514 node /bin/bash
8. We just created the container, attached to its bash terminal (as there is no -d parameter) and we can work from within the container now. There are some operations we need to conduct from there.
9. Navigate to the /root/backend/ folder by executing command
10. cd /root/backend/
11. Implement a small fix for permissions with npm (Node Package Manager). Let npm be set to act as root. You can change this with the following command:
12. npm -g config set user root
13. Parameter -g ensures the setting or installation is performed globally and not in the current directory only.
14. Let us install Express framework, which we will be using when developing our server. This has to be done with npm, by executing:
15. npm -g install express
16. We also need the back-end to communicate with the database. For this purpose, MongoDB driver needs to be installed on the top of node.js. Similar to the previous step, we need to execute:
17. npm install mongodb
18. Watch out: no -g parameter this time!
19. That’s it for now! Exit the container by pressing Ctrl+p+q.
20. Create the container with back-end development environment and bind the “frontend” directory to this container. We will need to be able to attach terminal output to that container in order to see errors, logs, etc.
    All you need to achieve all that is also to execute one command:
21. docker run --name myFirstAppFront -v |your front-end folder|:/root/frontend/ -it -p 8080:4200 node /bin/bash
22. Navigate to /root/frontend/ folder
23. Again, fix the npm issue:
24. npm -g config set user root
25. Install Angular framework together with CLI (command-line interface) tools using npm:
26. npm -g install @angular/cli
27. Initialise project with ng new frontend
28. You can test your project at any time with ng serve --host 0.0.0.0
    (parameter --host 0.0.0.0 is necesssary for testing your app from the browser outside Docker container)
29. Exit the container by pressing Ctrl+p+q.

Networking between containers

As you have maybe noticed, we have three containers that are able to provide all the necessary services for our app. However, we have three separate, isolated environments, but they need to be working together. How this can be achieved?

Docker provides solution for this too!

It is possible to connect our three containers into one bridged virtual network. First, the network needs to be created

docker network create myFirstAppNet

This way we have created the network for our app and called it myFirstAppNet. We still need to connect the containers to that network. For each of the containers we created, we need to execute the following command:

docker network connect myFirstAppNet |container name|

Now, let us note the IP addresses of each container in our new network. They can be found by inspecting each of the container. Look for the section named with the name of our new network at the end of the output of the following command:

docker inspect |container name|

This section contains field “IPAddress”. Value of that field is the IP address of the container to be used when communicating with other containers.

If you cannot see the value in “IPAddress” field, please ensure your container is running and start it if necessary. Write them down. We will need them when putting them in a code.

Congratulations! You have just set up the development environment for your first web app! Now we are just left with writing the code of our app.

Credits for the featured image go to: https://kittybloger.wordpress.com/2012/05/29/cats-love-computers-20-great-pictures/

Originally published at At The Back Of The Browser.