diff --git a/.gitignore b/.gitignore
index 3627f21481..829e51d9d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,7 +37,7 @@ frontend/src/constants/env.ts
 **/locust-scripts/__pycache__/
 **/__debug_bin
 
-frontend/*.env
+frontend/.env
 pkg/query-service/signoz.db
 
 pkg/query-service/tests/test-deploy/data/
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
index 2e3d78bb02..a106e6a11e 100644
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -1,5 +1,4 @@
 node_modules
 .vscode
 build
-.env
 .git
diff --git a/frontend/example.env b/frontend/example.env
new file mode 100644
index 0000000000..0ddbfb2837
--- /dev/null
+++ b/frontend/example.env
@@ -0,0 +1,7 @@
+NODE_ENV="development"
+BUNDLE_ANALYSER="true"
+FRONTEND_API_ENDPOINT="http://localhost:3301/"
+INTERCOM_APP_ID="intercom-app-id"
+
+PLAYWRIGHT_TEST_BASE_URL="http://localhost:3301"
+CI="1"
\ No newline at end of file
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 41f62b5e74..770e40ca30 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -26,6 +26,7 @@ const plugins = [
 	}),
 	new webpack.DefinePlugin({
 		'process.env': JSON.stringify({
+			NODE_ENV: process.env.NODE_ENV,
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		}),
diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js
index a7e83c5fe4..79c6f7857f 100644
--- a/frontend/webpack.config.prod.js
+++ b/frontend/webpack.config.prod.js
@@ -5,6 +5,7 @@ const { resolve } = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const dotenv = require('dotenv');
 const webpack = require('webpack');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -13,6 +14,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const Critters = require('critters-webpack-plugin');
 
+dotenv.config();
+
 const cssLoader = 'css-loader';
 const sassLoader = 'sass-loader';
 const styleLoader = 'style-loader';
@@ -31,6 +34,7 @@ const plugins = [
 	new webpack.DefinePlugin({
 		'process.env': JSON.stringify({
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
+			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		}),
 	}),
 	new MiniCssExtractPlugin(),