Cloudflare Developers•2mo ago

ENV variables with wrangler pages CLI (VITE REACT)

How do I add env variables to a deployment of a pages application? I am writing a github action that is suppossed to deploy my pages application, and I am trying to grap some secrets from the repo, and add them as env variables for the pages. I have tried this:

- name: Deploy to Cloudflare Pages
        working-directory: ./apps/frontend
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
          MY_VARIABLE: ${{ secrets.MY_VALUE}}
        run: |
          wrangler pages deploy ./dist --project-name=frontend-preview --branch=main --commit-dirty=true

- name: Deploy to Cloudflare Pages
        working-directory: ./apps/frontend
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
          MY_VARIABLE: ${{ secrets.MY_VALUE}}
        run: |
          wrangler pages deploy ./dist --project-name=frontend-preview --branch=main --commit-dirty=true

But MY_VARIABLE does not show up in the pages dashboard. How can this be done?

2 Replies

James•2mo ago

You would have to manually run wrangler pages secret put ... before your deploy command For non-secret and static vars, you could use wrangler.toml nowadays too I believe

brumbrum_brum•2mo ago

Okay thank you! So I tried those solution but they did not work. Because I was building my React app with Vite, the ENV variables were taken from the .env file. I ended up manually creating an .env file in my github action, like this:

- name: Create .env file
        working-directory: ./apps/frontend
        run: |
          echo 'VITE_VARIABLE="${{ secrets.VALUE}}"' >> .env
          echo 'VITE_VARIABLE2="${{ secrets.VALUE2}}"' >> .env

- name: Create .env file
        working-directory: ./apps/frontend
        run: |
          echo 'VITE_VARIABLE="${{ secrets.VALUE}}"' >> .env
          echo 'VITE_VARIABLE2="${{ secrets.VALUE2}}"' >> .env

And the working-directory of course being where my app is located and built from.

Gaming

Programming

ENV variables with wrangler pages CLI (VITE REACT)