Asked Sep 12th, 4:36 a.m. 181 0 3
  • 181 0 3
+1

Cách sử dụng .env trong reactJs?

Share
  • 181 0 3

Chuyện là em đang xài một thằng cms thứ 3 sử dụng ReactJS và NodeJS ban đầu nó config tất cả ở trong config/database.js. Và bây giờ theo yêu cầu là em phải viết ra tệp env. Em đang có 2 vấn đề gặp phải là:

  • Khi em tạo mới 1 file .env thì file này nó bị mờ đi như sau:

image.png

  • Và tiếp đến em muốn hỏi cách để sử dụng các variables trong env để gán vào file database.js, file database.js của em hiện tại đang là như sau:
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'mongoose',
      settings: {
        host: env('DATABASE_HOST', 'my_variables`'),
        srv: env.bool('DATABASE_SRV', true),
        port: env.int('DATABASE_PORT', 27017),
        database: env('DATABASE_NAME', 'my_variables1'),
        username: env('DATABASE_USERNAME', 'my_variables2'),
        password: env('DATABASE_PASSWORD', 'my_variables3'),
      },
      options: {
        authenticationDatabase: env('AUTHENTICATION_DATABASE', 'admin'),
        ssl: env.bool('DATABASE_SSL', true), 
      },
    },
  },  
});

Em muốn làm cách nào để nó lấy đc cái biến my_variables ở .env ý ạ... Hy vọng nhận được sự giúp đỡ của các cao nhân, em cảm ơn ^^

3 ANSWERS


Answered Sep 12th, 6:36 a.m.
Accepted
0

@binchanhkun99 nếu reactjs app của em đc tạo từ create react app thì.

  1. .env bị mờ là do IDE or trong .gitignore đã bỏ qua file đó.
  2. về ENV trong react phải có tiền đố REACT_APP_*** còn ko có tiền tố đó sẽ không nhận

Ví thế em thay DATABASE_HOST thành REACT_APP_DATABASE_HOST Đọc thêm tại đây nhé https://create-react-app.dev/docs/adding-custom-environment-variables/ Còn trường hợp ko nhận thì do đây là một Server Side Render nên nó đi theo config ENV của engine đó. or em có thể dùng thêm lib https://www.npmjs.com/package/dotenv để load env cho một dự án về nodejs bất kì

Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 12th, 7:04 a.m.

Vâng ạ, Đây là 1 cái cms thứ 3(Strapi cms) nó dùng reactjs với node ý ạ nên em cũng ko biết nó create app kiểu gì luôn ấy a.

image.png

0
| Reply
Share
Answered Sep 12th, 7:39 a.m.
+1

Strapi cũng chỉ là NodeJS, bạn muốn truy cập biến lưu trong .env thì chỉ cần gọi process.env.my_variables.

Hoặc Strapi đã cung cấp sẵn hàm util env() để bạn dùng, phần này đã có sẵn trong docs của họ: https://docs-next.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html

Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 12th, 7:45 a.m.

Vâng e đã thử đc nhưng phải là REACT_APP_my_variables mới đc bác ạ .

0
| Reply
Share
Answered Sep 12th, 7:45 a.m.
+1
  • Thứ nhất, file .env bị mờ là do nó bị ignore khỏi Git (được khai báo trong file .gitignore) nên editor làm mờ để developer dễ nhận biết. Vì file .env có thể chứa các thông tin nhạy cảm như thông tin đăng nhập database, các API Key... Mỗi môi trường file này lại có giá trị khác nhau nên nó được ignore để không lưu vào trong Git mỗi khi bạn commit code.
  • Thứ hai, strapi support file .env nên nếu bạn gọi env(name, default) mà không có value trả ra thì bạn hãy thử kiểm tra lại nội dung trong file .env của bạn xem đã đúng syntax chưa? Tên biến environment được sử dụng trong code đã trùng với tên environment trong file .env hay chưa (đôi khi do lỗi đánh máy gõ sai tên biến). MÌnh ví dụ file .env:
DATABASE_HOST=my_variables
DATABASE_SRV=true
DATABASE_PORT=27017
Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 12th, 7:47 a.m.

Em phải thêm cái react_app phía trc nó mới gọi đc bác ạ.

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.