GitHub actions not passing environment variables to Vite build

I am trying to create a GitHub action to deploy a React Application on a S3 Bucket. The issues that I am having are related to the environment variables being backed during build with Vite.

When all the checks on the GitHub action pass and the app is deployed, seems like none of the ENVS have been passed in.

name: Upload to S3

on:
  pull_request:
  push:
    branches:
      - dev
jobs:
  build:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-region: ${{ secrets.AWS_REGION }}
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        env:
          VITE_APP_BASE_URL: ${{ secrets.VITE_APP_BASE_URL }}
          AWS_S3_BUCKET: ${{ secrets.AWS_REBRAND_BUCKET_NAME }}
          VITE_APP_ALGOLIA_APP_ID:  ${{ secrets.VITE_APP_ALGOLIA_APP_ID }}
          VITE_APP_ENVIRONMENT: development
      
      - name: Yarn Install
        run: yarn install
      - name: Yarn Build
        run: yarn build
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./build/ s3://${{ secrets.AWS_REBRAND_BUCKET_NAME }} --delete

my yarn build command is just "build": "vite build". Something strange I have noticed is that the configure secrtes such as aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} are passed correctly.

I’m not sure why the rest of my envs are not passed at all. Is my yaml not correct?

>Solution :

You have placed the environment variables under the Configure AWS Credentials step. You should move these variables to the Yarn Build step, as that is where they are needed. Another option is to move them to the job level to make them accessible at each step.