camerondurham · camerondurham · Dec 12, 2025 · Dec 14, 2025
diff --git a/Earthfile b/Earthfile
@@ -80,8 +80,7 @@ test-go:
   RUN cd server && ./test_server_startup.sh
 
 test-web:
-  # make sure webpack builds
-  # TODO: this build takes a while it might be hard to do this as a test
+  # make sure vite builds
   RUN cd web-frontend \
   && apt-get update -y \
   && apt-get install -y nodejs npm \
@@ -103,10 +102,11 @@ build-frontend:
   COPY ./web-frontend .
   RUN apt-get update -y \
     && apt-get install -y npm \
-    && npm install
-  SAVE ARTIFACT /frontend
+    && npm install \
+    && npm run build
+  SAVE ARTIFACT /frontend/dist
 
 frontend:
   FROM pierrezemb/gostatic
-  COPY +build-frontend/frontend/ /srv/http/
+  COPY +build-frontend/dist/ /srv/http/
   SAVE IMAGE runner-frontend
diff --git a/docker/frontend/Dockerfile b/docker/frontend/Dockerfile
@@ -3,9 +3,10 @@ WORKDIR /frontend
 COPY ./web-frontend .
 RUN apt-get update -y \
   && apt-get install -y npm \
-  && npm install
+  && npm install \
+  && npm run build
 
 
 FROM pierrezemb/gostatic as frontend
-COPY --from=builder /frontend/ /srv/http/
+COPY --from=builder /frontend/dist/ /srv/http/
 
diff --git a/web-frontend/.env.example b/web-frontend/.env.example
@@ -0,0 +1,5 @@
+# API Configuration
+# Uncomment and modify to use a local backend server instead of production
+# VITE_API_URL=http://localhost:10100/api/v1/
+
+# By default, the app uses the production API: https://runner.fly.dev/api/v1/
diff --git a/web-frontend/index.html b/web-frontend/index.html
@@ -1,53 +1,13 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
 <head>
-    <meta charset="utf-8" />
-    <title>
-        <%= htmlWebpackPlugin.options.title %>
-    </title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>codecanvas</title>
     <script data-goatcounter="https://u64cam.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
 </head>
-
 <body>
-    <div id="wrapper">
-        <h1>
-            <%= htmlWebpackPlugin.options.title %>
-        </h1>
-        <div class="selectors">
-            <select id="lang-select">langs</select>
-            <select id="theme-select">
-                <option selected>default</option>
-                <option>3024-day</option>
-                <option>3024-night</option>
-                <option>blackboard</option>
-                <option>darcula</option>
-                <option>dracula</option>
-                <option>eclipse</option>
-                <option>elegant</option>
-                <option>erlang-dark</option>
-                <option>idea</option>
-                <option>isotope</option>
-                <option>lucario</option>
-                <option>material</option>
-                <option>monokai</option>
-                <option>solarized</option>
-            </select>
-        </div>
-        <p>
-            <textarea id='code'></textarea>
-        </p>
-
-        <button id="submit-btn">Submit</button>
-        <div class="field output" id="output-field">
-            <div class="field box" id="stdout-field">Stdout: </div>
-            <div class="field box" id="stderr-field">Stderr: </div>
-            <div class="field box" id="err-field">Error: </div>
-        </div>
-        <footer>
-            <%= htmlWebpackPlugin.options.title %> project. <a href="https://github.com/camerondurham/codecanvas">source code</a>
-        </footer>
-    </div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
 </body>
-
 </html>
diff --git a/web-frontend/js/config-utils.js b/web-frontend/js/config-utils.js
diff --git a/web-frontend/js/editor.js b/web-frontend/js/editor.js
diff --git a/web-frontend/js/langs-request.js b/web-frontend/js/langs-request.js
diff --git a/web-frontend/js/load.js b/web-frontend/js/load.js
diff --git a/web-frontend/js/run-request.js b/web-frontend/js/run-request.js