From 02de8ea1619ddf7429f01a4603689d937eedc473 Mon Sep 17 00:00:00 2001
From: Dmitry Ignatiev <lovesan.ru@gmail.com>
Date: Tue, 14 Nov 2023 23:07:31 +0300
Subject: [PATCH] Added BASE_PATH build variable for JS App

---
 .../08_docker_containerization_advanced/tasks.md   |  8 +++++++-
 .../todo_app/todo_ui/src/services/todoService.js   | 14 ++++++++------
 .../todo_app/todo_ui/vite.config.js                |  2 ++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/module2/08_docker_containerization_advanced/tasks.md b/module2/08_docker_containerization_advanced/tasks.md
index 52a7b0f..934cde3 100644
--- a/module2/08_docker_containerization_advanced/tasks.md
+++ b/module2/08_docker_containerization_advanced/tasks.md
@@ -47,7 +47,13 @@
   нужно вызывать `npm install` - это команда скачает зависимости приложения.
 - После этого, в этой же директории необходимо выполнить команду `npm run build`, в результате чего,
   в этой директории появится директория `wwwroot`, содержащая файл `index.html`,
-  результирующий код на JS, а также его ресурсы, такие как картинки и файлы стилей(css).
+  результирующий код на JS, а также его ресурсы, такие как картинки и файлы стилей(css). \
+  Перед выполнением этой команды, также можно установить переменную среды `BASE_PATH`, в значение, \
+  являющееся префиксом в пути URL, по которому приложение будет находится. По умолчанию, `BASE_PATH` \
+  трактуется как имеющее значение `/`, таким образом приложение должно раздаваться веб-сервером из корня сайта. \
+  Если же вы хотите, чтобы приложение находилось например по адресу `http://<домен>/todo/`, тогда необходимо \
+  установить `BASE_PATH` в значение `/todo/` соответственно. Для установки переменной среды, доступной во время \
+  сборки образа, используйте директиву `ARG` внутри докер-файла(и соответственно опцию `--build-arg` при вызове `docker build`).
 
 Для запуска `JavaScript` приложения `NodeJS` не нужен, достаточно лишь любого веб-сервера, и в
 нашем случае, в API-сервисе такой имеется(он называется `Kestrel`). Для хостинга JS-приложения в API-сервисе, необходимо всего лишь скопировать упомянутую выше директорию `wwwroot` внутрь результирующей директории API-сервиса(которая получается после выполнения `dotnet publish ...`).
diff --git a/module2/08_docker_containerization_advanced/todo_app/todo_ui/src/services/todoService.js b/module2/08_docker_containerization_advanced/todo_app/todo_ui/src/services/todoService.js
index 846e716..22d1a19 100644
--- a/module2/08_docker_containerization_advanced/todo_app/todo_ui/src/services/todoService.js
+++ b/module2/08_docker_containerization_advanced/todo_app/todo_ui/src/services/todoService.js
@@ -2,6 +2,8 @@ import axios from 'axios'
 
 const TIMEOUT_MS = 5000
 
+const BASE_URL = import.meta.env.BASE_URL ?? '/';
+
 function send(method, url, {params, data} = {}) {
   return axios({
     method,
@@ -14,7 +16,7 @@ function send(method, url, {params, data} = {}) {
 
 export default {
   async getAll({search, skip, take, completed} = {}) {
-    let result = await send('GET', '/api/todo', {
+    let result = await send('GET', `${BASE_URL}api/todo`, {
       params: {
         search,
         skip,
@@ -25,11 +27,11 @@ export default {
     return result.data
   },
   async status() {
-    let result = await send('GET', '/api/todo/status')
+    let result = await send('GET', `${BASE_URL}api/todo/status`)
     return result.data
   },
   async create(description) {
-    let result = await send('POST', '/api/todo', {
+    let result = await send('POST', `${BASE_URL}api/todo`, {
       data: {
         description
       }
@@ -37,7 +39,7 @@ export default {
     return result.data
   },
   async toggle(isCompleted, ids = []) {
-    let result = await send('POST', '/api/todo/toggle', {
+    let result = await send('POST', `${BASE_URL}api/todo/toggle`, {
       data: {
         isCompleted,
         ids
@@ -46,11 +48,11 @@ export default {
     return result.data
   },
   async delete(id) {
-    let result = await send('DELETE', `/api/todo/${id}`)
+    let result = await send('DELETE', `${BASE_URL}api/todo/${id}`)
     return result.data
   },
   async deleteCompleted() {
-    let result = await send('DELETE', '/api/todo/completed')
+    let result = await send('DELETE', `${BASE_URL}api/todo/completed`)
     return result.data
   }
 }
diff --git a/module2/08_docker_containerization_advanced/todo_app/todo_ui/vite.config.js b/module2/08_docker_containerization_advanced/todo_app/todo_ui/vite.config.js
index 5a2c99e..7805913 100644
--- a/module2/08_docker_containerization_advanced/todo_app/todo_ui/vite.config.js
+++ b/module2/08_docker_containerization_advanced/todo_app/todo_ui/vite.config.js
@@ -1,4 +1,5 @@
 import * as path from 'node:path'
+import * as process from 'node:process'
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -18,6 +19,7 @@ export default defineConfig({
   build: {
     outDir: path.resolve(currentDir, 'wwwroot')
   },
+  base: (process.env.BASE_PATH.replace(/\/$/, '') ?? '') + '/',
   server: {
     port: 8080,
     hot: true,