Proxy Error: Could not proxy request

[GitOffMyGrass]

I have cloned this example and setup the project per the readme but I am getting the following error when I hit the "Submit" button.

Proxy error: Could not proxy request /api/greeting?name=Test from localhost:3000 to http://localhost:3001/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

After running "npm start dev" I get the following which indicates everything has installed and built successfully:

You can now view react-express-starter in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.55.0.6:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

My test machine is running Windows 10. I thought maybe it was a configuration Windows issue so I did the setup on a clean in stall of Linux Mint 19 and I am getting the exact same error. Could it be related to the versions of tools I am running? I am stuck.

npm version is 6.14.4 node version is 12.18.0

[philnash]

Hi @GitOffMyGrass, I think the issue may be that you are running the wrong command to start the dev environment. Try running

npm run dev

instead. Let me know if that helps at all.

[GitOffMyGrass]

I was using npm run dev The above was a typo.

[philnash]

Ah, ok. Because the npm run dev command runs the server and client-side build in parallel sometimes errors in the server get swallowed up.

One suggestion is that perhaps you are missing an .env file. You may not need anything in it, but I included dotenv in this repo because I inevitably need something stored in an environment. Just create an empty .env file in the project directory and that might sort you out.

Then I'd try running the server on its own and see if it throws an error that gives you more information. You can run the server with:

npm run server

Let me know how you get on with that.

[GitOffMyGrass]

I did have the `.env file and it is blank. I ran the server and this was the output. I ended up launching the front end too.

> react-express-starter@0.1.0 server D:\Users\Mark and Jamie\Downloads\react-express-starter
> node-env-run server --exec nodemon | pino-colada

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `react-scripts start D:\Users\Mark and Jamie\Downloads\react-express-starter\server`
i ｢wds｣: Project is running at http://10.0.0.58/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\Users\Mark and Jamie\Downloads\react-express-starter\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view react-express-starter in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.58:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

I piped the output from the npm run dev command to a log file to see it all and here is the output:

D:\Users\Mark and Jamie\Downloads\react-express-starter>npm run dev >> output.log

> react-express-starter@0.1.0 dev D:\Users\Mark and Jamie\Downloads\react-express-starter
> run-p server start

> react-express-starter@0.1.0 server D:\Users\Mark and Jamie\Downloads\react-express-starter
> node-env-run server --exec nodemon | pino-colada

> react-express-starter@0.1.0 start D:\Users\Mark and Jamie\Downloads\react-express-starter
> react-scripts start

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `react-scripts start D:\Users\Mark and Jamie\Downloads\react-express-starter\server`
i ｢wds｣: Project is running at http://10.0.0.58/
i ｢wds｣: webpack output is served from 
i ｢wds｣: Content not from webpack is served from D:\Users\Mark and Jamie\Downloads\react-express-starter\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Something is already running on port 3000.
[nodemon] clean exit - waiting for changes before restart
Compiled successfully!

You can now view react-express-starter in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.58:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Proxy error: Could not proxy request /api/greeting?name=%3Blllll from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

[nodemon] restarting child process
[nodemon] starting `react-scripts start D:\Users\Mark and Jamie\Downloads\react-express-starter\server`
Proxy error: Could not proxy request /api/greeting?name=%3Blllll from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

[philnash]

The output of the React server can overwrite the output of the Express server. Can you try running the Express server only by running:

npm run server

Can you run that and copy and paste the output please.

[GitOffMyGrass]

That was the first output above. Sorry for not making that more clear but I have included it again below. It also launches the front end in my web browser so maybe I have some kind of configuration issue.

D:\Users\Mark and Jamie\Downloads\react-express-starter>npm run server

> react-express-starter@0.1.0 server D:\Users\Mark and Jamie\Downloads\react-express-starter
> node-env-run server --exec nodemon | pino-colada

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `react-scripts start D:\Users\Mark and Jamie\Downloads\react-express-starter\server`
i ｢wds｣: Project is running at http://10.0.0.58/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\Users\Mark and Jamie\Downloads\react-express-starter\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view react-express-starter in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.58:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

[philnash]

npm run server should not run anything to do with webpack, yet I see that in the output. Have you changed something else in the project?

[GitOffMyGrass]

I did not change anything in the project. Just to be certain, I deleted the entire folder, cloned it again and ran npm run server. The output was the same as above. It launches the server and then the front end. On a hunch, I cloned the project into a shorter directory without a space in the name (D:\temp) on my Windows 10 machine and that worked. The command npm run server launched just the server on port 3001 and the command npm run dev launched the server and the front end and the example worked without the proxy errors. That got me curious about why it failed on my Linux box. I stopped using it to troubleshoot once it seemed I was getting the error there too. I launched the server separately and found it was missing the .env file. Once I added that, it worked as intended on the Linux box.

[philnash]

Well that's weird that running the npm command in a directory with spaces in has a different behaviour. Though that is likely an issue with npm rather than this project.

Glad that you got this to work in the end. Sorry you were given the run around by the environment.