diff --git a/web/.env.development b/web/.env.development
new file mode 100644
index 000000000..90e649592
--- /dev/null
+++ b/web/.env.development
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_ADMIN_USERNAME=admin
+NEXT_PUBLIC_ADMIN_STREAMKEY=abc123
+NEXT_PUBLIC_API_HOST=http://localhost:8080/
\ No newline at end of file
diff --git a/web/.gitignore b/web/.gitignore
index 3c3629e64..f4088b7c6 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1 +1,2 @@
 node_modules
+.env*.local
diff --git a/web/pages/utils/apis.ts b/web/pages/utils/apis.ts
index 90b478570..ee467044a 100644
--- a/web/pages/utils/apis.ts
+++ b/web/pages/utils/apis.ts
@@ -1,14 +1,14 @@
+/* eslint-disable prefer-destructuring */
+const ADMIN_USERNAME = process.env.ADMIN_USERNAME;
+const ADMIN_STREAMKEY = process.env.ADMIN_STREAMKEY;
+const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;
 
-
-const IS_DEV = true;
-const ADMIN_USERNAME = 'admin';
-const ADMIN_STREAMKEY = 'abc123';
-
-const API_LOCATION = 'http://localhost:8080/api/admin/';
+const API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;
 
 // Current inbound broadcaster info
 export const BROADCASTER = `${API_LOCATION}broadcaster`;
 
+
 // Disconnect inbound stream
 export const DISCONNECT = `${API_LOCATION}disconnect`;
 
@@ -56,9 +56,5 @@ export async function fetchData(url) {
   } catch (error) {
     console.log(error)
   }
+  return {};
 }
-
-// fetch error cases
-// json.catch(error => {
-//   error.message; // 'An error has occurred: 404'
-// });