diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..de41e7e
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1,5 @@
+NEXT_PUBLIC_FLOW_ENV=
+NEXT_PUBLIC_EMULATOR_API=
+
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
+NEXT_PUBLIC_WEBSOCKET_URL=ws://localhost:8000
diff --git a/frontend/next.config.js b/frontend/next.config.js
index f2acbac..362371e 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -2,7 +2,8 @@
 
 const removeImports = require("next-remove-imports")(); // get rid of this whenever possible
 
-const backendUrl = process.env.BACKEND_URL || "http://localhost:8000";
+const backendUrl =
+  process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000";
 
 const nextConfig = {
   experimental: {
diff --git a/frontend/src/.env.example b/frontend/src/.env.example
deleted file mode 100644
index 499d449..0000000
--- a/frontend/src/.env.example
+++ /dev/null
@@ -1,5 +0,0 @@
-NEXT_PUBLIC_FLOW_ENV=
-NEXT_PUBLIC_EMULATOR_API=
-
-BACKEND_URL=localhost:8000
-WEBSOCKET_URL=ws://localhost:8000
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 24bc376..e0a4494 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -1,7 +1,8 @@
-// ENV variables
-export const BACKEND_URL = process.env.BACKEND_URL || "localhost:8000";
-// export const WEBSOCKET_URL = process.env.WEBSOCKET_URL || "ws://localhost:8000"
-export const WEBSOCKET_URL = process.env.WEBSOCKET_URL || "ws://" + BACKEND_URL;
+// Public ENV variables
+export const BACKEND_URL =
+    process.env.NEXT_PUBLIC_BACKEND_URL || "localhost:8000";
+export const WEBSOCKET_URL =
+    process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://localhost:8000";
 
 // UI behaviour
 export const DEFAULT_ACTIVE_DASHBOARD_TAB = "overview";