Make Sure Your Secrets are Safe with @jkdd/env-guardian

Managing environment variables can be tricky, especially as projects grow. @jkdd/env-guardian helps you scan your project for used and suggested environment variables, and optionally creates or updates a .env file. This guide will walk you through using it in a local React.js project.

1. Set Up a React.js Project

If you don’t already have a React project, create one using Vite or Create React App:

Your project structure will look like this:

2. Install @jkdd/env-guardian

You can install the package locally for your project:

Or globally if you want to use it in multiple projects:

3. Scan Your Project for Environment Variables

Run the scan command to see what environment variables are used in your project:

You’ll see a report like:

This output tells you which variables are already in use and which ones you might want to add.

4. Create or Update a .env File

To automatically add suggested variables to a .env file in your project root:

• By default, it creates or updates .env in the root folder.
• If your project uses Next.js, it can also create a .env.local file by passing the option:

The .env file will now include any suggested variables:

5. Verify Your .env File

Open .env in your project root. You should see all the suggested environment variables added by env-guardian. You can now safely fill them in with real values.

6. Optional: Automate With npm Scripts

You can add a script to your package.json to make scanning easier:

Now you can run:

This will scan your project and update your .env file automatically.

Conclusion

Using @jkdd/env-guardian helps you:

• Detect existing environment variables.
• Suggest new ones based on usage in your code.
• Automatically create or update .env files.
• Keep your environment variables organized and safe.