Docker & Angular: Dockerizing your Angular Application in 10 min for Beginners

This tutorial will walk you through the steps How to Dockerize an Angular Application within 10 minute
#technosaviour #Docker #angular
0:37 Prerequisites
0:44 Docker extension
1:00 Creating a new angular application
2:25 Dockerfile creation and explanation
6:01 Build docker and troubleshoot
8:39 Run using docker desktop
9:18 Run using VSCODE extension

[@rushabhmandvekar4411]

Amazing..I loved the way you explained. It helped a lot. Thank you.

[@the.jaidev]

SIr, how did the app start from docker without issuing ng --server or npm start? Could you please help me understand? Btw, thank you so much for all the time and effort you put in teaching us :)

[@NakibAkash]

It took me to nginx page instead of app page. How to resolve

[@andresmarolt7510]

I don't know if you solved it already but I'll share what I did to fix this same problem in case anyone else is having the same issue.
Just like you, I was creating an image of my project, then creating a container of said image, and got it running on port 8080, but on localhost:8080 all I was having was the nginx welcome page instead of my application. Then I went to Docker Desktop GUI and browsed through the container files and realized that in usr/share/nginx/html I had an index.html which had the nginx welcome page text, and then a folder called "browser" that, among other files, had the index.html that I should be seeing on localhost:8080. The thing is that nginx is set up to render the index.html found inside usr/share/nginx/html and not usr/share/nginx/html/browser.
The next thing I did was make a small change on my Dockerfile so that the content of dist/browser is served directly on usr/shared/nginx/html. In my Dockerfile I was doing this in the "Stage 2" part:
COPY --from=build /usr/local/app/dist/prueba-tecnica-w2m /usr/share/nginx/html
And changed it to:
COPY --from=build /usr/local/app/dist/prueba-tecnica-w2m/browser /usr/share/nginx/html
After this I deleted the previous container and its image, and proceeded to create another image and a container from it. Now in Docker Desktop GUI if I browse through the newly created container files and check the /usr/share/nginx/html directory you should see the index.html showing your app instead of the nginx welcome page. If you go to localhost:8080 (or whatever port your container is running on) you should now see your application running.

[@abdulrafay2420]

​@@andresmarolt7510This is very helpful. Thank you so much 👏

[@feelandvibe3263]

@@andresmarolt7510 Thanks a lot man! This helped, I was stuck at this point for like 4 hours. Can finally see the angular page.

[@gustavoorozco619]

@@andresmarolt7510 man, you're the best!!

[@tunisiasparx2105]

awsome thx

[@hassanejaz8033]

helped me a lot. thank you

[@atharvkulkarni2123]

You explained it very good man, Thank you

[@TechnoSaviour]

Glad you liked it!

[@cameron7303]

Legend ❤

[@neeturajawat7165]

Executing task: docker build --pull --rm -f "Dockerfile" -t shoppingcart:v2 "."
ERROR: failed to solve: build: pull access denied, repository does not exist or may require authorization: server message: insufficient_scope: authorization failed
* The terminal process "/bin/zsh '-l', '-c', 'docker build --pull --rm -f "Dockerfile" -t shoppingcart:v2 "."'" terminated with exit code: 1.
* Terminal will be reused by tasks, press any key to close it.
how to resolve this issue, i'm running in mac

[@yunus5949]

build takes more than 35min. Is it normal or?

[@TechnoSaviour]

For the first time it will take as it needs to download the docker images

[@syedhannan546]

does it hide the source code?

[@abhilash456a]

will this work on windows

[@liveniftychart348]

hi bro
can you help me my excel file encrypt u2k virus

[@-R-Srilekha]

ng build --prod is not working

[@Ronaldoroot]

--configuration=production

[@joegibson9382]

p̳r̳o̳m̳o̳s̳m̳