load envs in webpack

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-.DS_Store
+.DS_Store
+.env

package.json

@@ -15,6 +15,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "css-loader": "^7.1.2",
+    "dotenv-webpack": "^8.1.0",
     "file-loader": "^6.2.0",
     "gh-pages": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import Home from "./pages/Home";
-import Other from "./pages/Other";
+import Santa from "./pages/Santa";
 import {
   createHashRouter,
   createRoutesFromElements,
@@ -12,7 +12,7 @@ import {
 const router = createHashRouter(
   createRoutesFromElements(
     <>
-      <Route path="/other" element={<Other />} />
+      <Route path="/santa" element={<Santa />} />
       <Route path="*" element={<Home />} />
     </>
   )

src/pages/Home.tsx

@@ -5,9 +5,9 @@ import "../App.css";
 const Home = () => {
   return (
     <>
-      <Link to="/other">go to other</Link>
+      {/* <Link to="/other">go to other</Link>
       <p>test css</p>
-      <img className="img-dvd" src={DVDImg} />
+      <img className="img-dvd" src={DVDImg} /> */}
     </>
   )
 }

src/pages/Santa.tsx

@@ -0,0 +1,9 @@
+const Santa = () => {
+  return (
+    <>
+      {process.env.SENDGRID_API_KEY}
+    </>
+  )
+}
+
+export default Santa;

webpack.dev.config.ts

@@ -1,4 +1,5 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     entry: './src/index.tsx',
@@ -14,14 +15,7 @@ module.exports = {
             },
             {
                 test: /\.(jpe?g|gif|png|svg)$/i,
-                use: [
-                    {
-                        loader: 'url-loader',
-                        options: {
-                            limit: 10000
-                        }
-                    }
-                ]
+                type: 'asset/resource'
             },
             {
                 test: /\.css$/i,
@@ -32,10 +26,13 @@ module.exports = {
     devServer: {
         historyApiFallback: true,
     },
-    plugins: [new HtmlWebpackPlugin({
-        title: 'ewan sheldon',
-        favicon: "./public/me.jpg"
-    })],
+    plugins: [new Dotenv({
+        path: './.env', // Path to .env file (this is the default)
+        }),
+        new HtmlWebpackPlugin({
+            title: 'ewan sheldon',
+            favicon: "./public/me.jpg"
+        })],
     resolve: {
         extensions: ['.js', '.tsx'] // add your other extensions here
     }

webpack.prod.config.ts

@@ -24,7 +24,10 @@ module.exports = {
     },
     plugins: [new HtmlWebpackPlugin({
         title: 'ewan sheldon',
-        favicon: "./public/me.jpg"
+        favicon: "./public/me.jpg",
+        'process.env': {
+            'SENDGRID_API_KEY': JSON.stringify(process.env.SENDGRID_API_KEY)
+        }
     })],
     resolve: {
         extensions: ['.js', '.tsx'] // add your other extensions here