Why my React app doesn't launch on the specified "domain.name", but runs on "domain.name:3000"?

GoodMan 0
Viewed 28

I am following a tutorial that adds the following line to the hosts file:

127.0.0.1 posts.com

And uses this address to launch his React application instead of localhost:3000. But on my Windows machine it doesn't work at posts.com but works on posts.com:3000. Why this happens and how can I fix it?

The following is my hosts file content:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost

127.0.0.1 posts.com
# Added by Docker Desktop
10.24.153.39 host.docker.internal
10.24.153.39 gateway.docker.internal
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section
hosts windows-10 redirect reactjs
1 Answers

By default, your dev server, whatever that is (I can help better if you post that info) is serving HTTP on port 3000. Hosts files can only fake the domain, and not the port.

The default HTTP port a web browser uses when you hit a domain is 80 (443 if you are using HTTPs) and if the server is hosting on a different port to 80, it has to be manually defined in the URL.

If you need it to not be manually defined in the URL under dev, you must reconfigure your dev server such that is serves on port 80 (or 443 if using HTTPS).

How to do this is dev-tool specific. For example, if you're using create-react-app you would change the start script in package.json to be this then reboot it:

"start": "set PORT=80 && react-scripts start"

But if its something like webpack dev server or vite, you'd change the port option in the webpack/vite config.

Adam Thomas0
Related