refactor: use new env var modues from Svelte Kit (#71)

- Update code to use new env var modules provided by Svelte Kit - Remove obsolete /env endpoint for loading env vars - Remove obsolete env store - Add .env file for default public dynamic env vars - Add PublicEnv interface for declaring the pubic env vars - Use vite preview for running production build so .env is used for e2e tests - See: sveltejs/kit#5663
NASA-AMMOS · Jul 27, 2022 · ee1e360 · ee1e360
1 parent 7c82571
commit ee1e360
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 78 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,7 @@
+AUTH_TYPE=none
+GATEWAY_CLIENT_URL=http://localhost:9000
+GATEWAY_SERVER_URL=http://localhost:9000
+HASURA_CLIENT_URL=http://localhost:8080/v1/graphql
+HASURA_SERVER_URL=http://localhost:8080/v1/graphql
+HASURA_WEB_SOCKET_URL=ws://localhost:8080/v1/graphql
+ORIGIN=http://localhost:3000
diff --git a/docs/TESTING.md b/docs/TESTING.md
@@ -49,7 +49,7 @@ npm run test:e2e:debug
 The codegen test script runs the [Playwright test generator](https://playwright.dev/docs/codegen), which automatically generates [locators](https://playwright.dev/docs/locators) as you click elements on the page. It can greatly save test development time. The generator requires an instance of the application already running to select against.
 
 ```sh
-npm run test:e2e:dev     # Starts aerie-ui
+npm run preview          # Starts production build of aerie-ui
 npm run test:e2e:codegen # Starts codegen
 ```
 

diff --git a/package.json b/package.json
@@ -25,12 +25,11 @@
     "optimize": "vite optimize",
     "prebuild": "npm run version",
     "predev": "node ./scripts/check-node.cjs",
-    "preview": "vite preview",
+    "preview": "vite preview --port 3000",
     "test": "vitest",
     "test:e2e": "playwright test",
     "test:e2e:codegen": "playwright codegen http://localhost:3000",
     "test:e2e:debug": "PWDEBUG=1 playwright test",
-    "test:e2e:dev": "AUTH_TYPE=none ORIGIN=http://localhost:3000 node build",
     "test:unit": "vitest run",
     "version": "node ./scripts/version.js"
   },

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -21,11 +21,7 @@ const config: PlaywrightTestConfig = {
     video: process.env.CI ? 'retain-on-failure' : 'off',
   },
   webServer: {
-    command: 'node build',
-    env: {
-      AUTH_TYPE: 'none',
-      ORIGIN: 'http://localhost:3000',
-    },
+    command: 'npm run preview',
     port: 3000,
   },
 };

diff --git a/src/app.d.ts b/src/app.d.ts
@@ -1,4 +1,4 @@
-/* eslint @typescript-eslint/no-unused-vars: 0, @typescript-eslint/no-empty-interface: 0 */
+/* eslint @typescript-eslint/no-unused-vars: 0 */
 
 /// <reference types="@sveltejs/kit" />
 
@@ -7,13 +7,19 @@ declare namespace App {
     user: User | null;
   }
 
-  interface Platform {}
+  interface PublicEnv {
+    AUTH_TYPE: string;
+    GATEWAY_CLIENT_URL: string;
+    GATEWAY_SERVER_URL: string;
+    HASURA_CLIENT_URL: string;
+    HASURA_SERVER_URL: string;
+    HASURA_WEB_SOCKET_URL: string;
+    ORIGIN: string;
+  }
 
   interface Session {
     user: User | null;
   }
-
-  interface Stuff {}
 }
 
 /**

diff --git a/src/components/menus/AppMenu.svelte b/src/components/menus/AppMenu.svelte
@@ -4,7 +4,7 @@
   import { goto, prefetch } from '$app/navigation';
   import { base } from '$app/paths';
   import { session } from '$app/stores';
-  import { env } from '../../stores/app';
+  import { env } from '$env/dynamic/public';
   import { showAboutModal } from '../../utilities/modal';
   import Menu from './Menu.svelte';
   import MenuItem from './MenuItem.svelte';
@@ -54,11 +54,11 @@
       <i class="bi bi-calendar3" />
       Scheduling
     </MenuItem>
-    <MenuItem on:click={() => window.open($env.GATEWAY_CLIENT_URL, '_newtab')}>
+    <MenuItem on:click={() => window.open(env.GATEWAY_CLIENT_URL, '_newtab')}>
       <i class="bi bi-diagram-3" />
       Gateway
     </MenuItem>
-    <MenuItem on:click={() => window.open(`${$env.GATEWAY_CLIENT_URL}/playground`, '_newtab')}>
+    <MenuItem on:click={() => window.open(`${env.GATEWAY_CLIENT_URL}/playground`, '_newtab')}>
       <i class="si si-graphql" />
       GraphQL Playground
     </MenuItem>

diff --git a/src/hooks.ts b/src/hooks.ts
@@ -1,13 +1,10 @@
+import { env } from '$env/dynamic/public';
 import type { GetSession, Handle } from '@sveltejs/kit';
 import { parse } from 'cookie';
-import { get } from 'svelte/store';
-import { env as envStore } from './stores/app';
 import effects from './utilities/effects';
 
 export const handle: Handle = async ({ event, resolve }) => {
-  const { AUTH_TYPE } = get<Env>(envStore);
-
-  if (AUTH_TYPE === 'none') {
+  if (env.AUTH_TYPE === 'none') {
     event.locals.user = { id: 'unknown', ssoToken: 'unknown' };
   } else {
     const cookies = parse(event.request.headers.get('cookie') || '');

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -2,15 +2,10 @@
   import { base } from '$app/paths';
   import type { Load } from '@sveltejs/kit';
   import '../css/app.css';
-  import { env as envStore, user as userStore, version as versionStore } from '../stores/app';
+  import { user as userStore, version as versionStore } from '../stores/app';
   import { modalBodyClickListener, modalBodyKeyListener } from '../utilities/modal';
 
   export const load: Load = async ({ fetch, session }) => {
-    // Set env store.
-    const envResponse = await fetch(`${base}/env`);
-    const env = await envResponse.json();
-    envStore.set(env);
-
     // Set version store.
     const versionResponse = await fetch(`${base}/version.json`);
     const version = await versionResponse.json();

diff --git a/src/routes/env/index.ts b/src/routes/env/index.ts
diff --git a/src/stores/app.ts b/src/stores/app.ts
@@ -2,15 +2,6 @@ import { writable } from 'svelte/store';
 
 /* Data. */
 
-export const defaultEnv: Env = {
-  AUTH_TYPE: 'cam',
-  GATEWAY_CLIENT_URL: 'http://localhost:9000',
-  GATEWAY_SERVER_URL: 'http://localhost:9000',
-  HASURA_CLIENT_URL: 'http://localhost:8080/v1/graphql',
-  HASURA_SERVER_URL: 'http://localhost:8080/v1/graphql',
-  HASURA_WEB_SOCKET_URL: 'ws://localhost:8080/v1/graphql',
-};
-
 export const defaultVersion: Version = {
   branch: 'unknown',
   commit: 'unknown',
@@ -21,8 +12,6 @@ export const defaultVersion: Version = {
 
 /* Writeable. */
 
-export const env = writable<Env>(defaultEnv);
-
 export const user = writable<User | null>(null);
 
 export const version = writable<Version>(defaultVersion);
diff --git a/src/stores/subscribable.ts b/src/stores/subscribable.ts
@@ -1,8 +1,8 @@
 import { browser } from '$app/env';
+import { env } from '$env/dynamic/public';
 import { createClient, type Client, type ClientOptions } from 'graphql-ws';
 import { isEqual } from 'lodash-es';
-import { get, type Subscriber, type Unsubscriber, type Updater } from 'svelte/store';
-import { env as envStore } from '../stores/app';
+import type { Subscriber, Unsubscriber, Updater } from 'svelte/store';
 
 /**
  * Returns a Svelte store that listens to GraphQL subscriptions via graphql-ws.
@@ -76,8 +76,7 @@ export function gqlSubscribable<T>(
 
   function subscribe(next: Subscriber<T>): Unsubscriber {
     if (browser && !client) {
-      const { HASURA_WEB_SOCKET_URL: url } = get<Env>(envStore);
-      const clientOptions: ClientOptions = { url };
+      const clientOptions: ClientOptions = { url: env.HASURA_WEB_SOCKET_URL };
       client = createClient(clientOptions);
     }
 

diff --git a/src/types/app.d.ts b/src/types/app.d.ts
@@ -1,12 +1,3 @@
-type Env = {
-  AUTH_TYPE: string;
-  GATEWAY_CLIENT_URL: string;
-  GATEWAY_SERVER_URL: string;
-  HASURA_CLIENT_URL: string;
-  HASURA_SERVER_URL: string;
-  HASURA_WEB_SOCKET_URL: string;
-};
-
 type HtmlModalElement = HTMLDivElement & { resolve: (value: boolean | PromiseLike<boolean>) => void };
 
 type User = {

diff --git a/src/utilities/requests.ts b/src/utilities/requests.ts
@@ -1,6 +1,7 @@
 import { browser } from '$app/env';
+import { env } from '$env/dynamic/public';
 import { get } from 'svelte/store';
-import { env as envStore, user as userStore } from '../stores/app';
+import { user as userStore } from '../stores/app';
 
 /**
  * Function to make HTTP requests to the Aerie Gateway.
@@ -12,8 +13,7 @@ export async function reqGateway<T = any>(
   ssoToken: string | null,
   excludeContentType: boolean,
 ): Promise<T> {
-  const { GATEWAY_CLIENT_URL, GATEWAY_SERVER_URL } = get<Env>(envStore);
-  const GATEWAY_URL = browser ? GATEWAY_CLIENT_URL : GATEWAY_SERVER_URL;
+  const GATEWAY_URL = browser ? env.GATEWAY_CLIENT_URL : env.GATEWAY_SERVER_URL;
   const user = get<User | null>(userStore);
 
   const options: RequestInit = {
@@ -49,8 +49,7 @@ export async function reqGateway<T = any>(
  * Function to make HTTP POST requests to the Hasura GraphQL API.
  */
 export async function reqHasura<T = any>(query: string, variables: QueryVariables = {}): Promise<Record<string, T>> {
-  const { HASURA_CLIENT_URL, HASURA_SERVER_URL } = get<Env>(envStore);
-  const HASURA_URL = browser ? HASURA_CLIENT_URL : HASURA_SERVER_URL;
+  const HASURA_URL = browser ? env.HASURA_CLIENT_URL : env.HASURA_SERVER_URL;
   const user = get<User | null>(userStore);
 
   const options: RequestInit = {

diff --git a/svelte.config.js b/svelte.config.js
@@ -5,6 +5,9 @@ import preprocess from 'svelte-preprocess';
 const config = {
   kit: {
     adapter: adapterNode(),
+    env: {
+      publicPrefix: '',
+    },
     paths: {
       base: '',
     },