开源日报每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。

2024年2月5日，开源日报第1096期：
今日推荐开源项目：《nginx-proxy-manager》
今日推荐英文原文：《React.js and .env Files: Safeguarding Your Secrets》

开源项目

今日推荐开源项目：《nginx-proxy-manager》传送门：项目链接

推荐理由： 使用简单而强大的界面管理Nginx代理主机的Docker容器

🔗 链接直达：nginxproxymanager.com

英文原文

今日推荐英文原文：React.js and .env Files: Safeguarding Your Secrets

推荐理由：本文介绍如何在React项目中添加.env文件来安全处理敏感信息， 用于集中存储敏感数据和环境变量，文中有具体格式说明

React.js and .env Files: Safeguarding Your Secrets

Do you want to learn how to add an .env file to your React JS project? Well, you’re in luck because this guide will break it down for you.

When working on a React JS project that involves external APIs and sensitive credentials like API keys, it’s crucial to handle this information securely.

One effective way to manage these credentials is by using an .env file. This file allows you to store sensitive data and environment variables centrally, making your project more secure and manageable.

How to add a .env file to React js project?

Step 1: Create a New .env File

Start by creating a new file in the root directory of your React JS project. Name this file “.env”. This file will house your sensitive data and environment variables.

Step 2: Add Environment Variables

In your .env file, you can add your sensitive information in the following format:

REACT_APP_API_KEY=cK%e7S6C74xcobT
REACT_APP_API_URL=http://localhost:3000/api

When creating custom variables in React’s .env files, it’s essential to adhere to React’s naming conventions. React mandates prefixing custom variables with REACT_APP_. This prefix ensures that these variables are recognized and accessible throughout your React application. Variables lacking this prefix will be ignored by React.

Step 3: Access Environment Variables in Your App

To access these environment variables in your React components or other files, you can use process.env:

<div className="App">
      <h1>API Key: {process.env.REACT_APP_API_KEY}</h1>
      <h3>URL: {process.env.REACT_APP_API_URL}</h3>
 </div>

Once you’ve set up your environment variables in the .env file, you’re ready to see your changes in action. To do this, simply run the following command:

npm start

This command will start your React application. After the application has successfully started, refresh your web browser.

By doing so, you can immediately observe the impact of the changes you made to your environment variables.

下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/