I’m encountering difficulties while trying to utilize environment variables in my GitHub Actions workflow, particularly when working with Vite as my development environment for a React web application. I’ve correctly configured my secrets in GitHub and referenced these environment variables in my GitHub Actions YAML file and Vite configuration. However, it appears that some variables are not being passed correctly.

I’ve defined the following necessary environment variables (VITE_EMAIL_SERVICE, VITE_EMAIL_TEMPLATE, VITE_EMAIL_SERVICE_KEY) in the build step of my workflow.

While secrets.GITHUB_TOKEN is accessed correctly in the workflow, the variables VITE_EMAIL_SERVICE, VITE_EMAIL_TEMPLATE, and VITE_EMAIL_SERVICE_KEY don’t seem to be properly passed to my application during build and deployment. I’ve added debugging steps to print all available environment variables in GitHub Actions, and I’ve confirmed that these specific variables are either missing or do not contain the expected values.

What could be the reasons behind these environment variables not being passed correctly in my workflow? What additional configurations should I consider in my GitHub Actions YAML file or in my Vite setup to ensure that environment variables are handled correctly?

.env:

VITE_EMAIL_TEMPLATE = "example"
VITE_EMAIL_SERVICE = "example"
VITE_EMAIL_SERVICE_KEY = "example"

deploy.yaml:

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Print environment variables
        env:
          VITE_EMAIL_SERVICE: ${{ secrets.VITE_EMAIL_SERVICE }}
          VITE_EMAIL_TEMPLATE: ${{ secrets.VITE_EMAIL_TEMPLATE }}
          VITE_EMAIL_SERVICE_KEY: ${{ secrets.VITE_EMAIL_SERVICE_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
            echo "VITE_EMAIL_SERVICE=$VITE_EMAIL_SERVICE"
            echo "VITE_EMAIL_TEMPLATE=$VITE_EMAIL_TEMPLATE"
            echo "VITE_EMAIL_SERVICE_KEY=$VITE_EMAIL_SERVICE_KEY"
            echo "GITHUBTOKEN=$GITHUB_TOKEN"

      - name: Build project
        run: npm run build
        env:
          VITE_EMAIL_SERVICE: ${{ secrets.VITE_EMAIL_SERVICE }}
          VITE_EMAIL_TEMPLATE: ${{ secrets.VITE_EMAIL_TEMPLATE }}
          VITE_EMAIL_SERVICE_KEY: ${{ secrets.VITE_EMAIL_SERVICE_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

GitHub environment variables:
enter image description here

I tried to deploy on my git-pages but env variables does not assign on my “deploy.yaml”, at the echo of these variables they are empty. But “${{ secrets.GITHUB_TOKEN }}” goes correctly