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?

score 15 · Answer 1 · answered Apr 04 '22 at 21:49

15

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.

answered Apr 04 '22 at 21:49

Kildareflare

4,590
5
51
65

1

Any quick explanations as to why devServer is top-level instead of under `webpack: config`? – cyclingLinguist Apr 04 '23 at 18:50
https://craco.js.org/docs/configuration/devserver/ – Bohdan Yurov May 24 '23 at 11:56

score 4 · Accepted Answer · answered Nov 20 '21 at 20:31

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

How to start react app on custom port with CRACO?

2 Answers2