diff --git a/.gitignore b/.gitignore
index 8506d790..ee67f578 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,7 @@ Thumbs.db
 
 # Deployment Artifacts
 .vercel
+
+# env files
+.env*
+!.env.example
diff --git a/docs/website/.env b/docs/website/.env
deleted file mode 100644
index 2fc80e3a..00000000
--- a/docs/website/.env
+++ /dev/null
@@ -1 +0,0 @@
-PORT=3000
diff --git a/docs/website/.env.example b/docs/website/.env.example
new file mode 100644
index 00000000..b5c4fbb1
--- /dev/null
+++ b/docs/website/.env.example
@@ -0,0 +1,8 @@
+# The port number that the server will listen to.
+PORT=3000
+
+# The build mode to use during the build process.
+# Possible values: "static", "server"
+# - "static": build the app in static mode, which generates static HTML files.
+# - "server": build the app in server mode, which runs the app on a Node.js server.
+BUILD_MODE='server'
diff --git a/docs/website/.gitignore b/docs/website/.gitignore
index c87c9b39..f4f43637 100644
--- a/docs/website/.gitignore
+++ b/docs/website/.gitignore
@@ -25,8 +25,9 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files
+.env*
+!.env.example
 
 # vercel
 .vercel
diff --git a/examples/multi-brand-identity/.env.example b/examples/multi-brand-identity/.env.example
new file mode 100644
index 00000000..3f72657b
--- /dev/null
+++ b/examples/multi-brand-identity/.env.example
@@ -0,0 +1,10 @@
+# The port number that the server will listen to.
+PORT=3001
+
+# This is needed for the build to pass. Else [eslint] Plugin "@typescript-eslint"
+# will conflict with @wso2/eslint-plugin and break the build.
+DISABLE_ESLINT_PLUGIN=true
+
+# The subpath of the application as hosted on the web server.
+# By default, it's configured to serve the app from the root of a domain.
+PUBLIC_URL=/
diff --git a/examples/multi-brand-identity/.env.local b/examples/multi-brand-identity/.env.local
deleted file mode 100644
index 4ee34120..00000000
--- a/examples/multi-brand-identity/.env.local
+++ /dev/null
@@ -1,4 +0,0 @@
-PORT=3001
-# This is needed for the build to pass. Else [eslint] Plugin "@typescript-eslint"
-# will conflict with @wso2/eslint-plugin and break the build.
-DISABLE_ESLINT_PLUGIN=true
diff --git a/examples/multi-brand-identity/.gitignore b/examples/multi-brand-identity/.gitignore
index e40b2c6a..da4f52ca 100644
--- a/examples/multi-brand-identity/.gitignore
+++ b/examples/multi-brand-identity/.gitignore
@@ -11,11 +11,12 @@
 # production
 /build
 
+# env files
+.env*
+!.env.example
+
 # misc
 .DS_Store
-.env.development.local
-.env.test.local
-.env.production.local
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/packages/react/.env.example b/packages/react/.env.example
new file mode 100644
index 00000000..dc996a48
--- /dev/null
+++ b/packages/react/.env.example
@@ -0,0 +1,7 @@
+# The subpath of the storybook static deployment.
+# By default, it's configured to serve the app from the root of a domain.
+STORYBOOK_BASE_URL=''
+
+# The Figma PAT for the Storybook Design Plugin's Figspec integration.
+# https://storybook.js.org/addons/storybook-addon-designs
+STORYBOOK_FIGMA_ACCESS_TOKEN="<YOUR_FIGMA_ACCESS_TOKEN>"
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
index 9b318ca3..e0ef5cd7 100644
--- a/packages/react/.gitignore
+++ b/packages/react/.gitignore
@@ -72,12 +72,9 @@ web_modules/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
+# env files
+.env*
+!.env.example
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache