How to specify a port to run a create-react-app based project?

react npm start'': port
npm start'': port 8000
create-react-app change host
run react-app on different port
reactjs change port
run react on port 80
yarn start --port
react-app-rewired start port

My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the package.json.

How can I specify a port of my choice in this case? I want to run two of this project simultaneously (for testing), one in port 3005 and other is 3006

If you don't want to set the environment variable, another option is to modify the scripts part of package.json from:

"start": "react-scripts start"

to

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4):

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

or (may be) more general solution by @IsaacPak

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

Windows @JacobEnsor solution

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

Update due to the popularity of my answer: Currently I prefer to use environment variables saved in .env file(useful to store sets of variables for different deploy configurations in a convenient and readable form). Don't forget to add *.env into .gitignore if you're still storing your secrets in .env files. Here is the explanation of why using environment variables is better in the most cases. Here is the explanation of why storing secrets in environment is bad idea.

Option to specify port when running the server? · Issue #1083 , sets up the development environment and starts a server, as well as hot module reloading. First two methods do set port permanently and whenever you run your app it will run on the port you specify. Method 1 (recommended) – Specify a PORT in.env file. Go and create a.env file at your project root if it does not exist already..env file is default settings files for a react app. All its variables are read by the compiler.

Here is another way to accomplish this task.

Create a .env file at your project root and specify port number there. Like:

PORT=3005

React/ReactJS: Change Default Port Number 3000, how can i change port 3000 to 3001. together to host and review code, manage projects, and build software together. In your console run PORT=3001 yarn start "scripts": { "start": "set PORT=5000 && react-scripts start",. Project is based on create-react-app or react-scripts. npm start by default will run the application on port 3000 and there is no option of specifying a port in the package.json. Hence we need to follow these steps to change the port.

You can specify a environment variable named PORT to specify the port on which the server will run.

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

Updating to New Releases, Creating a base React project with create-react-app is as simple as typing a one line command: After the project is created, we can run the app in development mode It will be better to localize the port assignment specific to React as if you're building a system with several NodeJS-based components. Among the available choices is create-react-app, a React bootstrapping utility that takes care the laborious tasks of setting up a React project without much intervention about how the project should be structured. Given this nature, create-react-app is less assumed a boilerplate and more of a toolkit.

You could use cross-env to set the port, and it will work on Windows, Linux and Mac.

yarn add -D cross-env

then in package.json the start link could be like this:

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

What exactly is the 'react-scripts start' command?, My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the  My project is based on create-react-app. npm start by default will run the application on port 3000 and there is no option of specifying a port in the package.json. How can I specify a port of my choice in this case? I want to run two of this project simultaneously (for testing), one in port 3005 and other is 3006. SO Question

Just update a bit in webpack.config.js:

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

then run npm start again.

npm-start, My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of  The React + Redux RealWorld codebase uses create-react-app. Simply cloning the repo and running npm install will get everything set up, and running npm start will let you run the application live. In the next tutorial, we'll integrate Redux into an app that's scaffolded by create-react-app!

how change port · Issue #3513 · facebook/create-react-app · GitHub, My project is based on create-react-app. npm start by default will run the application on port 3000 and there is no option of specifying a port in  WDS_SOCKET_PORT Used 🚫 Ignored: When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, webpack-dev-server defaults to window.location.port for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time.

ReactJS: Changing Default Port 3000 in create-react-app , Project is based on create-react-app or react-scripts. npm start by default will run the application on port 3000 and there is no option of  React/ReactJS: Change Port Number. By default, a ReactJS app runs on port 3000.An Express.js app also runs on the same port 3000.If you were to run the two apps simultaneously, there would be conflicts.

How to specify a port to run a create-react-app based project?, If you wish to run your React app on port number 2000 , modify your package.​json file as follows: Port number can also be set as an environment variable. Create an .env file in the root directory of your project, i.e., in the same directory  Create React App . Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Comments
  • Just quickly mentioning here that for Next.js projects you'll just use next -p 3005 if anyone else fall here looking for the same thing.
  • for Windows: "start": "set PORT=3005 && react-scripts start"
  • for ubuntu: "start": "export PORT=3006 react-scripts start" worked for me
  • For windows set PORT=3005 && react-scripts start worked for me :)
  • "start": "export PORT=3001 && react-scripts start" This one worked for me in Ubuntu 16
  • Worked for me, Ubuntu- 16.04, "start": "PORT=3500 react-scripts start",
  • Using a .env file is supported out of the box with create-react-app. Just be sure not to check .env into source control if you put sensitive information in there.
  • The is the method described in the create-react-app README.md
  • @carkod Actually, they are saying to put sensitive data in a file other than .env. In Their case they recommend using .env.local which you should not check into source control, so that you can safely check .env into source control. So the same advice still applies.
  • I like this answer better, since it makes use of the configuration options available, while the other solutions feel more like tricks/hacks.