CODEWITHSUNDEEP
angulardockerenvironment-variablesdocker-composeangular-cli
Eisfuchs
Eisfuchs

Reputation: 171

Inject env variables from docker-compose into Angular4 app

I build a simple Angular4 app which get its data from a REST-API.

I deploy the app with docker-compose but before I need to set the URL/Hostname to the API manually in my service module. During the dev I simply used 'localhost' and it does the job.

In the API I'am able inject the correct hostname via docker-compose (section environment) since it runs on the server but this is not possible for angular.

Are there any best practices / guides for injecting the hostname / URL into a angular-cli app from docker-compose?

Upvotes: 4

Views: 2875

Answers (2)

Eisfuchs
Eisfuchs

Reputation: 171

Thank you yamenK for you solution with the bash script and Tarun for a similar solution.

I found another way to avoid the need of the information about the Api Url in the angular app. I added an nginx web server to my docker-compose and link it to my api and the app.

nginx:
build: ./nginx
...
links:
  - app
  - api

In the nginx default.conf I use multiple locations to route the requests.

location /api {
proxy_pass http://api:6000/api;
....
}
location / {
proxy_pass http://angular:4200/;
...
}

Then in the angular app I use relative urls.

Upvotes: 2

yamenk
yamenk

Reputation: 51826

One way to achieve this is to extract all configuration into a separate angular service that is responsible of serving configuration. Inside this new service hardcode these values to env placeholders. For example:

apiUrl = $API_URL

Now change the CMD inside your DockerFile to run a script startup.sh.

Create this script and add it into the Docker Image using ADD startup.sh startup.sh.

Inside startup.sh you can envoke envsubst < "path-to-service-file" > "path-to-service-file" to substitute the placeholder with the env variable value. After envsubst command start your angular application

Upvotes: 3

Related Questions