VitePluginHtmlEnv

README.md

@@ -21,7 +21,7 @@ Starter template based on [Vite](https://vitejs.dev/guide/) with a small boilerp
 > React Router enables _client side routing_. Client side routing allows your app to update the URL from a link click without making another request for another document from the server.
 > There is a [good intrudoction](https://www.youtube.com/watch?v=Ul3y1LXxzdU) on YouTube.
 
-#### [React Hooks](https://reactjs.org/docs/hooks-intro.html)
+#### [usehooks-ts](https://usehooks-ts.com/)
 
 > Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
 >
@@ -44,6 +44,8 @@ Starter template based on [Vite](https://vitejs.dev/guide/) with a small boilerp
 
 > Over 100,000 open source vector icons as a React Component.
 
+### [vite-plugin-html-env](https://github.com/lxs24sxl/vite-plugin-html-env)
+
 ## Tips
 
 ### VS Code extensions
@@ -77,6 +79,8 @@ yarn add flowbite flowbite-react
 yarn add --dev @iconify/react
 
 yarn add usehooks-ts
+
+yarn add vite-plugin-html-env -D
 ```
 
 ### src/index.css

index.html

@@ -5,7 +5,9 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/src/assets/react.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>React Template</title>
+  <title>
+    <{VITE_WEBSITE_NAME}>
+  </title>
   <description></description>
   <keywords></keywords>
   <meta name="author" content="John Doe">

package.json

@@ -30,6 +30,7 @@
 		"postcss": "^8.4.21",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^4.9.3",
-		"vite": "^4.0.0"
+		"vite": "^4.0.0",
+		"vite-plugin-html-env": "^1.2.7"
 	}
 }

vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
+import VitePluginHtmlEnv from 'vite-plugin-html-env';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [svgr(), react()],
+	plugins: [svgr(), react(), VitePluginHtmlEnv()],
 });