diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..57727ee9d
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+PORT=4000
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 289d6b5bd..6988d8081 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,7 @@ node_modules/
 license.config.json
 license-header.txt
 dist/
-.vscode/
\ No newline at end of file
+.vscode/
+.env
+# this is for jetbrain IDEs
+.idea/
\ No newline at end of file
diff --git a/dev-server.js b/dev-server.js
index 9dfc3b301..30f149d1d 100644
--- a/dev-server.js
+++ b/dev-server.js
@@ -2,9 +2,11 @@ const express = require("express");
 const { generateDevHtml, build } = require("./utils.js");
 const { argv } = require('node:process');
 const chalk = require('chalk');
+const dotenv = require('dotenv');
+dotenv.config();
 
 const app = express();
-let port = 4000; // Starting port
+let port = process.env.PORT ?? 4000; // Starting port
 const maxAttempts = 10; // Maximum number of ports to try
 const env = argv[2] ?? "dev";
 
diff --git a/package-lock.json b/package-lock.json
index 9087a0963..06af7d6dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "devDependencies": {
         "chalk": "^4.1.0",
         "clean-css": "^5.3.2",
+        "dotenv": "^16.4.5",
         "express": "^4.18.2",
         "html-entities": "^2.3.3",
         "nodemon": "^2.0.22",
@@ -781,6 +782,18 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
diff --git a/package.json b/package.json
index e9074d8f7..986ff893c 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,12 @@
   "devDependencies": {
     "chalk": "^4.1.0",
     "clean-css": "^5.3.2",
-    "html-entities": "^2.3.3",
-    "webpack": "^5.88.2",
+    "dotenv": "^16.4.5",
     "express": "^4.18.2",
+    "html-entities": "^2.3.3",
     "nodemon": "^2.0.22",
     "uglify-js": "^3.17.4",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.1"
   },
   "scripts": {