react uygulaması oluşturmak .env dosyalarını almıyor mu?

111

Uygulamamı önyüklemek için react uygulaması oluştur kullanıyorum .

İki .envdosya ekledim .env.developmentve .env.productionkökte.

Benim .env.developmentiçerir:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

Uygulamamı kullanarak react-scripts startve konsol kullanarak çalıştırdığımda process.envtükürüyor

{ NODE_ENV: "development", PUBLIC_URL: "" }

Farklı şeyler denedim, ancak geliştirme dosyamdaki doğrulanabilirleri toplamıyor, neyi yanlış yapıyorum ?!

Directry yapısı:

/.env.development
/src/index.js

Package.json betiği:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

Düzenle:

Benim değişkenler üzerinden @jamcreencia doğru işaret öneki edilmelidir ile REACT_APP.

Düzenle 2

Dosyayı adlandırırsam iyi çalışır, .envancak kullanırsam .env.developmentveya.end.production

reactjs create-react-app

— Shenku
kaynak

Dosyanı gönderebilir misin package.json?

— Steve Chamaillard

2

process.envarka ucun (Düğüm veya kullandığınız her şey) okuyabileceği bir şeydir. Ön uç paketi, process.envtarayıcıda ne olduğu konusunda hiçbir fikre sahip değildir . Web paketini gruplama sırasında pakette geçirecek şekilde yapılandırabilir veya daha da kolay bir şekilde global bir değişken olarak oluşturduğunuz dizin dosyasında arka uçtan geçirebilirsiniz.

— Raul Rene

Muhtemelen durum böyle değil, ancak bununla birkaç kez karşılaştım ve bulduğum sorun şu ki, bilgisayarım çok fazla bellek kullandığında .env değişkenimi yükleyemiyorum. Ubuntu 16.4 kullanıyorum. değişkeni react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbackhala görmüyorsanız terminalden yüklemeyi deneyin, bellek kullanımını azaltmak için sistemimi yeniden başlatırım ve tekrar deneyin genellikle bu benim için çözer.

— Femi Oni

@RaulRene create-react-app handles .env, daha fazla yapılandırmaya gerek duymadan kutudan çıkar

— Femi Oni

230

İle create-react-app, REACT_APP_ona erişebilmek için değişken adına önek eklemeniz gerekir.

Misal:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

Burada daha fazla bilgi görün

— Jamcreencia
kaynak

8

Bu hayati önem taşır. özledim ama evet önek ile çalışmayacak

— Femi Oni

7

Bu, kullandığım zaman işe yarıyor .envama .env.developmentya da değil .env.production?

— shenku

@shenku bunu sadece çalışır nedenini öğrenmek için yönetmek mü .envdeğil ile .env.developmentveenv.production

— Constantin Chirilă

Ön uç çalışması yapan Devs için, tarayıcıda NodeJ'leriniz olmadığı için web paketine ihtiyacınız olacak ... meh

— Stephane

2

Teşekkür ederim. Saatlerdir bir cevap arıyordum.

— Fahmid

53

.Env dosyanızın src klasörünün içinde değil, kök dizinde olduğundan emin olun.

— Ryan Dhungel
kaynak

1

Belgeleri okurken kök dizinde olması gerektiğini gördüm, yine de .env dosyamı src klasörüne eklemeyi başardım ... (facepalm) Cevabınız için teşekkürler.

— Corné

Aynı sorunu yaşadım, src klasörünün içindeyken işe yaramadı ancak 3.4.3 sürümünde kök klasöre geçtikten sonra çalıştı

— Vinod Kumar

28

Aynı sorunu yaşadım! Çözüm, düğüm sunucumla olan bağlantıyı kapatmaktı (bunu CTRL + C ile yapabilirsiniz). Ardından sunucunuzu 'npm run start' ile yeniden başlatın ve .env düzgün çalışmalıdır.

Kaynak: Github

— JS Peterson
kaynak

20

Gibi birden fazla ortam kullanmak istiyorsanız .env.development .env.production

dotenv-cli paketini kullanın

proje kök klasörüne ekle .env.developmentve .env.production

ve package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

sonra çevreye göre inşa edin

npm run-script build-dev

— Maria Jeysingh Anbu
kaynak

bu mu dotenvyoksa dotenv-cli

— Drazen Bjelovuk

2

Farklı ortamlar için farklı .env dosyalarına sahip olmak, artık "create-react-app: create-react-app docs" tarafından kutunun dışında destekleniyor . Dotenv'i açıkça kullanmaya gerek yok (create-react-app aslında bunu ortam değişkenlerini işlemek için perde arkasında kullanır)

— Marnix.hoh

@MariaJeysinghAnbu, bu sözdiziminin ait olduğu dotenv-clideğil dotenv: npmjs.com/package/dotenv-cli

— AMS777

@ AMS777 dotenv npm kullanıyorum dotenv -cli

— Maria Jeysingh Anbu

@MariaJeysinghAnbu, kullanmak istedim dotenvama bir hata aldım. Belgeleri kontrol ettim ama -ekomut satırı için bu seçeneği bulamadım . Ancak dotenv-clibelgelerde buldum . Bu yüzden söylüyordum. Sonunda kullanıyorum env-cmd, aynı anda sahip olmama dotenvve dotenv-cliyüklememe, bu da kafa karışıklığına yol açabilir.

— AMS777

10

İle ilgili olarak , env-cmd . VMois'in gitHub'daki nazik gönderisine göre , env-cmd güncellendi (yazılırken sürüm 9.0.1), ortam değişkenleri React projenizde aşağıdaki gibi çalışacaktır :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

Senin içinde package.json dosyası.

— tim
kaynak

1

Çok teşekkür ederim, bu yorum beni kurtardı. Create-react-app belgeleri bunu güncellemedi, bu yüzden neyin yanlış olduğunu

— buluyordum

1

Beni burada tamamen kurtardın. Bu şeyin üzerinde dönüyordum. Teşekkürler

— MDiesel

biri bu adama madalya

— veriyor

7

Bu amaçla env-cmd modülü bulunmaktadır. Npm ile yükleyin, npm i env-cmdardından package.jsondosyanıza scriptsbölüm:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

Proje kökünüzde aynı env değişkenleriyle ancak farklı değerlerle iki dosya oluşturmanız gerekir:

.env.development
.env.production

Sonra onları halktan dışlayın. Bunun için .gitignoredosyanıza iki satır ekleyin:

.env.development
.env.production

Dolayısıyla bu, geliştirme ve prod için farklı env değişkenlerini kullanmanın uygun bir yoludur.

— Nastro
kaynak

tam yolu kullanmayı deneyin, örneğin: ./node_modules/.bin/env-cmd

— Nastro

ama cevabımda bu yaklaşımı önermiyorum. Şimdi react'in .env ile çalışmak için bir tamirci sağladığını biliyorum

— Nastro

6

Aynı sorunu yaşıyordum, ancak .env dosyamın JS yerine YAML biçiminde olmasıydı .

Öyleydi

REACT_APP_API_PATH: 'https://my.api.path'

ama olması gerekiyordu

REACT_APP_API_PATH = 'https://my.api.path'

— Cchapman
kaynak

Çok basit ama güzel bir yer. Ben de aynısını yaptım ve ağaçların odununu göremedim. Teşekkürler

— Andy Allison

Bunun için teşekkürler! Bu küçük hatayı fark etmeden bütün gün arıyordum :)

— chia yongkang

3

Eğer .envdosya çalışır ancak .env.developmentya .env.production, o zaman boş bir oluşturmaz .envo ikisi birlikte dosyayı. Neden bilmiyorum ama bu benim için çalışıyor.

— Stjepan Golemac
kaynak

0

Ve env-dosyasında API anahtarından sonra noktalı virgül kullanmamayı unutmayın.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

olmalı

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

bu benim hatamdı

— Deniz Kurdu
kaynak

-1

En son react-script'lerden (3.2.0) itibaren, söylemek kadar basit

PORT=4000
BROWSER=none

kök klasörde olması gereken .env veya .env.development dosyanızda (..etc).

O zaman REACT_APP öneki ile ÇALIŞMAYACAKTIR (belgeler güncelliğini yitirmiştir sanırım) ve herhangi bir ekstra npm paketi gerektirmez (react-betikleri zaten dotenv 6.2.0 içerir)

— Christos Tatitzikidis
kaynak

4

Bu yanlış. github.com/facebook/create-react-app/blob/…

— Gudgip