How do I change localhost:3000 to custom.domain in react

Question

 "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
  }

you want to change port right ? 3000 to other one ? – Mayur Vaghasiya Jan 03 '22 at 09:54 — Mayur Vaghasiya, Jan 03 '22 at 09:54

score 6 · Answer 1 · answered Jun 10 '22 at 19:05

6

If you are asking about purely locally serving your application you can simply append a HOST value before the script. Much like others have pointed out you can do with a PORT value.

"scripts": {
  "start": "HOST=custom.domain react-scripts start"
}

Then on your machine you will just need to ensure that you have configured your hosts files with the appropriate directive

127.0.0.1 custom.domain

Assuming you have run the start script and are serving the site you can now access it via the url http://custom.domain:3000

answered Jun 10 '22 at 19:05

dajoto

310
3
14

@Farid siadatzadeh: The answer of dajoto is correct. Add a line in /etc/hosts as dajoto mentioned and also change the "scripts"-"start" command alias. Worked like a charm for me. – rubybeginner Jul 08 '22 at 07:57
Can I do it with next.js project? – huykon225 Apr 04 '23 at 09:02

score 1 · Answer 2 · answered Sep 20 '22 at 10:06

In host file add following lines.

Windows: C:\Windows\System32\Drivers\etc\hosts

Linux: /etc/hosts

127.0.0.1 mydomain.local
127.0.0.1 subdomain.mydomain.local

Add HOST in .env file

// ..
HOST=mydomain.local
// ..

Run React App

npm run start

Visit: mydomain.local

score 0 · Answer 3 · answered Jan 03 '22 at 10:03

You can't change localhost to mydomain.com in local development. Your react app is available in your own browser thanks to a local dev server powered by Webpack (it's made under the hood of your Create React App).

If you want a custom domain, you will need to host your code on a server. The server will have an IP address. You can then attach a custom domain name to it through any provider.

When a user tries to access your website, he will send a request to a DNS server, that will find the correct IP bound to your custom domain name and then send him back the code to display your website.

score -1 · Answer 4 · answered Jan 03 '22 at 10:04

If you want to change domain you need to upload your react app to web space. If you want to change port you need to send argument in start script.

"scripts": {
    "start": "set port=4213 && react-scripts start",
}

In this case port will be 4213. So site will run on http://localhost:4213

score -1 · Answer 5 · answered Jan 03 '22 at 10:21

You can change the port by doing the following change for the start command in your package.json file.

"scripts": {
    "start": "PORT=8050 react-scripts start",
  }

If you want to connect to a custom domain then hosting is the best option.

Other option is to first change the PORT no and then use some service like ngrok to expose that port.

How do I change localhost:3000 to custom.domain in react

5 Answers5