{"id":751,"date":"2020-12-31T03:16:22","date_gmt":"2020-12-31T02:16:22","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=751"},"modified":"2021-01-21T09:40:06","modified_gmt":"2021-01-21T08:40:06","slug":"how-to-dockerize-angular-app-with-nodejs-backend","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/12\/31\/how-to-dockerize-angular-app-with-nodejs-backend\/","title":{"rendered":"How to Dockerize Angular App With NodeJS Backend"},"content":{"rendered":"\n<p>Docker is an enterprise-ready container platform that enables organizations to seamlessly build, share and run any application, anywhere. Almost every company is containerizing its applications for faster production workloads so that they can deploy anytime and sometimes several times a day. There are so many ways we can build an Angular App. One way is to dockerize the Angular app with nodejs backend and create a docker image so that we can deploy that image any time or sometimes several times a day.<\/p>\n\n\n\n<p>In this post, we look at the example project and see the step by step guide on how we can dockerizing the Angular app with nodejs as a server.<\/p>\n\n\n\n<h4>Introduction<\/h4>\n\n\n\n<p>Nowadays, it\u2019s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes. We are going to Dockerize the app and create an image and run it on Docker on our local machine. We could also push that Image in to Docker hub and pull it whenever and wherever we need it.<\/p>\n\n\n\n<h4 id=\"5245\">Example Project<\/h4>\n\n\n\n<p id=\"1cdb\">This is a simple example project with the Angular and nodejs server. You can create users. As you create users, the count can be updated on the right side and retrieve all the users with the button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/1320\/0*cOovaT4lHgX5fFQo.gif\" alt=\"Image for post\"\/><figcaption><strong>Example project<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Here is a  <a href=\"https:\/\/nguenkam.com\/blog\/index.php\/2020\/11\/17\/how-to-develop-and-build-angular-app-with-nodejs\/\" data-type=\"post\" data-id=\"710\">Link <\/a>for this example project.<\/p>\n\n\n\n<p>If you want to create a Docker image and run it on the local Docker, here are the steps.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ create an image\ndocker build -t angular-node-image .\n\n\/\/ running on Image\ndocker run -it -p  3080:3080 --name ang-node-ui angular-node-image<\/code><\/pre>\n\n\n\n<h4>Dockerizing the App<\/h4>\n\n\n\n<p id=\"c06f\">We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building an Angular project and put those static assets in the dist folder is the first step. The second step involves taking those static build files and serve those with node server.<\/p>\n\n\n\n<p id=\"e5ac\">Let\u2019s build an image with the Dockerfile. Here are the things we need for building an image.<\/p>\n\n\n\n<h4 id=\"a2fb\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">Stage 1<\/span><\/h4>\n\n\n\n<ul><li>Start from the base image&nbsp;<code>node:10<\/code><\/li><li>There are two package.json files: one is for nodejs server and another is for Angular UI. We need to copy these into the Docker file system and install all the dependencies.<\/li><li>We need this step first to build images faster in case there is a change in the source later. We don\u2019t want to repeat installing dependencies every time we change any source files.<\/li><li>Copy all the source files.<\/li><li>Angular uses Angular\/CLI to build the app. So, install CLI and install all the dependencies.<\/li><li>Run&nbsp;<code>npm run build<\/code>&nbsp;to build the Angular App and all the assets will be created under&nbsp;<code>dist<\/code>&nbsp;a folder within a my-app folder.<\/li><\/ul>\n\n\n\n<h4 id=\"b07b\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">Stage 2<\/span><\/h4>\n\n\n\n<ul><li>Start from the base image&nbsp;<code>node:10<\/code><\/li><li>Take the build from stage 1 and copy all the files into .<strong>\/my-app\/dist&nbsp;<\/strong>folder.<\/li><li>Copy the nodejs package.json<\/li><li>Install all the dependencies<\/li><li>Finally, copy the server.js<\/li><li>Have this command&nbsp;<code>node server.js<\/code>&nbsp;with the CMD. This automatically runs when we run the image.<\/li><\/ul>\n\n\n\n<p id=\"e9f6\">Here is the complete Dockerfile<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FROM node:10 AS ui-build\nWORKDIR \/usr\/src\/app\nCOPY my-app\/ .\/my-app\/\nRUN cd my-app &amp;&amp; npm install @angular\/cli &amp;&amp; npm install &amp;&amp; npm run build\n\nFROM node:10 AS server-build\nWORKDIR \/root\/\nCOPY --from=ui-build \/usr\/src\/app\/my-app\/dist .\/my-app\/dist\nCOPY package*.json .\/\nRUN npm install\nCOPY server.js .\n\nEXPOSE 3080\n\nCMD &#91;\"node\", \"server.js\"]<\/code><\/pre>\n\n\n\n<p id=\"dd21\">Let\u2019s build the image with the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ build the image\ndocker build -t angular-node-image .\n\/\/ check the images\ndocker images<\/code><\/pre>\n\n\n\n<h4 id=\"6561\">Running The App on Docker<\/h4>\n\n\n\n<p id=\"689e\">Once the Docker image is built. You can run the image with the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ run the image\ndocker run -d -p  3080:3080 --name ang-node-ui angular-node-image\n\n\/\/ check the container\ndocker ps<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/1830\/1*f1odfebA_rwO8yBEv6zkKg.png\" alt=\"Image for post\"\/><figcaption><strong>Running Docker container on port 3080<\/strong><\/figcaption><\/figure>\n\n\n\n<p>You can access the application on the web at this address&nbsp;<a href=\"http:\/\/localhost:3080.\/\">http:\/\/localhost:3080.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/2312\/1*GGjOM48QmJkDr4MMkFjkkQ.png\" alt=\"Image for post\"\/><figcaption><strong>Project Running on Docker<\/strong><\/figcaption><\/figure>\n\n\n\n<h4 id=\"cb79\">Exec into a running container<\/h4>\n\n\n\n<p id=\"5ae8\">You can exec into the running container with this command and explore the file system.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>docker exec -it ang-node-ui \/bin\/sh<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/1772\/1*1yDNHPSgZXcOosJq3T15Kw.png\" alt=\"Image for post\"\/><figcaption><strong>exec into the running container<\/strong><\/figcaption><\/figure>\n\n\n\n<h4 id=\"8ab7\">Summary<\/h4>\n\n\n\n<ul><li>Nowadays, it\u2019s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes.<\/li><li>We use the multi-stage builds for efficient docker images.<\/li><li>Building efficient Docker images are very important for faster downloads and lesser surface attacks.<\/li><\/ul>\n\n\n\n<h4 id=\"a696\">Conclusion<\/h4>\n\n\n\n<p id=\"3459\">Always use multi-stage builds with this type of architecture. It makes Docker images smaller and less prone to attacks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Docker is an enterprise-ready container platform that enables organizations to seamlessly build, share and run any application, anywhere. Almost every company is containerizing its applications for faster production workloads so that they can deploy anytime and sometimes several times a day. There are so many ways we can build an Angular App. One way is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,145],"tags":[182,180,181],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/751"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=751"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/751\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/751\/revisions\/788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/787"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}