Merge pull request #4 from OSINT-for-Ukraine/RDO-70

[RDO-70] Provide support for dynamic env variables

README.md

@@ -33,7 +33,18 @@
 
 3. Run `npm run dev` to start the development server. If you're using a custom config file, prefix the commad with `CONFIG=your_custom_config.js`
 4. For more info visit the [original repo](https://github.com/forensic-architecture/timemap)
-5. Run `pm2 serve build/ 80 --name "map" --spa` for production deployment 
+5. Run `npm run build` to build the webapp and `pm2 serve build/ 80 --name "map" --spa` to start the server
+6. If you need to provide any specific env variable for the config in runtime:
+6.a modify config.js adding new constant variable e.g. `const api_url = import.meta.env.VITE_API_URL;`
+    variable has to start with the prefix 'VITE_'
+6.b assign new created variable to what was previously stored in config dictionary e.g. 
+config = {
+...
+-SERVER_ROOT: "https://api.osintforukraine.com/",
++SERVER_ROOT: api_url,
+...
+}
+6.c update dynamically .env file by running `echo -e "\nVITE_API_URL=https://api.osintforukraine.com/" >> .env && npm run build`
 
 ## Deployment
 This project is now living in github pages and the API has switched to auto-updated S3 files.

config.js

@@ -1,16 +1,18 @@
 const one_day = 1440;
 
+const api_url = import.meta.env.VITE_API_URL;
+
 const config = {
   title: "Project Mariupol",
   display_title: "Project Mariupol",
-  SERVER_ROOT: "https://api.osintforukraine.com/",
+  SERVER_ROOT: api_url,
   MILITARY_EXT: "Military",
   EVENTS_EXT: "Events",
   SOURCES_EXT: "Sources",
   ASSOCIATIONS_EXT: "Associations",
   LOGIN_EXT: "login",
   // API_DATA: "https://api.osintforukraine.com/Events",
-  API_DATA: "https://api.osintforukraine.com/Events",
+  API_DATA: api_url + "Events",
   MAPBOX_TOKEN:
     "pk.eyJ1IjoiYmVsbGluZ2NhdC1tYXBib3giLCJhIjoiY2tleW0wbWliMDA1cTJ5bzdkbTRraHgwZSJ9.GJQkjPzj8554VhR5SPsfJg",
   // MEDIA_EXT: "/api/media",

vite.config.js

@@ -1,6 +1,11 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 
+//https://vitejs.dev/config/#using-environment-variables-in-config
+const env = loadEnv('','');
+const api_url = JSON.stringify(env.VITE_API_URL);
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
@@ -10,7 +15,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "https://api.osintforukraine.com/",
+        target: api_url,
         changeOrigin: true,
       },
     }