Oluşturma-tepki-uygulama tabanlı bir projeyi çalıştırmak için bir bağlantı noktası nasıl belirtilir?

Projem create-tepki-uygulamasını temel alıyor . npm startveya yarn startvarsayılan olarak uygulamayı 3000 numaralı bağlantı noktasında çalıştırır ve package.json içinde bir bağlantı noktası belirtme seçeneği yoktur.

Bu durumda seçtiğim bir bağlantı noktasını nasıl belirleyebilirim? Bu projeden iki tanesini aynı anda (test için) çalıştırmak istiyorum, biri limanda 3005, diğeri ise3006

Ortam değişkenini ayarlamak istemiyorsanız , başka bir seçenek scriptspackage.json kısmını şu şekilde değiştirmek :

"start": "react-scripts start"

için

Linux (Ubuntu 14.04 / 16.04'te test edildi ) ve MacOS (MacOS Sierra 10.12.4'te @ aswin-s tarafından test edildi):

"start": "PORT=3006 react-scripts start"

veya @IsaacPak tarafından daha genel bir çözüm olabilir

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor çözümü

"start": "set PORT=3006 && react-scripts start"

cross-env lib her yerde çalışır. Ayrıntılar için Aguinaldo Possatto cevabına bakınız.

Cevabımın popülaritesi nedeniyle güncelleme: Şu anda .envdosyaya kaydedilmiş ortam değişkenlerini kullanmayı tercih ediyorum (farklı deploykonfigürasyonlar için değişken setlerini uygun ve okunabilir bir şekilde saklamak için yararlıdır ). Eklemeyi unutmayın *.enviçine .gitignoreyine de sırlarını saklamak eğer .envdosyalar. İşte ortam değişkenleri kullanarak çoğu durumda neden daha iyi olduğunu açıklamasıdır. İşte sırları çevrede saklamanın neden kötü bir fikir olduğunu açıklıyor.

İşte bu görevi yerine getirmenin başka bir yolu.

.envProje kökünüzde bir dosya oluşturun ve orada bağlantı noktası numarasını belirtin. Sevmek:

PORT=3005

Bağlantı noktasını ayarlamak için cross-env kullanabilirsiniz ve Windows, Linux ve Mac üzerinde çalışacaktır.

yarn add -D cross-env

sonra package.json içinde başlangıç ​​bağlantısı şöyle olabilir:

"start": "cross-env PORT=3006 react-scripts start",

PORTSunucunun çalışacağı bağlantı noktasını belirtmek için adlı bir ortam değişkeni belirtebilirsiniz.

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

Windows kullanıcılarım için ReactJS portunu istediğiniz herhangi bir portta çalışacak şekilde değiştirmenin bir yolunu keşfettim. Sunucuyu çalıştırmadan önce

 node_modules/react-scripts/scripts/start.js

İçinde, aşağıdaki satırı arayın ve bağlantı noktası numarasını istediğiniz bağlantı noktasına değiştirin

 var DEFAULT_PORT = process.env.PORT || *4000*;

Ve gitmekte fayda var.

Yanında .envana dizinde adla bir dosya oluşturun package.jsonve PORTdeğişkeni istenen bağlantı noktası numarasına ayarlayın.

Örneğin:

.env

PORT=4200

Biraz güncellemeniz yeterlidir webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

sonra npm starttekrar çalıştırın .

Gözlerinde farklı package.json, komut ve kullanım gitmek --port 4000veya set PORT=4000örneğin aşağıda olduğu gibi:

package.json (Pencereler):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

Bu hem Windows hem de Linux'ta çalışır

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

ancak içinde yazılmış PORT = 3006 ile .env oluşturmayı tercih edersiniz

Benim package.json dosyasında değiştirme "start": "export PORT=3001 && react-scripts start"benim için çok çalıştı ve ben MacOS 10.13.4 çıkıyorum

Özetlemek gerekirse, bunu gerçekleştirmek için üç yaklaşımımız vardır:

1. "PORT" adlı bir ortam değişkeni ayarlama
2. Package.json dosyasının "script" bölümündeki "start" anahtarını değiştirin
3. Bir .env dosyası oluşturun ve PORT yapılandırmasını bu dosyaya yerleştirin

En taşınabilir olanı son yaklaşım olacaktır. Ancak diğer posterin belirttiği gibi, yapılandırmayı genel kaynak havuzuna yüklememek için .gitignore dosyasına .env'yi ekleyin.

Daha fazla detay: bu makale

uygulamanızı başlattığınızda varsayılan bağlantı noktası yapılandırmasını bulabilirsiniz

YourApp / komut / start.js

aşağı kaydırın ve bağlantı noktasını istediğiniz gibi değiştirin

const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 4000;

Umarım bu size yardımcı olabilir;)

Bunu dene:

npm start port=30022

3000Komut satırı parametresi veya ortam değişkeni dışında bir bağlantı noktası belirtmek iyi olur .

Şu anda süreç oldukça ilgili:

1. Çalıştırmak npm run eject
2. Bunun bitmesini bekleyin
3. Kullanmak istediğiniz bağlantı noktasını düzenleyin scripts/start.jsve bulun / değiştirin3000
4. Düzen config/webpack.config.dev.jsve aynı şeyi
5. npm start

Windows'da 2 şekilde yapılabilir.

1. "\ Node_modules \ reakt-scripts \ scripts \ start.js" altında, "DEFAULT_PORT" için arama yapın ve arzu bağlantı noktası numarasını ekleyin.

   Örneğin: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. Package.json içinde aşağıdaki satırı ekleyin. "start": "set PORT = 9999 && tepki-scriptleri başla" NPM başlatmayı kullanarak uygulamayı başlatın. Uygulamayı 9999 bağlantı noktasında başlatacaktır.

Komutu çağırırken uygulama kodunuzda veya ortam dosyalarınızda herhangi bir değişiklik yapmanıza gerek kalmadan bağlantı noktası numarasını vermeye ne dersiniz? Bu şekilde birkaç farklı porttan aynı kod tabanının çalıştırılması ve sunulması mümkündür.

sevmek:

$ export PORT=4000 && npm start

İstediğiniz port numarasını 4000yukarıdaki örnek değerin yerine koyabilirsiniz .

Daha önce npm run ejectyapmışsanız, komut dosyalarına / start.js'ye gidin ve const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(bu örnekte 3000) içindeki bağlantı noktasını istediğiniz bağlantı noktasına değiştirin.

React-App'teki varsayılan bağlantı noktasını değiştirme

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

Bu satıra git:

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

Port numarasını port numaranızla değiştirin

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

Örneğin:

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

Kaydet ve çık