{"id":6731,"date":"2022-01-01T15:00:31","date_gmt":"2022-01-01T15:30:31","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=6731"},"modified":"2022-10-15T18:38:14","modified_gmt":"2022-10-15T19:08:14","slug":"docker-revision-step-by-step-of-basic-usage","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=6731","title":{"rendered":"Docker: Step-by-Step For An Angular Project Using Spring Boot Web Service [ML33743]"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fc595adf87c\" class=\"ez-toc-cssicon-toggle-label\"><span class><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\" \/><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\" \/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-69fc595adf87c\" checked aria-label=\"Toggle\"><nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Target\" title=\"Target\">Target<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Environment\" title=\"Environment\">Environment<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Download\" title=\"Download\">Download<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Pre-Requisites\" title=\"Pre-Requisites\">Pre-Requisites<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Conventions\" title=\"Conventions\">Conventions<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Download_the_image_from_Docker_Hub\" title=\"Download the image from Docker Hub\">Download the image from Docker Hub<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Extra\" title=\"Extra\">Extra<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Installing_the_Database_and_Creating_the_Image\" title=\"Installing the Database and Creating the Image\">Installing the Database and Creating the Image<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Testing_the_Nodejs_installation\" title=\"Testing the Node.js installation\">Testing the Node.js installation<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Push_to_dockerhub\" title=\"Push to dockerhub\">Push to dockerhub<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Go_to_dockerhub_and_document_the_new_image\" title=\"Go to dockerhub and document the new image\">Go to dockerhub and document the new image<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Set_the_description_and_README\" title=\"Set the description and README\">Set the description and README<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Creating_the_Local_Dockers_network\" title=\"Creating the Local Docker&#8217;s network\">Creating the Local Docker&#8217;s network<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Project_Setup\" title=\"Project Setup\">Project Setup<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Starting_the_container_for_the_Angular_client\" title=\"Starting the container for the Angular client\">Starting the container for the Angular client<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Creating_an_image_from_the_Angular_container\" title=\"Creating an image from the Angular container\">Creating an image from the Angular container<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Creating_the_image_for_the_Spring_Boot_Web_Service\" title=\"Creating the image for the Spring Boot Web Service\">Creating the image for the Spring Boot Web Service<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Installing_the_Java_Environment\" title=\"Installing the Java Environment\">Installing the Java Environment<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Creating_the_image_for_the_web_service_container\" title=\"Creating the image for the web service container\">Creating the image for the web service container<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Starting_both_services_and_testing_the_site\" title=\"Starting both services and testing the site\">Starting both services and testing the site<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Starting_the_Spring_Boot_WSs_Container\" title=\"Starting the Spring Boot WS&#8217;s Container\">Starting the Spring Boot WS&#8217;s Container<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Starting_the_Web_Service\" title=\"Starting the Web Service\">Starting the Web Service<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Testing_the_service\" title=\"Testing the service.\">Testing the service.<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#The_Web_Service_Persistence_Model\" title=\"The Web Service Persistence Model\">The Web Service Persistence Model<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Starting_the_Angular_Clients_Container\" title=\"Starting the Angular Client&#8217;s Container\">Starting the Angular Client&#8217;s Container<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#IMPORTANT_NOTES\" title=\"IMPORTANT NOTES\">IMPORTANT NOTES<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/ultering.com\/it4us\/?p=6731\/#Detail_about_calls_URL_notation\" title=\"Detail about call&#8217;s URL notation\">Detail about call&#8217;s URL notation<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"Target\"><\/span>Target<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A revision of all the main steps to install an Angular site with Spring Boot web service using Docker.<br>\nThe app calls the web service that works with a mocking database and shows the top ten movies list.<br>\nThe main page loads the movies&#8217; list on its initialization.<br>\nSince the persistence layer is not the primary target, this list is hard-coded, and the decision to mock the database comes to simplicity since the target of this project is to show how to implement an application with web services using docker, otherwise, we would have extra steps to persist the list on the database.<br>\nThe docker image has a PostgreSQL database installed on it, so the implementation of a persistence layer is made simpler.<\/p>\n<h3><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6816\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini.jpg\" alt width=\"452\" height=\"470\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini.jpg 452w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini-289x300.jpg 289w\" sizes=\"(max-width: 452px) 100vw, 452px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6816 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20452%20470%22%3E%3C%2Fsvg%3E\" alt width=\"452\" height=\"470\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20452%20470%22%3E%3C%2Fsvg%3E 452w\" sizes=\"(max-width: 452px) 100vw, 452px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini.jpg 452w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini-289x300.jpg 289w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage_mini.jpg\"><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Environment\"><\/span>Environment<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Angular 13, Node.js 16, Spring Boot 2 and PostgresSQL 11.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Download\"><\/span>Download<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/github.com\/alsdias\/angularxws\">Github &#8211; Angular v13 demo project with Spring Boot v2 Web Service Using Docker<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pre-Requisites\"><\/span>Pre-Requisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pre-installed Docker applicataion, minimum version &gt;= 20.10.11, build dea9396<br>\nBasic Linux knowledge to handle the environment basics.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conventions\"><\/span>Conventions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The double currency sign (&#8216;$$&#8217;) means the console command inside the container.<br>\nTake it out when copying the command.<\/p>\n<p>Commands denoted with single currency sign ($) are to be used on the console outside the container.<br>\nIf Windows, use &#8220;W+R cmd&#8221;.<br>\nIf Debian\/Ubuntu, use gnome-terminal, etc.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_the_image_from_Docker_Hub\"><\/span>Download the image from Docker Hub<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, it is required the login:<br>\n$ docker login<strong><br>\n<\/strong><em><br>\nInsert your login and pass, then run:<\/em><strong><br>\n<\/strong>$ docker pull alsdias\/d10n16:latest<\/p>\n<p>To test, check your local repository:<br>\n$ docker images<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Extra\"><\/span>Extra<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Suppose you wish to discover all images from a specific publisher.<br>\nTry:<\/p>\n<p>$ docker search alsdias<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installing_the_Database_and_Creating_the_Image\"><\/span>Installing the Database and Creating the Image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, in this step it is installed PostgreSQL 11 and after it is created an image that may be used later for many purposes.<\/p>\n<p><strong>docker run &#8211;name d10n16pg11 -it alsdias\/d10n16 bash<\/strong><\/p>\n<p>This command will send you to the container&#8217; console (remember, on docker, we use double currency to sign).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Testing_the_Nodejs_installation\"><\/span>Testing the Node.js installation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>$$ng v<\/strong><\/p>\n<p>&#8211; shall return:<br>\n<em>Angular CLI: 13.1.2<\/em><br>\n<em>Node: 16.13.1<\/em><\/p>\n<p>Installing PostgreSQL 11<\/p>\n<p><strong>$$apt update<\/strong><br>\n<strong>$$apt install postgresql postgresql-contrib<\/strong><\/p>\n<p>&#8211; Log as postgres:<br>\nsu postgres<\/p>\n<p>&#8211; Start service:<br>\nservice postgresql start<\/p>\n<p>&#8211; To verify the installation we&#8217;ll connect to the PostgreSQL database server using the psql utility and print the server version:<br>\npsql -c &#8220;SELECT version();&#8221;<br>\n&#8211; returns:<br>\n<em>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/em><br>\n<em>PostgreSQL 11.14 (Debian 11.14-0+deb10u1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 8.3.0-6) 8.3.0, 64-bit<\/em><br>\n<em>(1 row)<\/em><\/p>\n<p>Or if not logged as postgres:<br>\nsudo -u postgres psql -c &#8220;SELECT version();&#8221;<\/p>\n<p>&#8211; Return to su:<br>\nexit<\/p>\n<p>&#8211; discover home and psql cmd path:<br>\nwhereis psql<br>\n\/usr\/bin\/psql<br>\nwhereis postgresql<br>\n\/usr\/lib\/postgresql \/etc\/postgresql \/usr\/share\/postgresql<\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Push_to_dockerhub\"><\/span>Push to dockerhub<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When the image is pushed to DockerHub repository it is possible to reuse it whenever necessary making a pull.<\/p>\n<p><strong>docker ps -l<\/strong><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6760\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1.jpg\" alt width=\"768\" height=\"77\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1.jpg 768w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1-300x30.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6760 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%2077%22%3E%3C%2Fsvg%3E\" alt width=\"768\" height=\"77\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%2077%22%3E%3C%2Fsvg%3E 768w\" sizes=\"(max-width: 768px) 100vw, 768px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1.jpg 768w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1-300x30.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_01-1.jpg\"><\/p>\n<p><strong>docker commit aece2f6c10f4 alsdias\/d10n16pg11<\/strong><\/p>\n<p>&#8211; Returns<br>\nsha256:2d03b7c0e0c8ea773539409d2e5787477a1adc7cf05f5184164c079268dcf97a<\/p>\n<p>docker push YOUR_LOGIN_HERE\/d10n16pg11<br>\nlatest: digest: sha256:3818d2c391bba0cfb9d87acd856659234eb858732af12997791a735d892ca074 size: 1798<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6761\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1.jpg\" alt width=\"816\" height=\"210\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1.jpg 816w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1-300x77.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1-768x198.jpg 768w\" sizes=\"(max-width: 816px) 100vw, 816px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6761 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20816%20210%22%3E%3C%2Fsvg%3E\" alt width=\"816\" height=\"210\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20816%20210%22%3E%3C%2Fsvg%3E 816w\" sizes=\"(max-width: 816px) 100vw, 816px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1.jpg 816w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1-300x77.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1-768x198.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_02-1.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Go_to_dockerhub_and_document_the_new_image\"><\/span>Go to dockerhub and document the new image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this example, it was used my account that is:<br>\nhttps:\/\/hub.docker.com\/repository\/docker\/alsdias\/d10n16pg11<\/p>\n<p>Yours shall be something like this:<br>\nhttps:\/\/hub.docker.com\/repository\/docker\/MY_LOGIN\/d10n16pg11<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Set_the_description_and_README\"><\/span>Set the description and README<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6762\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1.jpg\" alt width=\"1366\" height=\"707\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1.jpg 1366w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1-768x397.jpg 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6762 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%20707%22%3E%3C%2Fsvg%3E\" alt width=\"1366\" height=\"707\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%20707%22%3E%3C%2Fsvg%3E 1366w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1.jpg 1366w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1-768x397.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_03-1.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6763\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1.jpg\" alt width=\"1366\" height=\"705\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1.jpg 1366w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1-768x396.jpg 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6763 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%20705%22%3E%3C%2Fsvg%3E\" alt width=\"1366\" height=\"705\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%20705%22%3E%3C%2Fsvg%3E 1366w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1.jpg 1366w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1-768x396.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_04-1.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Local_Dockers_network\"><\/span>Creating the Local Docker&#8217;s network<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The project has the Angular client and the Spring Boot web service.<br>\nEach project is set to work on its own container.<br>\nThe containers must communicate with each other, so it is necessary to create a network to provide communication between them.<\/p>\n<p>Do:<br>\n$ docker network create angularxws<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6778\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt.jpg\" alt width=\"676\" height=\"54\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt.jpg 676w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt-300x24.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6778 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20676%2054%22%3E%3C%2Fsvg%3E\" alt width=\"676\" height=\"54\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20676%2054%22%3E%3C%2Fsvg%3E 676w\" sizes=\"(max-width: 676px) 100vw, 676px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt.jpg 676w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt-300x24.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_networkt.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Project_Setup\"><\/span>Project Setup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Download the project from <a href=\"https:\/\/github.com\/alsdias\/angularxws\">Gihub<\/a> and move it to a local folder.<\/p>\n<p>Create a local folder to the project.<br>\nIn this tutorial I&#8217;ve used:<br>\nL:\\temp2\\angularX\\angularxws<\/p>\n<p>where &#8220;L:&#8221; maps to an external HD.<\/p>\n<p><strong>NOTE:<br>\nYou may use wherever you wish, for instance: C:\\temp, but DON&#8217;T use a mapped drive from another machine of your network<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p>You must get something like this:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6809\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularxws_structure.jpg\" alt width=\"241\" height=\"116\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6809 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20241%20116%22%3E%3C%2Fsvg%3E\" alt width=\"241\" height=\"116\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularxws_structure.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Starting_the_container_for_the_Angular_client\"><\/span>Starting the container for the Angular client<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before you run the command below, switch the paths accordingly to your local paths.<br>\nCheck the local path in the -v argument (<strong>highlighted<\/strong>) that maps the host&#8217;s path and set your own path.<\/p>\n<p>$ docker run &#8211;name angularcli -it -p 4100:4100 &#8211;network angularxws &#8211;rm -v <strong>L:\\temp2\\angularX\\angularxws<\/strong>:\/data alsdias\/d10n16pg11 bash<\/p>\n<p>where:<br>\n<em>-it = after the command is executed, you are able to access the container&#8217;s prompt.<\/em><br>\n<em>-p = maps the container&#8217;s port to the host&#8217;s port.<\/em><br>\n<em>&#8211;name = makes possible to use a name instead the container&#8217;s ID.<\/em><br>\n<em>&#8211;network = sets the container on the network created in the previous step.<\/em><br>\n<em>&#8211;rm = automatically remove the container when it exits<\/em><br>\n<em>-v = maps the host&#8217;s path to the container&#8217;s path<\/em><br>\n<em>bash = defines the container&#8217;s prompt to work with bash<\/em><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6780\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli.jpg\" alt width=\"1341\" height=\"77\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli.jpg 1341w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli-300x17.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli-768x44.jpg 768w\" sizes=\"(max-width: 1341px) 100vw, 1341px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6780 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201341%2077%22%3E%3C%2Fsvg%3E\" alt width=\"1341\" height=\"77\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201341%2077%22%3E%3C%2Fsvg%3E 1341w\" sizes=\"(max-width: 1341px) 100vw, 1341px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli.jpg 1341w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli-300x17.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli-768x44.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli.jpg\"><\/p>\n<p>After the command is run, the container&#8217;s prompt is available.<\/p>\n<p>To checking the directory structure of the application, do:<\/p>\n<p>$$ cd data<br>\n$$ tree -L 1<\/p>\n<p>You shall get something like this:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6798\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs.jpg\" alt width=\"371\" height=\"331\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs.jpg 371w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs-300x268.jpg 300w\" sizes=\"(max-width: 371px) 100vw, 371px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6798 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20371%20331%22%3E%3C%2Fsvg%3E\" alt width=\"371\" height=\"331\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20371%20331%22%3E%3C%2Fsvg%3E 371w\" sizes=\"(max-width: 371px) 100vw, 371px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs.jpg 371w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs-300x268.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_dirs.jpg\"><\/p>\n<p>Now it is time to install the app:<br>\n$$ cd \/data\/prj<\/p>\n<p>Set the permissions to enable execution:<br>\n$$ chmod 775 st.sh<\/p>\n<p>Install the app&#8217;s libraries:<br>\n$$ npm install<\/p>\n<p>It takes some time until it is finished.<br>\nAdditional commands may be asked to run after the installation&nbsp; is done.<br>\n<strong>Do NOT use &#8220;<em>npm audit fix &#8211;force&#8221;, <\/em>but &#8220;npm audit fix&#8221;, without the &#8220;&#8211;force&#8221; parameter.<\/strong><br>\nWhy?<br>\nCheck here: <a href=\"https:\/\/alsdias.blogspot.com\/2022\/01\/nodejs-angular-unhandled-exception.html\">node.js: angular: An unhandled exception occurred: require() of ES Module<\/a><\/p>\n<p>Now, the app is ready to go, but before we are going to create an image to work with.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creating_an_image_from_the_Angular_container\"><\/span>Creating an image from the Angular container<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We&#8217;ve started with a Debian 10 container having the Node.js 16 already installed to make things faster.<br>\nNow, the strategy here is to create a container ready to go from the current container.<br>\nThis step may be skipped, but creating a local image we create a working copy of the remote and, also we train to do this.<\/p>\n<p>On the Windows prompt, do:<\/p>\n<p>$ docker ps -l<\/p>\n<p>This command brings the last active container.<br>\nUse its ID to the next command.<\/p>\n<p>$ docker commit CONTAINER_ID&nbsp; NAME<\/p>\n<p>$ docker commit 36bc518588c5 angularcli<\/p>\n<h4><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6783\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit.jpg\" alt width=\"932\" height=\"154\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit.jpg 932w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit-300x50.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit-768x127.jpg 768w\" sizes=\"(max-width: 932px) 100vw, 932px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6783 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20932%20154%22%3E%3C%2Fsvg%3E\" alt width=\"932\" height=\"154\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20932%20154%22%3E%3C%2Fsvg%3E 932w\" sizes=\"(max-width: 932px) 100vw, 932px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit.jpg 932w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit-300x50.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit-768x127.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_commit.jpg\"><\/h4>\n<p>Now, we are going to work on the web service&#8217;s container.<br>\nUsually, we don&#8217;t need to exit from a container to create another, but we are going to do it, didactically.<\/p>\n<p>On the container&#8217;s prompt, do:<\/p>\n<p>$$ exit<\/p>\n<p>On Windows&#8217; prompt, do:<\/p>\n<p>$ docker stop angularcli<\/p>\n<p>To check, do:<\/p>\n<p>$ docker ps -a<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_image_for_the_Spring_Boot_Web_Service\"><\/span>Creating the image for the Spring Boot Web Service<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before you run the command below, set the -v argument using the same host&#8217;s path used for the Angular client.<br>\nThis path is the project&#8217;s root path. To make sure, check the previous step if necessary.<br>\nThe string to replace is <strong>highlighted <\/strong>in the command below:<\/p>\n<p>$ docker run &#8211;name springbootws -it -p 8081:8081 &#8211;network angularxws &#8211;rm -v <strong>L:\\temp2\\angularX\\angularxws<\/strong>:\/data alsdias\/d10n16pg11 bash<\/p>\n<p>This command will create the container named springbootws.<br>\nRemember that the container is the &#8220;running process&#8221; created from an image and, the image is the persisted environment.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Installing_the_Java_Environment\"><\/span>Installing the Java Environment<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>NOTE: avoid copying and pasting the commands directly from the post.<\/strong><br>\n<strong>Type them, because copying will bring together non-visible chars that will cause malfunction.<br>\nAlternatively, you may copy the commands to an editor using *nix CR convention (Linux text file format), and from there you may copy to the prompt.<\/strong><\/p>\n<p>First, download the JDK file for Linux: <a href=\"https:\/\/www.oracle.com\/java\/technologies\/downloads\/#java8\">Oracle&#8217;s site<\/a>.<br>\nIn this tutorial it was used jdk-8, but you may use more recent versions, jdk-9, etc.<\/p>\n<p>Go to the container&#8217;s prompt and do:<\/p>\n<p>$$ mkdir -p \/home\/portables<\/p>\n<p>$$ cp \/data\/server\/jdk-8u112-linux-x64.tar.gz \/home\/portables<\/p>\n<p>$$ cd \/home\/portables<\/p>\n<p>$$ tar xzvf jdk-8u112-linux-x64.tar.gz<\/p>\n<p>$$ rm jdk-8u112-linux-x64.tar.gz<\/p>\n<p>$$ chmod -R 750 jdk1.8.0_112<\/p>\n<p>&nbsp;<\/p>\n<p>Checking:<\/p>\n<p>$$ tree -L 2 \/home<\/p>\n<p>Shall return:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6790\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder.jpg\" alt width=\"628\" height=\"135\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder.jpg 628w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder-300x64.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6790 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20628%20135%22%3E%3C%2Fsvg%3E\" alt width=\"628\" height=\"135\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20628%20135%22%3E%3C%2Fsvg%3E 628w\" sizes=\"(max-width: 628px) 100vw, 628px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder.jpg 628w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder-300x64.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_jdk_folder.jpg\"><\/p>\n<h3><\/h3>\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_image_for_the_web_service_container\"><\/span>Creating the image for the web service container<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, it is necessary to preserve the changes done by creating an image from the container.<\/p>\n<p>Go to Windows&#8217; prompt, and perform the same procedure used for the client, but this time you&#8217;ll get the current ID for the ws container:<\/p>\n<p>$docker ps -l<\/p>\n<p>$docker commit 8f40ca5bb3c0 springbootws<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6785\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws.jpg\" alt width=\"926\" height=\"164\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws.jpg 926w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws-300x53.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws-768x136.jpg 768w\" sizes=\"(max-width: 926px) 100vw, 926px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6785 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20926%20164%22%3E%3C%2Fsvg%3E\" alt width=\"926\" height=\"164\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20926%20164%22%3E%3C%2Fsvg%3E 926w\" sizes=\"(max-width: 926px) 100vw, 926px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws.jpg 926w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws-300x53.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws-768x136.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_springbootws.jpg\"><\/p>\n<p>Exit from the container, returning to Windows&#8217;s prompt.<br>\n$$ exit<\/p>\n<p>Check if the container is stopped:<br>\n$ docker stop springbootws<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6792\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop.jpg\" alt width=\"625\" height=\"63\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop.jpg 625w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop-300x30.jpg 300w\" sizes=\"(max-width: 625px) 100vw, 625px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6792 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20625%2063%22%3E%3C%2Fsvg%3E\" alt width=\"625\" height=\"63\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20625%2063%22%3E%3C%2Fsvg%3E 625w\" sizes=\"(max-width: 625px) 100vw, 625px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop.jpg 625w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop-300x30.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_check_stop.jpg\"><\/p>\n<p>Another way of checking:<br>\n$ docker ps -a<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Starting_both_services_and_testing_the_site\"><\/span>Starting both services and testing the site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">The creation of the image for the client was not really necessary because it was not performed any procedure that would have required to be saved.<br>\n<\/span><span data-preserver-spaces=\"true\">Unlike the client, the installation of the web service required to preserve the changes made.<br>\n<\/span>For the client, you could have kept using the previous command used to create the container for the first time.<br>\n<span data-preserver-spaces=\"true\">Summary: if you change something in the container and desire to save it, it is necessary to perform the &#8220;Docker commit&#8221; command.<br>\n<\/span>Another detail to notice is that the new images created are local. We haven&#8217;t added the &#8220;login\/&#8221; prefix.<br>\n<span data-preserver-spaces=\"true\">The remote images have this prefix like the one pulled before (<\/span><em><span data-preserver-spaces=\"true\">alsdias\/d10n16pg11).<br>\n<\/span><\/em>That way, you&#8217;ve created a local copy.<br>\nIf the image created is intended to be pushed to Docker Hub, then use it is added the &#8220;login\/&#8221; prefix to its name.<br>\nThe next steps will start both containers and their services to access the site and test it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Starting_the_Spring_Boot_WSs_Container\"><\/span>Starting the Spring Boot WS&#8217;s Container<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Please, do not forget to switch the host&#8217;s path (<strong>highlighted<\/strong>).<\/p>\n<p>docker run &#8211;name sbws -it -p 8081:8081 &#8211;network angularxws &#8211;rm -v <strong>L:\\temp2\\angularX\\angularxws<\/strong>:\/data springbootws bash<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Starting_the_Web_Service\"><\/span>Starting the Web Service<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>$$ cd \/data\/server<\/p>\n<p>The next command is just peformed the first time:<br>\n$$ chmod 775 srv.sh<\/p>\n<p>$$ .\/srv.sh<\/p>\n<p>To access the server&#8217;s output, do:<\/p>\n<p>$$ .\/srv.sh -t<\/p>\n<p>The server&#8217;s output.<br>\nNotice in the log that the server shows the service&#8217;s port (2nd printscreen).<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6793\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1.jpg\" alt width=\"1335\" height=\"701\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1.jpg 1335w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1-300x158.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1-768x403.jpg 768w\" sizes=\"(max-width: 1335px) 100vw, 1335px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6793 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201335%20701%22%3E%3C%2Fsvg%3E\" alt width=\"1335\" height=\"701\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201335%20701%22%3E%3C%2Fsvg%3E 1335w\" sizes=\"(max-width: 1335px) 100vw, 1335px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1.jpg 1335w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1-300x158.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1-768x403.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start1.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6795\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2.jpg\" alt width=\"1352\" height=\"731\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2.jpg 1352w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2-300x162.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2-768x415.jpg 768w\" sizes=\"(max-width: 1352px) 100vw, 1352px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6795 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201352%20731%22%3E%3C%2Fsvg%3E\" alt width=\"1352\" height=\"731\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201352%20731%22%3E%3C%2Fsvg%3E 1352w\" sizes=\"(max-width: 1352px) 100vw, 1352px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2.jpg 1352w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2-300x162.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2-768x415.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_sb_start2.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Testing_the_service\"><\/span>Testing the service.<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You may use the browser or the curl command, pointing to:<br>\nhttp:\/\/localhost:8081<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6800\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test.jpg\" alt width=\"1086\" height=\"167\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test.jpg 1086w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test-300x46.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test-768x118.jpg 768w\" sizes=\"(max-width: 1086px) 100vw, 1086px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6800 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201086%20167%22%3E%3C%2Fsvg%3E\" alt width=\"1086\" height=\"167\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201086%20167%22%3E%3C%2Fsvg%3E 1086w\" sizes=\"(max-width: 1086px) 100vw, 1086px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test.jpg 1086w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test-300x46.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test-768x118.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test.jpg\"><\/p>\n<p>$$ curl http:\/\/host.docker.internal:8081<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6801\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl.jpg\" alt width=\"1337\" height=\"87\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl.jpg 1337w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl-300x20.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl-768x50.jpg 768w\" sizes=\"(max-width: 1337px) 100vw, 1337px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6801 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201337%2087%22%3E%3C%2Fsvg%3E\" alt width=\"1337\" height=\"87\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201337%2087%22%3E%3C%2Fsvg%3E 1337w\" sizes=\"(max-width: 1337px) 100vw, 1337px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl.jpg 1337w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl-300x20.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl-768x50.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_ws_test_with_curl.jpg\"><\/p>\n<p><strong>Notice that inside the container, instead of using &#8220;localhost&#8221; it is used &#8220;host.docker.internal&#8221; if &#8220;localhost&#8221; fails.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_Web_Service_Persistence_Model\"><\/span>The Web Service Persistence Model<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The demo mocks the persistence layer to concentrate on the main target \u2014 to run an angular project calling a web service using docker.<br>\nIf you desire to replace the mock, you may implement a persistence layer replacing it, but it will be required the database.<br>\nAs you may remember, we have installed PostgreSQL&#8217;s database in a previous step.<br>\nAbout the database, you find further information below on the topic &#8220;Creating an Image with Database&#8221;.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Starting_the_Angular_Clients_Container\"><\/span>Starting the Angular Client&#8217;s Container<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Using the image created, let&#8217;s repeat the same command but changing it to be used the new image created.<br>\n<\/span><span data-preserver-spaces=\"true\">Please, do not forget to switch the host&#8217;s path (<\/span><strong><span data-preserver-spaces=\"true\">highlighted<\/span><\/strong><span data-preserver-spaces=\"true\">).<\/span><\/p>\n<p>docker run &#8211;name angcli -it -p 4100:4100 &#8211;network angularxws &#8211;rm -v <strong>L:\\temp2\\angularX\\angularxws<\/strong>:\/data angularcli bash<\/p>\n<p>Starting the app:<br>\n$$ .\/st.sh<\/p>\n<p>Obtaining the app&#8217;s log output:<br>\n$$ .\/st\/sh -t<\/p>\n<p>To understand how this command works, you may open the st.st file and exam the code.<\/p>\n<p>The app will load and if successful, you get this:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6807\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh.jpg\" alt width=\"1333\" height=\"730\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh.jpg 1333w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh-300x164.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh-768x421.jpg 768w\" sizes=\"(max-width: 1333px) 100vw, 1333px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6807 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201333%20730%22%3E%3C%2Fsvg%3E\" alt width=\"1333\" height=\"730\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201333%20730%22%3E%3C%2Fsvg%3E 1333w\" sizes=\"(max-width: 1333px) 100vw, 1333px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh.jpg 1333w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh-300x164.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh-768x421.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/ml33743_angularcli_stsh.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>On the browser, point to:<br>\nhttp:\/\/localhost:4100<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6806\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage.jpg\" alt width=\"1364\" height=\"704\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage.jpg 1364w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage-768x396.jpg 768w\" sizes=\"(max-width: 1364px) 100vw, 1364px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6806 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201364%20704%22%3E%3C%2Fsvg%3E\" alt width=\"1364\" height=\"704\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201364%20704%22%3E%3C%2Fsvg%3E 1364w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage.jpg 1364w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage-300x155.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage-768x396.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angularxws_fronpage.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"IMPORTANT_NOTES\"><\/span>IMPORTANT NOTES<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Detail_about_calls_URL_notation\"><\/span>Detail about call&#8217;s URL notation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If the usual call using localhost fails, replace it with &#8220;host.docker.internal&#8221;.<br>\nIn this demo, it worked with both alternatives.<\/p>\n<pre class>&nbsp; \/\/ usual, outside docker\n&nbsp; private serverUrl = 'http:\/\/localhost:8081'\n&nbsp; \/\/ docker\n&nbsp; \/\/ private serverUrl = 'http:\/\/host.docker.internal:8080'\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Target A revision of all the main steps to install an Angular site with Spring Boot web service using Docker. The app calls the web service that works with a mocking database and shows the top ten movies list. The main page loads the movies&#8217; list on its initialization. Since the persistence layer is not &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=6731\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;Docker: Step-by-Step For An Angular Project Using Spring Boot Web Service [ML33743]&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[192,145,12,26],"tags":[],"class_list":["post-6731","post","type-post","status-publish","format-standard","hentry","category-angular","category-container","category-java","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6731"}],"version-history":[{"count":7,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6731\/revisions"}],"predecessor-version":[{"id":6832,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6731\/revisions\/6832"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}