diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..65ab326
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+HOST=cn-api.getenv.net
+PORT=443
+DIR=
+USE_HTTPS=1
diff --git a/.gitignore b/.gitignore
index fc07c00..426bdac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 /node_modules
 /css
 /js
+.env
diff --git a/package-lock.json b/package-lock.json
index 0febca2..8c71498 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1684,6 +1684,30 @@
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
       "dev": true
     },
+    "dotenv": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
+      "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
+      "dev": true
+    },
+    "dotenv-defaults": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz",
+      "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^6.2.0"
+      }
+    },
+    "dotenv-webpack": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz",
+      "integrity": "sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==",
+      "dev": true,
+      "requires": {
+        "dotenv-defaults": "^1.0.2"
+      }
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
diff --git a/package.json b/package.json
index 28f1f58..956aeff 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "babel-loader": "^8.1.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.3",
+    "dotenv-webpack": "^1.7.0",
     "file-loader": "^6.0.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.14.0",
diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index 1e9349b..6ec94a4 100644
--- a/src/js/components/App.vue
+++ b/src/js/components/App.vue
@@ -135,8 +135,9 @@
                 this.initSocket();
             },
             initSocket() {
+		const protocol = process.env.USE_HTTPS === '1' ? 'wss' : 'ws';
                 try {
-                    this.socket = new WebSocket(`ws://localhost:8000/codenames/api/event.php`);
+                    this.socket = new WebSocket(`${protocol}://${process.env.HOST}:${process.env.PORT}${process.env.DIR}`);
 
                     this.socket.onopen = _ => {
                         this.connected = true;
diff --git a/webpack.config.js b/webpack.config.js
index 5ac79f0..1f7b79e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     mode: 'development',
@@ -48,6 +49,7 @@
         }
     },
     plugins: [
+	new Dotenv(),
         new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
             filename: './css/style.css'