Public ENV vars not automatically set when using vercel CLI

Help
1

I’m having trouble accessing the NEXT_PUBLIC_ env vars in my client-side bundle since moving from the vercel Git Integration to using the vercel CLI via a GitHub action.

I have a function like the following in a React client component:

const getURL = () => {
  let url =
    process?.env?.NEXT_PUBLIC_SITE_URL ??
    process?.env?.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? 
    'http://localhost:3000/';
  url = url.startsWith('http') ? url : `https://${url}`;
  url = url.endsWith('/') ? url : `${url}/`;
  return url;
};

When I was using the vercel Git Integration, the NEXT_PUBLIC_VERCEL_BRANCH_URL var was being set correctly, however since moving to the vercel CLI, this is no longer the case - so in a Preview deployment, the above function returns localhost:3000, as the env vars are not set.

Client-side code built and deployed via CLI:

image
image2254×692 69.2 KB

Client-side code built and deployed via Vercel Git Integration:

image
image2338×1050 169 KB

Deployment script:

name: Vercel Dev Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - dev

jobs:
  Deploy-Dev:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy >deployment-url.txt --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

      - name: Set deployment url env var
        id: get-deployment-url
        run: echo "DEPLOYMENT_URL=$(cat deployment-url.txt)"

      - name: Alias deployment url to dev url
        run: vercel alias ${{ steps.get-deployment-url.outputs.DEPLOYMENT_URL }} <my-url>.vercel.app --token=${{ secrets.VERCEL_TOKEN }}

My assumption was the build or deploy script would automatically set the vars, but seems this is not the case. I have tried setting them manually via vercel deploy --env, but this didn’t work either.

Do we have to set these NEXT_PUBLIC vars manually somehow? I have read through the docs, but couldn’t see anything obvious.

2

Ok - I’ve solved my underlying issue, which was to set the NEXT_PUBLIC_VERCEL_BRANCH_URL var by setting it as a top-level env var in the GitHub Actions settings:

...
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  NEXT_PUBLIC_VERCEL_BRANCH_URL: <my-url>.vercel.app
...

This is then picked up by the vercel build step. Seems odd to me that you can explicitly specify build args for vercel deploy, but not for vercel build.

I’m still not sure that I’m supposed to be setting it this way - or maybe these predefined env vars are only set automatically when using the vercel Git Integration.

It would also be great to be able to set branch specific env vars for Preview deployments without using the vercel Git Integration.

2 Likes
3

Thanks for sharing how you got this to work, Alex! I’ll also share your feedback with the team.

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.