React adding "build" to end of base url

Question

I'm creating a basic React app using create-react-app. When I cd into the root folder and run npm run start or yarn start, the project url is http://localhost:3000/build.

Why is it adding build to the end of the url and how can I make the server load http://localhost:3000/ instead?

Answer 1

Under the package.json in your project folder root (the one that spawned into existence after you created the app using the create-react-app) there are scripts defined.

There you can see what gets executed when you run npm run start or yarn start -> the "react-scripts start"

BTW, you can just npm start - no need to npm run start.

So where are these react scripts and what gets called?

Well, in the project root folder is your node_modules. And in it there is a react-scripts subfolder and in it a folder named scripts and in it a file named start.js. This is what actually gets run.

This chunk

const urls = prepareUrls(
      protocol,
      HOST,
      port,
      paths.publicUrlOrPath.slice(0, -1)
    );

Determines URLs and it basically, "glues togather"/concats those parts the one you are interested in is:

paths.publicUrlOrPath.slice(0, -1)

the paths object is defined in: node_modules\react-scripts\config\paths.js

In this file, this piece of code determines what you are after:

const publicUrlOrPath = getPublicUrlOrPath(
  process.env.NODE_ENV === 'development',
  require(resolveApp('package.json')).homepage,
  process.env.PUBLIC_URL
);

So you have fiddled with process.env.PUBLIC_URL either in Node or maybe at OS level? I am not sysadmin. Bottom line is, you changed this one way or the other.

I can give you a "get out of jail for free" card:

In the root folder there is a package.json file and in it, you can add this line:

"homepage": "",

This will force the require(resolveApp('package.json')).homepage, to come into play, and use that instead as the final part of your URL.