Managing Secrets & APIs with Vercel, Netlify, and Environment Variables

5

When building full stack apps, developers often use keys and secrets. These keys help connect to APIs, databases, and third-party services. But here’s the problem: if someone sees your secret key, they can use it too—and that can be dangerous.

So how do full stack developers keep their secrets safe? The answer is environment variables. These are hidden values stored outside your code. If you’re learning web development through full stack developer classes, understanding how to manage secrets and environment variables is very important.

In this blog, we’ll explain what environment variables are, why they matter, and how to manage them using Vercel and Netlify. These are two of the most popular platforms for deploying full stack apps.

What Are Secrets and Environment Variables?

Let’s start with some basic terms:

Secrets

Secrets are sensitive details you don’t want to share publicly. Examples include:

• API keys (like Google Maps or Stripe)

• Database passwords

• Tokens (used for login or authentication)

• Private URLs

If you add secrets directly to your code, others can see them—especially if your code is online, like on GitHub. That’s why we use environment variables.

Environment Variables

Environment variables are like secret containers. They store sensitive values safely and keep them separate from your code. You can add, update, and delete them without changing your code files.

In JavaScript (Node.js), you use process.env to access environment variables. For example:

const apiKey = process.env.API_KEY;

This line will fetch your API key from the environment variable called API_KEY.

Why Use Environment Variables?

There are many good reasons to use environment variables:

• Security: Hide secret values from the public

• Flexibility: Change settings without editing code

• Teamwork: Share your code without sharing secrets

• Easy Deployment: Platforms like Vercel and Netlify support environment variables

Whether you’re working on the front end or back end, keeping secrets safe is a must.

Using Environment Variables in Local Projects

Before we use Vercel or Netlify, let’s see how to use environment variables on your local machine.

Step 1: Create a .env File

Inside your project folder, make a file called .env. Add your secrets like this:

API_KEY=abc123xyz

DB_PASSWORD=mySecretPassword

Step 2: Use the Variables in Your Code

In Node.js, access them like this:

const apiKey = process.env.API_KEY;

Make sure to install the dotenv package and include it in your app:

npm install dotenv

Then add this line at the top of your main file:

require(‘dotenv’).config();

Step 3: Add .env to .gitignore

Never push your .env file to GitHub. Add it to your .gitignore file:

.env

This keeps your secrets safe when sharing your code.

Managing Environment Variables on Vercel

Vercel is a platform that helps you host your front end and full stack apps easily. It also has a built-in way to manage environment variables.

Step-by-Step: Add Environment Variables in Vercel

1. Go to vercel.com and log in.

2. Choose your project.

3. Click Settings > Environment Variables.

4. Add your variables:
   Name: API_KEY

Value: abc123xyz

1. Click Save.

2. Vercel will use these values when building and running your app.

Important Tips for Vercel

• Use NEXT_PUBLIC_ in front of variables for React apps. For example:
  NEXT_PUBLIC_MAP_API_KEY=yourMapKeyHere

Only variables that start with NEXT_PUBLIC_ will be visible in the browser.

• If you make changes, redeploy your app.

Managing Environment Variables on Netlify

Netlify is another popular platform to host front end and serverless apps. It also makes secret management easy.

Step-by-Step: Add Environment Variables in Netlify

1. Go to netlify.com and log in.

2. Click on your project.

3. Go to Site Settings > Environment Variables.

4. Click Add variable.

5. Add your key name and value.

Key: API_KEY

Value: abc123xyz

1. Save and deploy your app again.

Important Tips for Netlify

• Like Vercel, use REACT_APP_ for front-end environment variables.

For example:

REACT_APP_WEATHER_API_KEY=yourWeatherKey

• Don’t include real secrets in your React code. Use them only in secure APIs or serverless functions.

Using Secrets in Serverless Functions

Both Vercel and Netlify let you write serverless functions (APIs). These functions can securely use environment variables.

Example in Vercel Function (Node.js)

export default function handler(req, res) {

  const apiKey = process.env.API_KEY;

  res.json({ key: apiKey });

}

This function reads the API key securely from the environment. It is not visible in the browser, which keeps it safe.

Mistakes to Avoid

Here are some common mistakes you should avoid:

• Pushing .env to GitHub: Always add .env to .gitignore.

• Exposing secrets in front end: Secrets in the browser can be seen by users.

• Forgetting to restart the app: When you change .env, restart the server to see the changes.

• Wrong variable names: Use correct prefixes like REACT_APP_ or NEXT_PUBLIC_.

Best Practices

Here are some tips to manage secrets better:

• Use .env files for local development only.

• Use platform tools (Vercel/Netlify) for production.

• Use different variables for development and production.

• Change keys regularly if needed.

• Don’t log secrets in the console.

By following these tips, you’ll protect your app and user data.

Project Ideas to Practice

Here are some small apps you can build to practice managing environment variables:

1. Weather App: Use a weather API and hide your API key.

2. Movie Finder App: Use TMDB API and store your key securely.

3. Payment App: Use Stripe API and keep your secret key safe.

4. Login System: Use environment variables for authentication keys.

These projects will help you understand real-world use of secrets and APIs.

Why This Matters for Full Stack Developers

In full stack development, you work with many APIs, databases, and cloud services. Most of them require secret keys. Knowing how to manage these secrets is important for:

• Security

• Team projects

• Clean code

• Better deployment

Companies expect full stack developers to understand secret management. It is part of good development practice.

Conclusion

Managing secrets and environment variables is a key skill for every developer. Whether you’re building small projects or working in a team, knowing how to hide and manage sensitive data is very important.

In this blog, you learned what environment variables are, why they are used, and how to manage them on Vercel and Netlify. You also saw examples of how to use them in local projects and serverless functions.

If you’re learning full stack development and want to work on real-world apps, taking a full stack course can help you learn these skills properly. You’ll get hands-on experience, build projects, and learn from experts.

Keep building, keep learning, and make your apps safe and secure!

Business Name: ExcelR – Full Stack Developer And Business Analyst Course in Bangalore

Address: 10, 3rd floor, Safeway Plaza, 27th Main Rd, Old Madiwala, Jay Bheema Nagar, 1st Stage, BTM 1st Stage, Bengaluru, Karnataka 560068

Phone: 7353006061

Business Email: [email protected]