Background

• Using react version ^17.0.0
• Using VPN

Problem Statement

When running the React development server for localhost development the development server starts but fails to render in the browser. i.e. “Connection Refused”

Solution

Using a VPN can cause issues with the local development of a react app.

To solve this you can either:

1. Disable the VPN

2. Change the HOST environment variable that you initialize the React development server with.

React uses the HOST and PORT environment variables passed to the react-scripts to initialize the Webpack server to determine on which host and port it should run. See Advanced Configuration or the inline source here.

The default settings for HOST is 0.0.0.0 and PORT is 3000

HOST=127.0.0.1 npm run react-scripts start

You should now be able to access your development server on 127.0.0.1:3000.