Example doesn't work on Windows about angular-core-concepts HOT 5 CLOSED

Glad you got it going!

from angular-core-concepts.

Thanks - glad to hear you enjoyed the workshop!

Make sure you have volumes enabled in your Docker Desktop settings (got into Resources --> Advanced --> File Sharing). From the error it sounds like the nginx volume couldn't get to your local code which normally means the volume has a problem. Whatever drive was enabled, make sure the code for the project is put there. I normally put it somewhere under my /Users folder (Desktop, etc.).

I just tried it out on Windows and it seems to be running as expected.

from angular-core-concepts.

This is frustrating. I already had the Docker Desktop settings enabled. Restarting my entire machine didn't help too. So I desperatly pushed the 'Reset to factory defaults' button. This also trashes every container, image and volume I had.
In vs-code, I have the directory open that contains the Angular-Core_Concepts repo. I am at master branch, as told before. (I again pulled it, so I have the latest updates of dependencies you fixed the other day. But I don't expect that to be relevant). The tab for Docker shows no containers, images and volumes. It only shows three items at networks: bridge, host and none.
Now I go to the settings, and select the local drives I want docker to have access to. (I select both C and D drive, which is all I have.)
I open a terminal and try to spin off the application. Here is what happens:

PS D:\git\Angular-Core-Concepts> pwd

Path
----
D:\git\Angular-Core-Concepts


PS D:\git\Angular-Core-Concepts> docker-compose up --build -d
Creating network "angular-core-concepts_app-network" with driver "bridge"
Building node
Step 1/8 : FROM node:alpine
alpine: Pulling from library/node
aad63a933944: Pull complete
a00bd932208e: Pull complete
c57f2c59b937: Pull complete
f3446470f297: Pull complete
Digest: sha256:a01be76692924db83442d93b3bfde3a0cd56ddcacf3047f583a0a98ddf7a31de
Status: Downloaded newer image for node:alpine
 ---> 483343d6c5f5
Step 2/8 : LABEL author="Dan Wahlin"
 ---> Running in e79af7c6ed83
Removing intermediate container e79af7c6ed83
 ---> bffe1644b331
Step 3/8 : WORKDIR /var/www/angular-node-service
 ---> Running in 2143b8887566
Removing intermediate container 2143b8887566
 ---> 0e6ed4d1f694
Step 4/8 : COPY package.json package.json
 ---> 427e5f7ec606
Step 5/8 : RUN npm install
 ---> Running in c11c39507955
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 53 packages from 47 contributors and audited 147 packages in 2.106s
found 0 vulnerabilities

Removing intermediate container c11c39507955
 ---> 15060a0eb27a
Step 6/8 : COPY . .
 ---> 2b6b91366103
Step 7/8 : EXPOSE 3000
 ---> Running in dfa307b6a7d9
Removing intermediate container dfa307b6a7d9
 ---> 210638ada68e
Step 8/8 : ENTRYPOINT ["node", "server.js"]
 ---> Running in 06a04e660dac
Removing intermediate container 06a04e660dac
 ---> 81d0c47e3381

Successfully built 81d0c47e3381
Successfully tagged angular-node-service:latest
Building nginx
Step 1/3 : FROM nginx:alpine
alpine: Pulling from library/nginx
4167d3e14976: Pull complete
bb292c78f105: Pull complete
Digest: sha256:abe5ce652eb78d9c793df34453fddde12bb4d93d9fbf2c363d0992726e4d2cad
Status: Downloaded newer image for nginx:alpine
 ---> 377c0837328f
Step 2/3 : LABEL author="Dan Wahlin"
 ---> Running in 47dd4a8a285b
Removing intermediate container 47dd4a8a285b
 ---> 2f7432085588
Step 3/3 : COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf
 ---> 884581a9a980

Successfully built 884581a9a980
Successfully tagged nginx-angular:latest
Creating angular-node-service ... done
Creating nginx-angular        ... done
PS D:\git\Angular-Core-Concepts>

As you can see I get some warnings with npm install, but I guess those can be ignored.

Now I go to localhost on my browser. I get a page saying 403 Forbidden. I expect a page with customers, as you had in the video.
So I check out the logs:

PS D:\git\Angular-Core-Concepts> docker-compose logs -f
Attaching to nginx-angular, angular-node-service
angular-node-service | Express listening on port 3000.
nginx-angular | 2020/04/12 10:14:00 [error] 6#6: *2 directory index of "/usr/share/nginx/html/" is forbidden, client: 172.20.0.1, server: , request: "GET / HTTP/1.1", host: "localhost"
nginx-angular | 172.20.0.1 - - [12/Apr/2020:10:14:00 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" "-"

It seems there just is no application there? Could that be the case? The dist folder is empty.
I am not familiar with nginx. Nor with frontend programming. (I mostly do backend programming using Haskell).

from angular-core-concepts.

I can sympathize with you. It's no fun when things seem to be right but they're just not working right. Happens to me all the time. :-)

Did you go through all of the steps in the readme? One of the steps has you do an ng build before running the docker compose commands. If your dist folder is empty then you may have missed that step. That would lead to that type of error. Because a volume is being used with that particular technique the dist folder needs to be on your local machine and all of the bundles generated by ng build should be in there.

Below that in the readme there's a "production" example. It doesn't use the volume for that one and instead copies the code into the image. But, I'd get the first one working initially before trying the other one.

from angular-core-concepts.

Thanks for replying again. I am used to these kind of surprises too. Not the first time for me either :)

I wrote a simple index.html and put it into the dist folder just after I wrote my previous reply. That ensured me that the docker stuff was working allright.

And no, I didn't read the README. As I told you I just stumbled upon this repo because of your docker tutorial. I assumed it would work right out of the box. Wrong! :)
And because of my lack of experience with node/angular/nginx stuff, I realised too late that I should do some more to get this stuff up and running. As allways, if everything else fails, RTFM.

again, thanks for replying. I've learned a ton.

from angular-core-concepts.