開源日報每天推薦一個 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/