How to start react app on custom port with CRACO?

Question

I want to use Tailwind CSS for my react apps. The problem is CRACO start starts the app on the default port, which is 3000 and I want to have custom ports but I can't figure out what is the right approach. ( Can't find anything about this in their documentation )

I tried something like PORT=5000 CRACO start inside the scripts field of the package.json file but doesn't work. Any idea?

Drench

Answer 1

CRACO use the webpack devserver configuration to set the port.

you need to create a configuration. read more here in the readme:

https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-file

So you solution need to redefine devServer. How to define it read in the webpack documentation:

https://webpack.js.org/configuration/dev-server/#devserver

Fireplug

Answer 2

The accepted answer contains links to the relevant information, but in case they become invalid or you are too lazy to look at them here is the config you need to add to your craco.config.js file.

module.exports = {
  devServer: {
    port: 5000
  }
}

Note that devServer is a top level property in the config.

Mesozoic

Any quick explanations as to why devServer is top-level instead of under webpack: config? – Rumble

craco.js.org/docs/configuration/devserver – Wanderoo