Troubleshooting dotenv Preloading in GitHub Actions

[yslinear]

I encountered an issue while attempting to preload dotenv during the execution of GitHub Actions. According to the official documentation, it suggests modifying the package.json file as follows:

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/vite dev",
  "build": "node -r dotenv/config ./node_modules/.bin/vite build",
  "preview": "node -r dotenv/config ./node_modules/.bin/vite preview"
},

However, when trying to run pnpm run dev, I encountered the following error:

/Users/yslinear/Documents/new-repo/node_modules/.bin/vite:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list

Upon inspecting the ./node_modules/.bin/vite file, I discovered that it is a Bash script:

# Content of ./node_modules/.bin/vite
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

# ... rest of the script ...

My concern is how node can execute a Bash script. The contents of the script seem correct, but I'm unsure why this error is occurring. Is there any potential issue with the provided tutorial or the script itself?

Node.js version: 21.4.0

[yslinear]

I'm not a front-end expert, and upon inspection, I observed that when executing the pnpm install command, multiple bash script files are generated within the ./node_modules/.bin directory.

Conversely, opting for npm install resulted in the presence of .js files in the ./node_modules/.bin directory.

[motdotla]

yes, that is normal for many npm libs to include a binary script that can be executed. that said, here is what we recommend going forward:

use dotenvx instead of dotenv preloading. It uses dotenv under the hood but works everywhere, supports multiple environments, and also offers optional encryption of your envs.

npm install @dotenvx/dotenvx

"scripts": {
  "dotenvx": "dotenvx",
  "dev": "dotenvx run --debug -- ./node_modules/.bin/vite dev",
  "build": "dotenvx run -- /node_modules/.bin/vite build",
  "preview": "dotenvx run -- ./node_modules/.bin/vite preview"
},

(there's also a guide here that uses the binary instead of the npm package. choose what you prefer. github actions guide)

[yslinear]

I discovered there might be an issue when using dotenvx with FirebaseExtended/action-hosting-deploy@v0. Running firebase deploy locally works fine, indicating that dotenvx is functioning properly. This suggests that the previous use of dotenv was also normal and that there might be complications when combining it with FirebaseExtended/action-hosting-deploy@v0.

Later on, I attempted deployment without using GitHub Actions, opting instead to use the Cloud Run built-in trigger in GCP. This involves deploying in Docker format by writing a Dockerfile in the project. However, I encountered some issues, though the details escape me as it was late at night.

Upon further exploration, I stumbled upon the dotenvx decrypt command in the dotenvx documentation, which can generate the .env file directly using .env.keys in conjunction with the repository's .env.vault. So, in the workflow, I added:

- run: 'echo "DOTENV_KEY_PRODUCTION=$DOTENV_KEY" > .env.keys'
- run: dotenvx decrypt

Additionally, I reverted the package.json to:

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  "preview": "vite preview"
}

This ensured that the GitHub Actions Runner, during the build, had a similar environment to the local setup when a .env file is present. While this approach may not be standard, it appears to be the most direct and simple solution at the moment.

Ultimately, I re-implemented the use of FirebaseExtended/action-hosting-deploy@v0, made some adjustments to the GitHub Actions workflow file, and successfully completed the deployment.

full workflow

@motdotla I apologize for not mentioning earlier that I am using FirebaseExtended/action-hosting-deploy@v0. If you don't have any additional comments or explanations, you can close this issue. Thank you!