diff --git a/.env b/.env new file mode 100644 index 0000000000..5bc09addfc --- /dev/null +++ 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 index 2e2ef92395..9712bdab10 100644 --- 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 index 3d33c8b0c1..45779001c6 100644 --- 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 index ab8f5f29f9..17465d991a 100644 --- 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 index 05d9547edc..f139416461 100644 --- 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 */ /// @@ -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 index 372f6bc3d0..c69887f19a 100644 --- 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 @@ Scheduling - window.open($env.GATEWAY_CLIENT_URL, '_newtab')}> + window.open(env.GATEWAY_CLIENT_URL, '_newtab')}> Gateway - window.open(`${$env.GATEWAY_CLIENT_URL}/playground`, '_newtab')}> + window.open(`${env.GATEWAY_CLIENT_URL}/playground`, '_newtab')}> GraphQL Playground diff --git a/src/hooks.ts b/src/hooks.ts index 4f11c162ca..92986af433 100644 --- 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(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 index ccde46f31b..fec3190405 100644 --- 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 deleted file mode 100644 index 62a868104d..0000000000 --- a/src/routes/env/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { defaultEnv } from '../../stores/app'; - -export async function GET(): Promise<{ body: Env }> { - const { env } = process; - - const AUTH_TYPE = env['AUTH_TYPE'] ?? defaultEnv.AUTH_TYPE; - const GATEWAY_CLIENT_URL = env['GATEWAY_CLIENT_URL'] ?? defaultEnv.GATEWAY_CLIENT_URL; - const GATEWAY_SERVER_URL = env['GATEWAY_SERVER_URL'] ?? defaultEnv.GATEWAY_SERVER_URL; - const HASURA_CLIENT_URL = env['HASURA_CLIENT_URL'] ?? defaultEnv.HASURA_CLIENT_URL; - const HASURA_SERVER_URL = env['HASURA_SERVER_URL'] ?? defaultEnv.HASURA_SERVER_URL; - const HASURA_WEB_SOCKET_URL = env['HASURA_WEB_SOCKET_URL'] ?? defaultEnv.HASURA_WEB_SOCKET_URL; - - return { - body: { - AUTH_TYPE, - GATEWAY_CLIENT_URL, - GATEWAY_SERVER_URL, - HASURA_CLIENT_URL, - HASURA_SERVER_URL, - HASURA_WEB_SOCKET_URL, - }, - }; -} diff --git a/src/stores/app.ts b/src/stores/app.ts index c079bf665c..aa56f4167c 100644 --- 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(defaultEnv); - export const user = writable(null); export const version = writable(defaultVersion); diff --git a/src/stores/subscribable.ts b/src/stores/subscribable.ts index 29a7429b2f..66ae012e33 100644 --- 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( function subscribe(next: Subscriber): Unsubscriber { if (browser && !client) { - const { HASURA_WEB_SOCKET_URL: url } = get(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 index 3e327f110c..4f44daa221 100644 --- 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) => void }; type User = { diff --git a/src/utilities/requests.ts b/src/utilities/requests.ts index 347130e520..3157c5c321 100644 --- 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( ssoToken: string | null, excludeContentType: boolean, ): Promise { - const { GATEWAY_CLIENT_URL, GATEWAY_SERVER_URL } = get(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(userStore); const options: RequestInit = { @@ -49,8 +49,7 @@ export async function reqGateway( * Function to make HTTP POST requests to the Hasura GraphQL API. */ export async function reqHasura(query: string, variables: QueryVariables = {}): Promise> { - const { HASURA_CLIENT_URL, HASURA_SERVER_URL } = get(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(userStore); const options: RequestInit = { diff --git a/svelte.config.js b/svelte.config.js index a05df7e131..bf002b7ccb 100644 --- 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: '', },