feat: environment

.gitignore

@@ -1 +1,2 @@
-*node_modules/*
+*node_modules/*
+.env

package.json

@@ -16,6 +16,7 @@
     "bulma": "^1.0.2",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

webpack.config.js

@@ -1,20 +1,30 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { DefinePlugin } = require("webpack");
+const dotenv = require("dotenv");
+
+// Load environment variables from .env file into process.env
+const env = dotenv.config().parsed || {};
+
+// Convert the env variables to a format DefinePlugin can understand
+const envKeys = Object.keys(env).reduce((prev, next) => {
+  prev[`process.env.${next}`] = JSON.stringify(env[next]);
+  return prev;
+}, {});
 
 module.exports = {
   entry: "./src/index.js",
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist"),
+    clean: true, // Ensures dist/ is cleaned on each build
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-        },
+        use: "babel-loader",
       },
       {
         test: /\.css$/,
@@ -26,6 +36,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: "./public/index.html",
     }),
+    new DefinePlugin(envKeys), // Inject environment variables into the bundle
   ],
   devServer: {
     static: {