Rename localhost to custom domain using webpack dev server?

Question

I'm trying to rename my localhost that I use on development.

I have updated my C:\Windows\System32\drivers\etc\hosts file and added this line (ran as Administrator):

# 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        my-dev-environment.com         // <===== ADDED THIS LINE
127.0.0.1:8080   my-dev-environment.com         // <===== I ALSO TRIED THIS

But I keep getting this error:

This site can’t be reached
"my-dev-environment.com" refused to connect

I'm using webpack-dev-server to develop, and here is my current config for it:

webpack.config.js

devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: {
      index: '/app.html'
    },
    index: 'app.html'
  },

QUESTION

Am I doing something wrong? Why isn't it working?

UPDATE (SOLVED):

Following @Joel recommendations from the answer below, I've added this to my webpack.config.js

devServer: {
  public: 'my-dev-environment.com',
  port: 80,                       
}

And this is on my hosts file:

127.0.0.1        my-dev-environment.com

Now I can access it on my-dev-environment.com

Restart any open browsers, flush dns cache. then you should be good to go. Also, try `127.0.0.1 localhost my-dev-environment.com` — Joel, Feb 05 '20 at 09:44
@Joel Hey Joel, just tried everything. Including restarting my PC and nothing worked! Could this be related to some `webpack-dev-server` config? — cbdeveloper, Feb 05 '20 at 10:53
this shouldn't be the case but, what port is your running application running on? try accessing it through my-dev-environment:thatport in your browser. (since you cannot allocate a custom port in your host-file, i think this is the way to go) — Joel, Feb 05 '20 at 10:58
@Joel don't think so. Regular Windows 10 installation. I did all the config myself for the `webpack` config files. It runs fine on `localhost:8080`. But somehow I can't get it to recognize the `hosts` file config alias. — cbdeveloper, Feb 05 '20 at 10:59
in hosts. do `localhost my-dev-environment.com` and `127.0.0.1 my-dev-envionment.com` then access it with `http://my-dev-environment.com:8080`. Clear dns-cache and restart browsers first. — Joel, Feb 05 '20 at 11:01
When I try `my-dev-environment:8080` I get `Invalid Host header` — cbdeveloper, Feb 05 '20 at 11:02
Okay, kill webpack, restart it using launch args `--host 0.0.0.0`. This might be needed too: `--disable-host-check` — Joel, Feb 05 '20 at 11:03
You can also try to start your webpack using `--public my-dev-environment.com:8080` — Joel, Feb 05 '20 at 11:05
This works! Hosts file: `127.0.0.1 my-dev-environment.com` and `devServer: public: 'my-dev-environment.com:8080'`. This is making my local environment accessible on `my-dev-environment.com:8080`. Do you think it's possible to configure it to omit the `port` part? And be accessible through `my-dev-environment.com` only? Thanks a lot for your help! — cbdeveloper, Feb 05 '20 at 11:16
Well, since `http://` defaults to 80, try changing your localhost port to 80. Then omit :80 and add `http://` in front of your url when u try to access it. — Joel, Feb 05 '20 at 11:19

Joel · Accepted Answer · 2020-02-05T13:53:35.913

7

In hosts: 127.0.0.1 my-dev-environment.com

Flush your DNS-Cache by running ipconfig /flushdns.

When launching your webpack-dev-server:

add the flags --host 0.0.0.0 and --public my-dev-environment.com:PORT

Is it possible to omit the :PORT when accessing it through the browser?

Since http:// defaults to :80. Make your application run on port :80 instead. Unless you have an apache instance or something similar, then run it on :8080.

If you have an https:// protocol, make your application run on port :443 instead.

edited Feb 05 '20 at 13:53

answered Feb 05 '20 at 11:22

Joel

5,732
4
37
65

100% working. Added this to my `webpack.config.js`: `devServer: { public: 'my-dev-environment.com, port: 80 }` and now I can access without the port number in the URL. Thanks a lot for your help! – cbdeveloper Feb 05 '20 at 11:25

score 5 · Answer 2 · answered Mar 24 '22 at 13:48

5

With Webpack 5, the devserver config changed from public to host:

devServer: {
  host: 'my-dev-environment.com',
  port: 8080,
}

Webpack docs: https://webpack.js.org/configuration/dev-server/#devserverhost

answered Mar 24 '22 at 13:48

Bill Keller

793
7
22

Rename localhost to custom domain using webpack dev server?

2 Answers2