CD
Cloudflare Developers•6mo ago
brumbrum_brum

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?
3 Replies
James
James•6mo 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
brumbrum_brumOP•6mo 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.
javatextbook
javatextbook•4w ago
What about just manually setting the secret in Cloudlare pages dashboard?

Did you find this page helpful?