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>

.env.development

@@ -0,0 +1,2 @@
+VITE_KC_API_WS_MODELING_URL=wss://api.dev.kittycad.io/ws/modeling/commands
+VITE_KC_API_BASE_URL=https://api.dev.kittycad.io

.env.production

@@ -0,0 +1,2 @@
+VITE_KC_API_WS_MODELING_URL=wss://api.dev.kittycad.io/ws/modeling/commands
+VITE_KC_API_BASE_URL=https://api.dev.kittycad.io

.github/workflows/format.yml

@@ -8,9 +8,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn fmt-check

.github/workflows/test.yml

@@ -8,10 +8,10 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn build:wasm
       - run: yarn simpleserver:ci

.nvmrc

@@ -0,0 +1 @@
+v20.5.0

package.json

@@ -28,7 +28,7 @@
     "react-json-view": "^1.21.3",
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.14.2",
-    "sketch-helpers": "^0.0.3",
+    "sketch-helpers": "^0.0.4",
     "swr": "^2.0.4",
     "toml": "^3.0.0",
     "ts-node": "^10.9.1",
@@ -45,13 +45,13 @@
     "build:local": "vite build",
     "build:both": "vite build",
     "build:both:local": "yarn build:wasm && vite build",
-    "test": "jest",
+    "test": "jest --watchAll=true --forceExit",
-    "test:nowatch": "jest --watchAll=false --forceExit",
+    "test:nowatch": "jest --watchAll=false --forceExit --detectOpenHandles --silent=false",
     "test:rust": "(cd src/wasm-lib && cargo test && cargo clippy)",
     "test:cov": "jest --watchAll=false --coverage=true --forceExit",
     "simpleserver:ci": "http-server ./public --cors -p 3000 &",
     "simpleserver": "http-server ./public --cors -p 3000",
-    "fmt":       "prettier --write ./src",
+    "fmt": "prettier --write ./src",
     "fmt-check": "prettier --check ./src",
     "build:wasm": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
     "remove-importmeta": "sed -i 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",

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 =
+const initialise = async () => {
-  typeof window === 'undefined'
+  const baseUrl =
-    ? 'http://127.0.0.1:3000'
+    typeof window === 'undefined'
-    : window.location.origin.includes('tauri://localhost')
+      ? 'http://127.0.0.1:3000'
-    ? 'tauri://localhost'
+      : window.location.origin.includes('tauri://localhost')
-    : window.location.origin.includes('localhost')
+      ? 'tauri://localhost'
-    ? 'http://127.0.0.1:3000'
+      : window.location.origin.includes('localhost')
-    : window.location.origin
+      ? 'http://localhost:3000'
-const fullUrl = url + '/wasm_lib_bg.wasm'
+      : window.location.origin
-export const initPromise = init(fullUrl)
+  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 VITE_KC_API_BASE_URL + path
-  return baseUrl + 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() {}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["vite/client"],
     "target": "esnext",
     "lib": [
       "dom",

vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />