Docker Nginx with Angular JS - Load Static CSS, Images, JS with dynamic url

Question

Docker Nginx with Angular JS - Load Static CSS, Images, JS with dynamic url

785 views Asked by Sathish Sharma At 17 June 2016 at 10:23

We are moving our legacy deployment to Docker Containers. All services will be running in seperate docker containers. Services includes Postgres, Redis, JobProcessor, LogProcessor, Nginx with Consul template, Consul, Registrator, Rabbitmq and the Platform(Node JS).

We have splitted these services as Master and Platform. Master services includes all the above mentioned services except the platform.

Platform will run single application based on customer requirements. We will modify platform code also to fit customer requirement. Changes include design, layout, images and even sometimes API (include/remove API). So Each application will be running as separate container.

Customer can access the application using http://platform.com/AppName

Platform is built using NodeJs, AngularJs. We handled code to make dynamic http calls based on app name. Now the challenge is to load the css files, images and some static js files. We dont want to modify code to update url for each application.

Is there any known approach to hack this?

Original Q&A

There are 2 answers

**Dhinesh** · Answer 1 · 2016-06-17 16:20:04

This is how what i understand, you want to access same set of static files (css and images) using different URL's.

Guess that should be simple by specifying re write URL format and point to one static URL. So same content will be server using different dynamic URL.

rewrite URL format will be looks like : some-domain.com/{%a-z}/style.css some-domain.com/style.css

So it can server for all products. Hope this will help you.

**Paul Wasilewski** · Answer 2 · 2016-06-17 17:05:52

Bind your specific css file through a controller.

Add to your angular.module a controller to set the specific css file.

.controller('cssCtrl',['$scope','$http', function($scope,$http){
 $http.get('<your domain specific css url>').
        then(function(response) {
            //HERE YOU CAN MANIPULATE YOUR CSS TO SET THE RIGHT IMAGE URL
            $scope.css = response.data.temp.css;     
        }, function(response) {
            alert('Error retrieving css: ' + response);
        });
 }]

Add to your HTML the css link.

<head ng-controller="cssCtrl">
  <link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>

TechQA.

Docker Nginx with Angular JS - Load Static CSS, Images, JS with dynamic url

There are 2 answers

Related Questions in ANGULARJS

Related Questions in NODE.JS

Related Questions in NGINX

Related Questions in DOCKER

Related Questions in STATICFILEHANDLER

Popular Questions

Popular Tags

Trending Questions