Configurable URL for the API (#205)

* Configurable engine URL

Fixes #206

* fix import.meta problem (#210)

---------

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

src/env.ts

@@ -0,0 +1,11 @@
+// all web app environment variables are defined here, jest doesn't like import.meta.env so centralising them here
+// allows us to mock them in one place, see src/setupTests.ts, it pulls the variable names and valuse from .env.development
+// note the exported variable name must match the env var name for the jest mocks to work
+// i.e. const VITE_MY_VAR = import.meta.env.VITE_MY_VAR
+// Maybe this file should be generated in a GHA from .env.development?
+
+// @ts-ignore
+export const VITE_KC_API_WS_MODELING_URL = import.meta.env
+  .VITE_KC_API_WS_MODELING_URL
+// @ts-ignore
+export const VITE_KC_API_BASE_URL = import.meta.env.VITE_KC_API_BASE_URL

src/lang/rust.ts

@@ -1,12 +1,18 @@
 import init from '../wasm-lib/pkg/wasm_lib'
 
-const url =
-  typeof window === 'undefined'
-    ? 'http://127.0.0.1:3000'
-    : window.location.origin.includes('tauri://localhost')
-    ? 'tauri://localhost'
-    : window.location.origin.includes('localhost')
-    ? 'http://127.0.0.1:3000'
-    : window.location.origin
-const fullUrl = url + '/wasm_lib_bg.wasm'
-export const initPromise = init(fullUrl)
+const initialise = async () => {
+  const baseUrl =
+    typeof window === 'undefined'
+      ? 'http://127.0.0.1:3000'
+      : window.location.origin.includes('tauri://localhost')
+      ? 'tauri://localhost'
+      : window.location.origin.includes('localhost')
+      ? 'http://localhost:3000'
+      : window.location.origin
+  const fullUrl = baseUrl + '/wasm_lib_bg.wasm'
+  const input = await fetch(fullUrl)
+  const buffer = await input.arrayBuffer()
+  return init(buffer)
+}
+
+export const initPromise = initialise()

src/lang/std/engineConnection.ts

@@ -1,5 +1,6 @@
 import { SourceRange } from '../executor'
 import { Selections } from '../../useStore'
+import { VITE_KC_API_WS_MODELING_URL } from '../../env'
 
 interface ResultCommand {
   type: 'result'
@@ -111,9 +112,8 @@ export class EngineCommandManager {
     this.waitForReady = new Promise((resolve) => {
       this.resolveReady = resolve
     })
-    const url = 'wss://api.dev.kittycad.io/ws/modeling/commands'
 
-    this.socket = new WebSocket(url, [])
+    this.socket = new WebSocket(VITE_KC_API_WS_MODELING_URL, [])
     this.pc = new RTCPeerConnection()
     this.pc.createDataChannel('unreliable_modeling_cmds')
     this.socket.addEventListener('open', (event) => {

src/lib/withBaseURL.ts

@@ -1,4 +1,5 @@
+import { VITE_KC_API_BASE_URL } from '../env'
+
 export default function withBaseUrl(path: string): string {
-  const baseUrl = 'https://api.dev.kittycad.io'
-  return baseUrl + path
+  return VITE_KC_API_BASE_URL + path
 }

src/setupTests.ts

@@ -1,6 +1,17 @@
 import '@testing-library/jest-dom'
 import util from 'util'
 import fetch from 'isomorphic-fetch'
+import fs from 'fs'
+
+jest.mock('./env', () => {
+  // and set all the env vars from .env.development
+  const mockVars: { [key: string]: string } = {}
+  fs.readFileSync('.env.development', 'utf8')
+    .split('\n')
+    .map((line) => line.split('='))
+    .forEach(([key, value]) => (mockVars[key] = value))
+  return mockVars
+})
 
 class MockRTCPeerConnection {
   constructor() {}