Bagaimana cara menentukan port untuk menjalankan proyek berbasis app-react-app?

Proyek saya didasarkan pada aplikasi create-react-app . npm startatau yarn startsecara default akan menjalankan aplikasi pada port 3000 dan tidak ada opsi untuk menentukan port di package.json.

Bagaimana saya bisa menentukan port pilihan saya dalam kasus ini? Saya ingin menjalankan dua proyek ini secara bersamaan (untuk pengujian), satu di port 3005dan lainnya3006

Jika Anda tidak ingin mengatur variabel lingkungan , opsi lain adalah memodifikasi scriptsbagian dari package.json dari:

"start": "react-scripts start"

untuk

Linux (diuji pada Ubuntu 14.04 / 16.04) dan MacOS (diuji oleh @ aswin-s pada MacOS Sierra 10.12.4):

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

atau (mungkin) solusi yang lebih umum oleh @IsaacPak

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

Solusi Windows @JacobEnsor

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

cross-env lib bekerja di mana saja. Lihat jawaban Aguinaldo Possatto untuk detailnya

Pembaruan karena popularitas jawaban saya: Saat ini saya lebih suka menggunakan variabel lingkungan yang disimpan dalam .envfile (berguna untuk menyimpan set variabel untuk deploykonfigurasi yang berbeda dalam bentuk yang mudah dan dapat dibaca). Jangan lupa untuk menambahkan *.envke dalam .gitignorejika Anda masih menyimpan rahasia Anda di .envfile. Berikut adalah penjelasan mengapa menggunakan variabel lingkungan lebih baik dalam kebanyakan kasus. Berikut ini penjelasan mengapa menyimpan rahasia di lingkungan adalah ide yang buruk.

Berikut ini cara lain untuk menyelesaikan tugas ini.

Buat .envfile di root proyek Anda dan tentukan nomor port di sana. Suka:

PORT=3005

Anda bisa menggunakan cross-env untuk mengatur port, dan itu akan berfungsi pada Windows, Linux dan Mac.

yarn add -D cross-env

lalu di package.json tautan awal bisa seperti ini:

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

Anda dapat menentukan variabel lingkungan bernama PORTuntuk menentukan port tempat server akan berjalan.

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

Untuk orang-orang windows saya, saya menemukan cara untuk mengubah port ReactJS untuk berjalan pada port yang Anda inginkan. Sebelum menjalankan server pergi ke

 node_modules/react-scripts/scripts/start.js

Di dalamnya, cari baris di bawah ini dan ubah nomor port ke port yang Anda inginkan

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

Dan Anda baik untuk pergi.

Buat file dengan nama .envdi direktori utama di samping package.jsondan atur PORTvariabel ke nomor port yang diinginkan.

Sebagai contoh:

.env

PORT=4200

Cukup perbarui sedikit di webpack.config.js:

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

lalu jalankan npm startlagi.

Di Anda package.json, buka skrip dan gunakan --port 4000atauset PORT=4000 , seperti dalam contoh di bawah ini:

package.json (Windows):

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

package.json (Ubuntu):

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

Ini berfungsi pada Windows dan Linux

package.json

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

tetapi Anda lebih suka membuat .env dengan PORT = 3006 tertulis di dalamnya

Mengubah file package.json saya "start": "export PORT=3001 && react-scripts start"bekerja untuk saya juga dan saya menggunakan macOS 10.13.4

Untuk meringkas, kami memiliki tiga pendekatan untuk mencapai ini:

1. Setel variabel lingkungan bernama "PORT"
2. Ubah bagian "mulai" di bawah bagian "skrip" dari package.json
3. Buat file .env dan letakkan konfigurasi PORT di dalamnya

Yang paling portabel akan menjadi pendekatan terakhir. Tetapi seperti yang disebutkan oleh poster lain, tambahkan .env ke .gitignore agar tidak mengunggah konfigurasi ke repositori sumber publik.

Lebih detail: artikel ini

Anda dapat menemukan konfigurasi port default saat memulai aplikasi Anda

aplikasi / skrip / start.js Anda

gulir ke bawah dan ubah port ke apa pun yang Anda inginkan

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

Semoga ini bisa membantu Anda;)

Coba ini:

npm start port=30022

Akan menyenangkan untuk dapat menentukan port selain 3000 , baik sebagai parameter baris perintah atau variabel lingkungan.

Saat ini, prosesnya cukup melibatkan:

1. Lari npm run eject
2. Tunggu sampai selesai
3. Edit scripts/start.jsdan temukan / ganti 3000dengan port apa pun yang ingin Anda gunakan
4. Edit config/webpack.config.dev.jsdan lakukan hal yang sama
5. npm start

Di Windows itu bisa dilakukan dengan 2 cara.

1. Di bawah "\ node_modules \ react-scripts \ scripts \ start.js", cari "DEFAULT_PORT" dan tambahkan nomor port keinginan.

   Contoh: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. Dalam package.json, tambahkan baris di bawah ini. "start": "atur PORT = 9999 && mulai-skrip reaksi" Kemudian mulailah aplikasi menggunakan start NPM. Ini akan memulai aplikasi di port 9999.

Bagaimana dengan memberikan nomor port sambil menjalankan perintah tanpa perlu mengubah apa pun dalam kode aplikasi atau file lingkungan Anda? Dengan begitu dimungkinkan menjalankan dan melayani basis kode yang sama dari beberapa port yang berbeda.

Suka:

$ export PORT=4000 && npm start

Anda dapat meletakkan nomor port yang Anda suka sebagai pengganti nilai contoh di 4000atas.

Jika Anda sudah melakukannya npm run eject, buka skrip / start.js dan ubah port in const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 dalam hal ini) ke port apa pun yang Anda inginkan.

Mengubah port default di React-App

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

Pergi ke baris ini:

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

Ubah nomor port dengan nomor port Anda

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

Sebagai contoh:

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

Simpan dan keluar