diff --git a/Dockerfile b/Dockerfile
index 72f4931..e5fd924 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,35 @@
+#FROM nginx:1.19.8-alpine
+
+#COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+#COPY ./dist/ /usr/share/nginx/html/
+
+# Usage:
+#
+#    Build image:
+#    docker build -t file-server-angular .
+#
+#    Run image (on localhost:32020):
+#    docker run -d --name file-server-angular -p 32020:80 file-server-angular
+#
+#    Run image as virtual host (read more: https://github.com/nginx-proxy/nginx-proxy):
+#    docker run -e VIRTUAL_HOST=file-server-angular --name file-server-angular file-server-angular
+#
+# Stage 1, based on Node.js, to build and compile Angular
+
+FROM node:14.17.0-alpine as builder
+
+WORKDIR /ng-app
+
+COPY package*.json tsconfig*.json angular.json ./
+COPY ./src ./src
+
+RUN npm ci --quiet && npm run build-vdi --verbose
+
+# Stage 2, based on Nginx, to have only the compiled app, ready for production with Nginx
+
 FROM nginx:1.19.8-alpine
 
 COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./dist/ /usr/share/nginx/html/
\ No newline at end of file
+
+## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder /ng-app/dist /usr/share/nginx/html
\ No newline at end of file
diff --git a/angular.json b/angular.json
index d6a1b68..ac82bfd 100644
--- a/angular.json
+++ b/angular.json
@@ -69,6 +69,33 @@
                 }
               ]
             },
+            "vdi": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.vdi.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -112,6 +139,10 @@
               "browserTarget": "file-server-angular:build:nas",
               "proxyConfig": "src/proxy-nas.conf.json"
             },
+            "vdi": {
+              "browserTarget": "file-server-angular:build:vdi",
+              "proxyConfig": "src/proxy-vdi.conf.json"
+            },
             "production": {
               "browserTarget": "file-server-angular:build:production",
               "proxyConfig": "src/proxy-prod.conf.json"
diff --git a/package.json b/package.json
index fed30ad..bbb3416 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,11 @@
   "scripts": {
     "start": "ng serve --open",
     "build": "ng build --configuration production",
+    "build-vdi": "ng build --configuration vdi",
     "prod": "ng build --configuration production && ng serve --configuration production",
     "build-nas": "ng build --configuration nas",
     "start-nas": "npm run build-nas && ng serve --configuration nas",
+    "start-vdi": "npm run build-vdi && ng serve --configuration vdi",
     "test": "ng test",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "e2e": "ng e2e"
diff --git a/src/app/components/explorer/explorer.service.ts b/src/app/components/explorer/explorer.service.ts
index 7378bdd..1c07475 100644
--- a/src/app/components/explorer/explorer.service.ts
+++ b/src/app/components/explorer/explorer.service.ts
@@ -4,13 +4,15 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { FileItem } from '../../models';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ExplorerService {
+  baseUrl = environment.apiUrl;
   // api url
-  apiUrl = '/api/file';
+  apiUrl = this.baseUrl + '/api/file';
 
   // create constructor to get Http instance
   constructor(private http: HttpClient) {}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 8b0d301..73c1673 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,6 +6,7 @@ export const environment = {
   production: false,
   env_name: 'Local',
   site_title: 'File Server',
+  apiUrl: 'http://localhost:12021/',
   logging_level: 6, // 0: no logging, 1: error, 2: warn, 3: info, 4: debug, 5: log
   editable: true,
 };
diff --git a/src/environments/environment.vdi.ts b/src/environments/environment.vdi.ts
new file mode 100644
index 0000000..53a5bc1
--- /dev/null
+++ b/src/environments/environment.vdi.ts
@@ -0,0 +1,8 @@
+export const environment = {
+  production: true,
+  env_name: 'VDI',
+  site_title: 'File Server',
+  apiUrl: 'http://10.76.116.116:32031',
+  logging_level: 1, // 0: nothing, 1: error, 2: warn, 3: info, 4: debug
+  editable: true,
+};
diff --git a/src/proxy-vdi.conf.json b/src/proxy-vdi.conf.json
new file mode 100644
index 0000000..ceb8535
--- /dev/null
+++ b/src/proxy-vdi.conf.json
@@ -0,0 +1,12 @@
+{
+  "/api": {
+    "target": "http://10.76.116.116:32031",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/static": {
+    "target": "http://10.76.116.116:32030",
+    "secure": false,
+    "changeOrigin": true
+  }
+}
\ No newline at end of file