Running A React Environment, CMD Line For Local Port Hosting

A React project is not ready to work on just because its files exist on your computer. You also need a development server, a browser address, and a reliable way to start and stop the process that connects them. When several projects compete for the same local port, even a simple setup can become confusing.

This guide walks through creating a React application, running it from the command line, choosing a local port, and diagnosing common connection problems. It covers Windows Command Prompt, PowerShell, macOS, and Linux, with a practical workflow for keeping multiple development services organized.

This guide reflects a 2019 development workflow; tools, defaults, and interfaces may have changed since then.

Understand What You Are Running

React is a JavaScript library, not a web server. In this tutorial, Create React App supplies the development tooling that compiles your source files and serves your application to a browser.

When you run npm start, npm looks up the start script in your project's package.json. In a standard Create React App project, that script launches the development server through react-scripts.

The address http://localhost:3000 has three important parts:

http is the protocol used to request the page.
localhost refers to the computer on which the browser is running.
3000 is the port where the development server accepts connections.

Port 3000 is Create React App's usual development default, not a requirement imposed by React. You can use another available port without changing your components.

1. Install and Verify the Prerequisites

Install a supported Node.js release, preferably the current LTS release available in 2019. The standard Node.js installer also includes npm. Use a code editor of your choice and a terminal appropriate to your operating system.

Check that Node.js and npm are available:

node --version
npm --version

Both commands should print version numbers. The npx command used below comes with npm 5.2 and later.

If a command is not recognized, close and reopen your terminal after installation. If it still fails, check that the Node.js installation directory is included in your system's PATH.

Avoid solving installation problems by immediately running everything as an administrator or with sudo. Permission errors deserve investigation; elevated privileges are generally unnecessary for an ordinary local React project.

2. Create a React Project

Navigate to the directory where you keep your development projects, then run:

npx create-react-app my-app
cd my-app

Create React App downloads its tooling, installs dependencies, and creates the application structure. Allow installation to finish before starting another command in the same terminal.

You should now see files and directories including:

package.json: project metadata, scripts, and dependency declarations.
src: your React application source.
public: static files used by the application.
node_modules: installed dependencies.

Open package.json and look for the scripts section. A typical setup includes:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

This is only the scripts portion, not a replacement for the entire file. There is no need to run eject to configure a development port.

For an existing project, enter its directory and install its dependencies with npm install instead of creating a new application. Follow its README if it specifies a different package manager or startup command.

3. Start and Check the Development Server

From the directory containing package.json, run:

npm start

Keep this terminal open. The command starts a long-running process; it is not an installation step that immediately returns to a prompt.

After compilation succeeds, open:

http://localhost:3000

Create React App normally opens a browser automatically. If it does not, manually enter the address printed in the terminal.

To confirm that the full development cycle works:

Open src/App.js in your editor.
Change some visible text in the rendered component.
Save the file.
Check that the browser reflects the change after recompilation.

The development tooling watches your source files and updates or reloads the page as needed. You should not need to restart the server for ordinary component edits.

To stop it, focus the terminal and press Ctrl+C. On Windows, confirm termination if prompted. Stopping the server releases its listening port.

4. Choose a Different Local Port

If port 3000 is occupied, Create React App may offer another port in an interactive terminal. That is convenient temporarily, but an explicit port is easier to document and reuse.

Windows Command Prompt

Use this syntax in cmd.exe:

set "PORT=3001" && npm start

The quoted assignment prevents accidental trailing spaces from becoming part of the value. The variable remains set in that Command Prompt session until you clear it or close the window.

To clear it after stopping the server:

set PORT=

Windows PowerShell

PowerShell uses different environment-variable syntax:

$env:PORT = "3001"
npm start

After stopping the server, remove the setting with:

Remove-Item Env:PORT

Do not paste the Command Prompt set example into PowerShell and expect the same result. The shell, rather than React, determines how environment variables are assigned.

macOS and Linux

In common shells such as Bash, prefix the command with the variable assignment:

PORT=3001 npm start

This supplies PORT to that command without permanently changing your shell environment.

With any of these approaches, open http://localhost:3001 and verify the terminal's reported address. Avoid privileged low-numbered ports; an available port such as 3001 or 4000 is usually simpler for development.

5. Save Project-Specific Settings

For a repeatable setup, create a file named .env.development.local in the project root, alongside package.json:

PORT=3001
HOST=127.0.0.1
BROWSER=none

These settings select a port, bind the server to the local IPv4 loopback address, and prevent automatic browser opening. With this configuration, use http://127.0.0.1:3001.

The HOST and BROWSER lines are optional. Binding to loopback is useful when the application only needs to be reachable from your own computer.

Restart npm start after changing environment files. The running development process does not automatically reload its startup configuration.

Create React App's generated ignore rules normally exclude local environment files; check your .gitignore before relying on that behavior. If the team needs a shared default, document it or use an agreed development environment file.

An existing shell variable can override a value in an environment file. If the server chooses an unexpected port, check for a PORT assignment left in your terminal session.

Also distinguish tooling settings from application variables: browser-facing custom variables use the REACT_APP_ prefix. Anything embedded in the browser bundle is visible to users, so never treat those values as secret storage.

6. Find What Is Using a Port

An occupied port does not necessarily mean something is broken. Another application, or another terminal running your project, may already own it.

On Windows

Find entries involving port 3000:

netstat -ano | findstr :3000

Look for a LISTENING entry whose local address ends in :3000. The final column is the process ID, or PID. The text filter can also match unrelated entries, so inspect the complete line.

Identify a PID before stopping it:

tasklist /FI "PID eq 12345"

Replace 12345 with the actual PID. Prefer returning to its terminal and pressing Ctrl+C. If you cannot access that terminal and have confirmed the process is safe to stop:

taskkill /PID 12345 /F

The /F option forces termination. Use it carefully, not as a routine cleanup command.

On macOS and Linux

Where lsof is installed, inspect TCP listeners with:

lsof -nP -iTCP:3000 -sTCP:LISTEN

The output identifies the command and PID. After verifying the process, request termination:

kill 12345

On Linux systems without lsof, ss -ltnp can help list listening TCP sockets. Process details may require additional permissions.

Avoid killing every Node.js process: other projects and tools may depend on them. Choosing another port is often safer.

7. Connect a Separate Local API

A common setup runs React on port 3000 and a backend API on port 5000. Different ports are different browser origins, even when both use localhost.

For a simple development arrangement, Create React App supports a proxy entry in package.json:

"proxy": "http://localhost:5000"

Add it as a top-level property, preserving valid JSON and the existing fields. Restart the development server, then use a relative API URL:

fetch('/api/health')
  .then(response => {
    if (!response.ok) {
      throw new Error('Health check failed');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

This assumes your backend provides /api/health and returns JSON. The backend must be started separately; the proxy does not launch it. Create React App forwards eligible non-page requests to that backend during development.

Calling http://localhost:5000 directly from browser code bypasses this proxy and may require CORS configuration. The development proxy also does not configure production hosting.

Common Pitfalls and Practical Checks

The browser cannot connect

Check that the server is still running, compilation succeeded, and the browser uses the port shown in the terminal. Do not switch to HTTPS unless you deliberately configured it.

npm cannot find the project

A missing package.json error usually means you are in the wrong directory. Use dir on Windows or ls on macOS/Linux to inspect your location, then enter the project folder.

Testing from a phone fails

On a phone, localhost means the phone itself. To test across a trusted local network, the server must listen on a network-accessible interface, and the phone must use your computer's LAN IP address and port. A loopback-only HOST setting prevents this access. Check firewall rules, and do not expose the development server publicly.

Development is confused with deployment

npm start is for local development. Run npm run build to generate production assets, then deploy them through an appropriate web server or hosting service. Production routing and API forwarding need their own configuration.

Takeaway

A reliable React workflow starts with a known project directory, a running development process, and a documented port. Keep startup settings repeatable, inspect occupied ports before terminating processes, and treat local development hosting as separate from production deployment.