Get base config from environment variables

.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
 		SharedArrayBuffer: 'readonly',
 	},
 	parserOptions: {
-		ecmaVersion: 2018,
+		ecmaVersion: 2020,
 		sourceType: 'module',
 		jsx: true,
 	},

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 coverage
 **/build/report.html
+.env
 
 # IDE files
 .idea/**/workspace.xml

packages/chord-chart-studio/.env.template

@@ -0,0 +1 @@
+VITE_BASE=/app

packages/chord-chart-studio/src/core/__mocks__/config.js

@@ -0,0 +1 @@
+export default { base: '' };

packages/chord-chart-studio/src/core/config.js

@@ -0,0 +1,3 @@
+export default {
+	base: import.meta.env.VITE_BASE || '',
+};

packages/chord-chart-studio/src/core/router.js

@@ -4,7 +4,7 @@ import qs from 'qs';
 
 import renderController from '../renderController';
 
-const base = '/app'; // duh!
+import config from './config';
 
 let router;
 let getUrl;
@@ -14,7 +14,7 @@ export default {
 		const allRoutesWithWrappedActions = allRoutes.map((route) => {
 			return {
 				...route,
-				path: base + route.path,
+				path: config.base + route.path,
 				action: (context) => ({
 					Controller: route.action,
 					params: context.params,

packages/chord-chart-studio/src/modules/allRoutes.js

@@ -5,7 +5,7 @@ import Editor from '../controllers/Editor';
 export default [
 	{
 		name: 'home',
-		path: '/',
+		path: '',
 		action: Editor,
 	},
 	...libraryRoutes,

packages/chord-chart-studio/tests/integration/app.spec.js

@@ -1,3 +1,5 @@
+jest.mock('../../src/core/config');
+
 import run from '../../src/app';
 
 const { act } = require('@testing-library/react');

packages/chord-chart-studio/tests/unit/core/router.spec.js

@@ -1,3 +1,4 @@
+jest.mock('../../../src/core/config');
 jest.mock('../../../src/renderController');
 import renderController from '../../../src/renderController';
 

packages/chord-chart-studio/vite.config.js

@@ -1,60 +1,66 @@
-import { defineConfig } from 'vite';
+/* eslint-env node */
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
 
-export default defineConfig({
-	root: 'src',
-	publicDir: '../public',
-	base: '/app/',
-	build: {
-		outDir: '../build',
-		emptyOutDir: true,
-		rollupOptions: {
-			output: {
-				manualChunks: (id) => {
-					if (id.includes('node_modules')) {
-						return 'vendor';
-					}
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), '');
+
+	return {
+		root: 'src',
+		publicDir: '../public',
+		envDir: '../',
+		base: env.VITE_BASE,
+		build: {
+			outDir: '../build',
+			emptyOutDir: true,
+			rollupOptions: {
+				output: {
+					manualChunks: (id) => {
+						if (id.includes('node_modules')) {
+							return 'vendor';
+						}
+					},
 				},
 			},
 		},
-	},
-	plugins: [
-		react(),
-		VitePWA({
-			registerType: 'autoUpdate',
-			injectRegister: 'script',
-			manifest: false,
-			workbox: {
-				clientsClaim: true,
-				skipWaiting: true,
-				globPatterns: ['**/*.{js,css,html,svg}'],
-				runtimeCaching: [
-					// based on https://developer.chrome.com/docs/workbox/modules/workbox-recipes
-					// and https://stackoverflow.com/questions/52451678/caching-google-fonts-using-workbox
-					{
-						urlPattern: /^https:\/\/fonts\.googleapis\.com/,
-						handler: 'StaleWhileRevalidate',
-						options: {
-							cacheName: 'google-fonts-stylesheets',
-						},
-					},
-					{
-						urlPattern: /^https:\/\/fonts\.gstatic\.com/,
-						handler: 'StaleWhileRevalidate',
-						options: {
-							cacheName: 'google-fonts-webfonts',
-							cacheableResponse: {
-								statuses: [0, 200],
+		plugins: [
+			react(),
+			VitePWA({
+				registerType: 'autoUpdate',
+				injectRegister: 'script',
+				manifest: false,
+				workbox: {
+					clientsClaim: true,
+					skipWaiting: true,
+					globPatterns: ['**/*.{js,css,html,svg}'],
+					runtimeCaching: [
+						// based on https://developer.chrome.com/docs/workbox/modules/workbox-recipes
+						// and https://stackoverflow.com/questions/52451678/caching-google-fonts-using-workbox
+						{
+							urlPattern: /^https:\/\/fonts\.googleapis\.com/,
+							handler: 'StaleWhileRevalidate',
+							options: {
+								cacheName: 'google-fonts-stylesheets',
 							},
-							expiration: {
-								maxAgeSeconds: 60 * 60 * 24 * 365,
-								maxEntries: 30,
+						},
+						{
+							urlPattern: /^https:\/\/fonts\.gstatic\.com/,
+							handler: 'StaleWhileRevalidate',
+							options: {
+								cacheName: 'google-fonts-webfonts',
+								cacheableResponse: {
+									statuses: [0, 200],
+								},
+								expiration: {
+									maxAgeSeconds: 60 * 60 * 24 * 365,
+									maxEntries: 30,
+								},
 							},
 						},
-					},
-				],
-			},
-		}),
-	],
+					],
+				},
+			}),
+		],
+	};
 });