addition of --env flag to cli-hydrogen preview

packages/cli-hydrogen/src/cli/commands/hydrogen/preview.ts

@@ -16,6 +16,12 @@ export default class Preview extends Command {
       default: '3000',
       env: 'SHOPIFY_FLAG_PORT',
     }),
+    env: Flags.string({
+      char: 'e',
+      description: 'the file path to your .env',
+      default: '',
+      env: 'SHOPIFY_FLAG_ENV_PATH',
+    }),
     target: Flags.string({
       char: 't',
       description: 'the target environment (worker or node)',
@@ -29,9 +35,10 @@ export default class Preview extends Command {
     const {flags} = await this.parse(Preview)
     const directory = flags.path ? path.resolve(flags.path) : process.cwd()
     const port = parseInt(flags.port, 10)
+    const envPath = flags.env
 
     if (flags.target === 'worker') {
-      await previewInWorker({directory, port})
+      await previewInWorker({directory, port, envPath})
     } else if (flags.target === 'node') {
       await previewInNode({directory, port})
     }

packages/cli-hydrogen/src/cli/services/preview.test.ts

@@ -33,6 +33,7 @@ describe('hydrogen preview', () => {
       await file.inTemporaryDirectory(async (tmpDir) => {
         // Given
         const port = 5000
+        const envPath = ''
         const expectedConfig = {
           port,
           workerFile: 'dist/worker/index.js',
@@ -48,7 +49,45 @@ describe('hydrogen preview', () => {
         vi.mocked(path.findUp).mockResolvedValue(pathToExecutable)
 
         // When
-        await previewInWorker({directory: tmpDir, port})
+        await previewInWorker({directory: tmpDir, port, envPath})
+
+        // Then
+        expect(file.write).toHaveBeenCalledWith(
+          path.join(tmpDir, `mini-oxygen.config.json`),
+          JSON.stringify(expectedConfig, null, 2),
+        )
+      })
+    })
+
+    it('writes a local mini oxygen config file with env bindings from a .env file', async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        const tmpEnv = `${tmpDir}/.env`
+
+        // create a .env file in tmpDir
+        file.writeSync(tmpEnv, `FOO="BAR"\nBAZ="BAX"`)
+
+        // Given
+        const port = 5000
+        const expectedConfig = {
+          port,
+          workerFile: 'dist/worker/index.js',
+          assetsDir: 'dist/client',
+          buildCommand: 'yarn build',
+          modules: true,
+          watch: true,
+          buildWatchPaths: ['./src'],
+          autoReload: true,
+          env: {
+            FOO: 'BAR',
+            BAZ: 'BAX',
+          },
+        }
+        const pathToExecutable = path.join(tmpDir, 'mini-oxygen.js')
+        file.write(pathToExecutable, '// some executable file')
+        vi.mocked(path.findUp).mockResolvedValue(pathToExecutable)
+
+        // When
+        await previewInWorker({directory: tmpDir, port, envPath: tmpEnv})
 
         // Then
         expect(file.write).toHaveBeenCalledWith(
@@ -66,7 +105,7 @@ describe('hydrogen preview', () => {
         vi.mocked(path.findUp).mockResolvedValue(pathToExecutable)
 
         // When
-        await previewInWorker({directory: tmpDir, port: 4000})
+        await previewInWorker({directory: tmpDir, port: 4000, envPath: ''})
 
         // Then
         expect(system.exec).toHaveBeenCalledWith(
@@ -83,7 +122,7 @@ describe('hydrogen preview', () => {
 
       await file.inTemporaryDirectory(async (tmpDir) => {
         // When
-        const run = previewInWorker({directory: tmpDir, port: 4000})
+        const run = previewInWorker({directory: tmpDir, port: 4000, envPath: ''})
 
         // Then
         await expect(run).rejects.toThrow(/Could not locate the executable file to run Oxygen locally./)

packages/cli-hydrogen/src/cli/services/preview.ts

@@ -6,6 +6,14 @@ interface PreviewOptions {
   port: number
 }
 
+interface PreviewOptionsWorker extends PreviewOptions {
+  envPath: string
+}
+
+interface EnvConfig {
+  env: {[key: string]: string}
+}
+
 export async function previewInNode({directory, port}: PreviewOptions) {
   const buildOutputPath = await path.resolve(directory, 'dist/node')
 
@@ -33,7 +41,7 @@ export async function previewInNode({directory, port}: PreviewOptions) {
   })
 }
 
-export async function previewInWorker({directory, port}: PreviewOptions) {
+export async function previewInWorker({directory, port, envPath}: PreviewOptionsWorker) {
   const config = {
     port,
     workerFile: 'dist/worker/index.js',
@@ -43,6 +51,7 @@ export async function previewInWorker({directory, port}: PreviewOptions) {
     watch: true,
     buildWatchPaths: ['./src'],
     autoReload: true,
+    ...(envPath && parseEnvPath(envPath)),
   }
 
   await file.write(path.resolve(directory, 'mini-oxygen.config.json'), JSON.stringify(config, null, 2))
@@ -53,6 +62,25 @@ export async function previewInWorker({directory, port}: PreviewOptions) {
     }
   }
 
+  function parseEnvPath(envPath: string): EnvConfig {
+    const envConfig: EnvConfig = {
+      env: {},
+    }
+
+    if (envPath) {
+      const variables = file.readSync(envPath)
+
+      variables.split('\n').forEach((entry) => {
+        const keyValue = entry.split('=')
+        const value = keyValue[1].replace(/['"]+/g, '')
+        const key = keyValue[0]
+        envConfig.env[key] = value
+      })
+    }
+
+    return envConfig
+  }
+
   process.on('SIGINT', cleanUp.bind(null, {exit: true}))
 
   const executable = await oxygenPreviewExecutable()