feat: add 'PREACT_APP_' prefixed env vars automatically & pickup .env file (#1671)

Author: rschristian

.changeset/stupid-suns-crash.md

@@ -0,0 +1,7 @@
+---
+'preact-cli': minor
+---
+
+Any environment variables prefixed with 'PREACT_APP_' will automatically be available for reference and use in your application without having to configure `DefinePlugin` any more. Furthermore, if a `.env` file exists in the root of your application, any variables it defines will automatically be available for use.
+
+Huge shout out to [robinvdvleuten](https://github.com/robinvdvleuten) who provided this functionality through the [`preact-cli-plugin-env-vars`](https://github.com/robinvdvleuten/preact-cli-plugin-env-vars) package in the past.

README.md

@@ -328,19 +328,33 @@ The default templates comes with a `.css` file for each component. You can start
 
 ### Using Environment Variables
 
-You can reference and use environment variables in your `preact.config.js` by using `process.env`:
+You can reference and use any environment variable in your application that has been prefixed with `PREACT_APP_` automatically:
+
+> `src/index.js`
 
 ```js
-export default {
-	webpack(config, env, helpers, options) {
-		if (process.env.MY_VARIABLE) {
-			/** You can add a config here that will only used when your variable is truthy **/
-		}
-	},
-};
+console.log(process.env.PREACT_APP_MY_VARIABLE);
 ```
 
-If you'd like to use these variables in your application, you can use the [DefinePlugin] config from our recipes wiki.
+If your variable is not prefixed, you can still add it manually by using your `preact.config.js` (see [DefinePlugin] config in the recipes wiki).
+
+You can set and store variables using a `.env` file in the root of your project:
+
+> `.env`
+
+```
+PREACT_APP_MY_VARIABLE="my-value"
+```
+
+You can also reference environment variables in your `preact.config.js`:
+
+```js
+export default (config, env, helpers, options) => {
+	if (process.env.MY_VARIABLE) {
+		/** You can add a config here that will only used when your variable is truthy **/
+	}
+};
+```
 
 ### Route-Based Code Splitting
 

packages/cli/lib/commands/build.js

@@ -92,6 +92,13 @@ async function command(src, argv) {
 	argv.production = toBool(argv.production);
 
 	let cwd = resolve(argv.cwd);
+
+	// we explicitly set the path as `dotenv` otherwise uses
+	// `process.cwd()` -- this would cause issues in environments
+	// like mono-repos or our test suite subjects where project root
+	// and the current directory differ.
+	require('dotenv').config({ path: resolve(cwd, '.env') });
+
 	if (argv.clean === void 0) {
 		let dest = resolve(cwd, argv.dest);
 		await promisify(rimraf)(dest);

packages/cli/lib/commands/watch.js

@@ -2,6 +2,7 @@ const runWebpack = require('../lib/webpack/run-webpack');
 const { isPortFree, toBool, warn } = require('../util');
 const { validateArgs } = require('./validate-args');
 const getPort = require('get-port');
+const { resolve } = require('path');
 
 const options = [
 	{
@@ -105,6 +106,14 @@ async function command(src, argv) {
 		argv.sw = toBool(argv.sw);
 	}
 
+	let cwd = resolve(argv.cwd);
+
+	// we explicitly set the path as `dotenv` otherwise uses
+	// `process.cwd()` -- this would cause issues in environments
+	// like mono-repos or our test suite subjects where project root
+	// and the current directory differ.
+	require('dotenv').config({ path: resolve(cwd, '.env') });
+
 	argv.port = await determinePort(argv.port);
 
 	if (argv.https || process.env.HTTPS) {

packages/cli/lib/lib/webpack/webpack-base-config.js

@@ -306,11 +306,21 @@ module.exports = function createBaseConfig(env) {
 
 		plugins: [
 			new webpack.NoEmitOnErrorsPlugin(),
-			new webpack.DefinePlugin({
-				'process.env.NODE_ENV': JSON.stringify(
-					isProd ? 'production' : 'development'
-				),
-			}),
+			new webpack.DefinePlugin(
+				Object.keys(process.env)
+					.filter(key => /^PREACT_APP_/.test(key))
+					.reduce(
+						(env, key) => {
+							env[`process.env.${key}`] = JSON.stringify(process.env[key]);
+							return env;
+						},
+						{
+							'process.env.NODE_ENV': JSON.stringify(
+								isProd ? 'production' : 'development'
+							),
+						}
+					)
+			),
 			new webpack.ProvidePlugin({
 				h: ['preact', 'h'],
 				Fragment: ['preact', 'Fragment'],

packages/cli/package.json

@@ -97,6 +97,7 @@
     "critters-webpack-plugin": "^2.5.0",
     "cross-spawn-promise": "^0.10.1",
     "css-loader": "^5.2.4",
+    "dotenv": "^16.0.0",
     "ejs-loader": "^0.5.0",
     "envinfo": "^7.8.1",
     "esm": "^3.2.25",

packages/cli/tests/build.test.js

@@ -309,4 +309,19 @@ describe('preact build', () => {
 			);
 		});
 	});
+
+	it('should use a custom `.env` with prefixed environment variables', async () => {
+		let dir = await subject('custom-dotenv');
+		await build(dir);
+
+		const bundleFile = (await readdir(`${dir}/build`)).find(file =>
+			/bundle\.\w{5}\.js$/.test(file)
+		);
+		const transpiledChunk = await readFile(
+			`${dir}/build/${bundleFile}`,
+			'utf8'
+		);
+		// "Hello World!" should replace 'process.env.PREACT_APP_MY_VARIABLE'
+		expect(transpiledChunk.includes('console.log("Hello World!")')).toBe(true);
+	});
 });

packages/cli/tests/subjects/custom-dotenv/.env

@@ -0,0 +1 @@
+PREACT_APP_MY_VARIABLE="Hello World!"

packages/cli/tests/subjects/custom-dotenv/index.js

@@ -0,0 +1 @@
+console.log(process.env.PREACT_APP_MY_VARIABLE);

packages/cli/tests/subjects/custom-dotenv/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-custom-dotenv"
+}