diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..214f127f
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+TILE_SERVER_ENDPOINT=https://tiles.streets.gl
+TILES_ENDPOINT_TEMPLATE='https://tiles.streets.gl/vector/{z}/{x}/{y}'
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index bc848bae..8663db9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 .idea
 build
 .DS_Store
-coverage
\ No newline at end of file
+coverage
+.env
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 979d712d..8cd498ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
 				"d3": "^7.6.1",
 				"dagre": "^0.8.5",
 				"dagre-d3": "^0.6.4",
+				"dotenv": "^16.4.7",
 				"earcut": "^2.2.2",
 				"lerc": "^4.0.4",
 				"path-browserify": "^1.0.1",
@@ -6149,6 +6150,18 @@
 			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
 			"dev": true
 		},
+		"node_modules/dotenv": {
+			"version": "16.4.7",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+			"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
 		"node_modules/draco3d": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.4.1.tgz",
diff --git a/package.json b/package.json
index 81e296a1..b3797b40 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
 		"d3": "^7.6.1",
 		"dagre": "^0.8.5",
 		"dagre-d3": "^0.6.4",
+		"dotenv": "^16.4.7",
 		"earcut": "^2.2.2",
 		"lerc": "^4.0.4",
 		"path-browserify": "^1.0.1",
diff --git a/src/app/Config.ts b/src/app/Config.ts
index b771e110..a4c06074 100644
--- a/src/app/Config.ts
+++ b/src/app/Config.ts
@@ -140,9 +140,9 @@ const Config = {
 		{url: 'https://overpass.openstreetmap.ru/cgi/interpreter', isEnabled: false},
 		{url: 'https://overpass.kumi.systems/api/interpreter', isEnabled: false}
 	],
-	TileServerEndpoint: 'https://tiles.streets.gl',
+	TileServerEndpoint: process.env.TILE_SERVER_ENDPOINT,
 	SlippyEndpointTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-	TilesEndpointTemplate: 'https://tiles.streets.gl/vector/{z}/{x}/{y}'
+	TilesEndpointTemplate: process.env.TILES_ENDPOINT_TEMPLATE
 };
 
 export default Config;
diff --git a/webpack.config.js b/webpack.config.js
index 92ce7f7c..0d4bc257 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const dotenv = require('dotenv');
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
@@ -12,6 +13,12 @@ const COMMIT_SHA = childProcess.execSync('git rev-parse HEAD').toString().trim()
 const COMMIT_BRANCH = childProcess.execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
 const VERSION = require('./package.json').version;
 
+const isProduction = process.env.NODE_ENV === 'production'
+
+if (!isProduction) {
+	dotenv.config();
+}
+
 module.exports = (env, argv) => ([{
 	entry: './src/app/App.ts',
 	output: {
@@ -54,6 +61,11 @@ module.exports = (env, argv) => ([{
 			extensions: ['ts', 'tsx']
 		}),
 		new DefinePlugin({
+			'process.env': JSON.stringify(
+				argv.mode === 'production'
+						? process.env // Use system environment variables in production
+						: dotenv.config().parsed // Use .env variables in development
+		),
 			COMMIT_SHA: JSON.stringify(COMMIT_SHA),
 			COMMIT_BRANCH: JSON.stringify(COMMIT_BRANCH),
 			VERSION: JSON.stringify(VERSION)