8

I have been developing a small app with create-react-app and a few other libraries i added. Given the planned architecture and some tests i'd like to run with react-router, i would like to be able to run my app locally using a domain mame in the url, so that instead of

localhost:3000/

it would be

somedomain.com

I have tried a few things like ejecting ceate-react-app but im not sure how to modify the webpack config to change the public path, or how to set up some sort of proxy on my machine so somedomain.com would be equivalent to typing localhost:3000

I'm not sure what the correct approach is and i cant seem to find any reliable information yet.

xunux
  • 985
  • 1
  • 12
  • 23
  • add a rule to your hosts configuration to point the domain/subdomain url to your localhost IP – Derek Jul 03 '18 at 03:04
  • Well i tried something along those lines the problem im having is that my virtualhost setup is an apache thing, related to virtualhosts and whatnot, and create-react-app runs on webpack devserver, so I'm having a difficult time figuring that one out. I can get my localhost to go to a specific directory in my computer locally, but it doesnt run the webpack server. Any more details on how you would do it? – xunux Jul 03 '18 at 17:06

4 Answers4

10

As well as changing your /etc/hosts as advised above, if you want CRA to know about the new host name, the HOST env var should give you what you want.

E.g. (this can go into your package.json under scripts/start)

HOST=somedomain.com react-scripts start

That should start your CRA-based dev server, listening at that domain name, and it should open/refresh a browser tab pointing there.

Edit: docs on this and other env vars that CRA uses.

gimboland
  • 1,505
  • 2
  • 15
  • 24
3

Combining some of the other answers:

Step 1: on your local machine add this line to your etc/hosts file:

127.0.0.1 somedomain.com

Step 2: in your react app directory .env file, add:

HTTPS=true

HOST='somedomain.com'

Step 3: (Depending on whether you're running a backend) you may need to add somedomain.com as an allowed domain

dxgarnish
  • 99
  • 8
2

You can do it by updating your hosts file with the following entry

127.0.0.1 somedomain.com

and then use somedomain.com to access your site

But if somedomain.com happens to be your actual host address then you will have to revert it back when you want to connect to the actual hosted somedomain.com

You can find more info about how to edit your host file here: https://www.siteground.com/kb/how_to_use_the_hosts_file/

There a similar answer which you can find here: Assigning a domain name to localhost for development environment

ts1
  • 31
  • 7
0

you can change the port by adding 

"scripts": {
    "start": "set PORT=8080 && react-scripts start"
}

but there is no other way to change the IP address when you are developing locally.i also tried to do that.

Viraj
  • 410
  • 5
  • 10