0

I'am a beginner in Docker and I'am trying to run my source code in a Container with making my source-code folder as Volume to be able to modify source code in realtime.

My source code is a starter angular app

So my current repo contains :

DockerFile
angular-app/

#DockerFile:

FROM node:latest
LABEL author="Karim"

RUN npm install -g @angular/cli

WORKDIR /var/www/angular-app

ENTRYPOINT ["npm","start"]

in this repo I run :

> docker build -t angular-image .
> docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
angular-image       latest              fcbcf2d10c65        58 minutes ago      989MB

> docker run -p 1000:4200 -v "C:\Users\k.garali\Desktop\Docker\angular-app-image/angular-app":/var/www/angular-app angular-image


> angular-app@0.0.0 start /var/www/angular-app
> ng serve


chunk {main} main.js, main.js.map (main) 56.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.38 MB [initial] [rendered]
Date: 2020-10-07T16:27:10.277Z - Hash: 17160092220a366bdbcb - Time: 18247ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

> docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS
    PORTS                    NAMES
7f9a2185636d        angular-image       "npm start"         2 seconds ago       Up 2 seconds
    0.0.0.0:1000->4200/tcp   fervent_morse

But Finally when I go in browser to localhost:1000, I get no reponse ERR_EMPTY_RESPONSE

any clarification ?

Karim Oodrive
  • 61
  • 5

3 Answers3

0

I haven't created many docker files. But from what I can tell is you're not copying your angular application into your docker file.

  1. You have your working directory but you're not copying your Angular Build into your container.

  2. I assume that angular when running locally has its own port that it runs on like React runs on port 3000. You'll need to expose that port.

  3. Also you can run your build of your angular file outside of your docker file and then copy in the finished build files.

Here is an example I could find online

Updated Example

# Base image
FROM node:10

# Maintainer name
LABEL author="Karim"

# Copying angular folder from local directory to working directory
COPY angular /var/www/angular-app

# Installing Angular cli and node modules in angular directory
RUN     npm install -g @angular/cli &&\
        cd /usr/local/educative/angular &&\
        npm i

EXPOSE 3000

https://www.educative.io/collection/page/6630002/6070327361667072/5257048661950464

Nikster
  • 427
  • 5
  • 14
  • Op mounts the directoy of the angular app to the docker container, so what you describe is not necessary. – code-gorilla Oct 07 '20 at 17:35
  • Also the angular dev server runs on port 4200 by default. – code-gorilla Oct 07 '20 at 18:16
  • oh okay, good to know – Nikster Oct 07 '20 at 19:25
  • **Note**: it is preferred to use the `WORKDIR` instruction instead of `cd`'s in your `Dockerfile`. The `WORKDIR` instruction will create the directory if it doesn't already exist. The [Haskell Dockerfile Linter](https://github.com/hadolint/hadolint) [will complain about using `cd`](https://github.com/hadolint/hadolint/wiki/DL3003). If you're new to `docker` (or a veteran for that matter) then using the linter should help you catch a lot of common mistakes like this and increase the quality of your `Dockerfile`'s. – masseyb Oct 07 '20 at 20:40
0

You bind to port 1000. Ports below 1024 are privileged and require special configuration.

E.g. port 3000 or 4200 should work fine.

code-gorilla
  • 2,231
  • 1
  • 6
  • 21
  • While this is true it's not the issue, ref. the `docker ps` output the container is successfully binding to port `1000` (e.g. would error out if OP did not have the required permissions to bind the port). Either OP is running `docker` as `root` or is running `docker` as a non-privileged user that is part of the `docker` group (in both cases the user would have sufficient privileges on the host to bind on ports under `1024`). – masseyb Oct 07 '20 at 20:16
0

The server process is listening on localhost:4200 ("Angular Live Development Server is listening on localhost:4200"). localhost inside of the container isn't the same as your PC's localhost.

You can update the package.json's start command to start the process listening for connections from all hosts: "start": "ng serve --host 0.0.0.0", or set the ENTRYPOINT directly in your Dockerfile:

FROM node:latest
LABEL author="Karim"
RUN npm install -g @angular/cli
WORKDIR /var/www/angular-app
ENTRYPOINT ["ng", "serve", "--host", "0.0.0.0"]
masseyb
  • 3,745
  • 1
  • 17
  • 29
  • That's works fine! but when I edit my source code I need to stop and rerun container : ( , have you a solution to make container publish source code changes ?? I try to remove ENTRYPOINT from DokcerFile, and start my machine with bash, and I run ng serve --host 0.0.0.0 to be able to see recompilation changes But It doesn't recompile when I edit my source code : ((( – Karim Oodrive Oct 08 '20 at 09:49
  • Have tried [building with `—watch`](https://stackoverflow.com/a/40225162/1423507) or [serving with `—watch` enabled](https://angular.io/cli/serve)? – masseyb Oct 08 '20 at 09:56
  • building is for prod, and serving yes is for dev, and --watch is true by default in this case. in a normal machine the app recompiles for any changes But in the container it doesn't recompile, I think there is a problem with the VOLUME (-v) options – Karim Oodrive Oct 08 '20 at 10:27
  • Possibly an issue with the volume yes, I don’t do Windows / am aware that there exists differences between running docker on Linux and other OS’s, [this might help](https://rominirani.com/docker-on-windows-mounting-host-directories-d96f3f056a2c). Also, are deviating from your original question. – masseyb Oct 08 '20 at 10:35