Environment variables are essential for managing sensitive information and configuring your application without hardcoding values. Vercel allows us to modify these variables using project settings. Still, when deploying any application, verifying the environment variables before building your application is crucial to avoid unexpected issues and waste the build time.

This blog post will guide you through effective methods to ensure your environment variables are correctly set up.

Understanding Environment Variables in Vercel

Before diving into verification, let's quickly recap how environment variables work in Vercel:

• Environment variables are stored securely in Vercel's project settings & the team settings, if you're using shared variables.

• They are accessible within your application code using process.env (Next.js) or equivalent methods in other languages.

• You can define variables for different environments (production, preview, development) to manage settings based on the deployment context.

How to configure environment verification in Vercel when building the project?

Before we start, I assume you have already deployed and configured a project in your Vercel account.

1. Create a build-step.sh file in the root directory of your application.

2. Add the following code to the .sh file.

#!/bin/bash

# List of required environment variables
env_vars=("VAR1" "VAR2" "VAR3")

missing_vars=()
for var in "${env_vars[@]}"
do
if [ -z "${!var}" ]; then
  missing_vars+=("$var")
  echo "🛑 - Missing required environment variables: $var"
fi
done

if [ ${#missing_vars[@]} -gt 0 ]; then
  echo "🛑 - Build cancelled"
  exit 0
fi

echo "🧪 - No missing environment variables found!"
echo "✅ - Build can proceed"

exit 1;

3. Replace "VAR1", "VAR2", "VAR3" with the actual variables you want to verify while building your application.

Before, pushing your codes to GitHub, you'll need to make some adjustments in the deployment settings.

4. Go to Project Settings > Git, and scroll down to "ignore build steps".

5. Here, select "Run my Bash Script" in behavior, and enter the following command:
   bash build-step.sh & Hit the Save button.

6. Now, push your code to GitHub.

During the build, you can check the logs to see if it is verifying the environment variables. The outputs will look like this:

Missing variables found:

No variables missing:

With the help of the provided codes for the shell script, you can effectively verify your environment variables before building your application on Vercel. This proactive approach significantly reduces the risk of deployment failures due to missing or incorrect variable values.

Don't forget to adapt the script to match your specific environment variable requirements and consider additional checks as needed.

With the help of environment variable verification in your development workflow, you'll enhance your application's reliability and maintainability. You can also use them as feature-flags as well.

Conclusion

• Utilize Vercel's built-in environment variable management features.

• Employ the Bash script to automate verification and error handling.

• Regularly review and update your environment variables to ensure accuracy.

• Consider integrating verification into your CI/CD pipeline for added security.

P.P.S. I'm working on the later parts of the system design series as well and will be releasing them soon. Don't forget to follow me for more such content.