Webpack: Beyond the Basics

Multiple Domains in Localhost

In this section we're going to begin the final build of our multi-domain blog application.

  1. We'll setup our local development environment to work with multiple domains.
  2. We'll scope our data and css on a per domain basis.
  3. We'll build out the content of our blog and add SSL to the workflow.
  4. Finally we'll integrate the Articles using both dynamic imports as well as Redux and Redux thunk loading of blog content via an API.

Lots to cover in a short amount of time, so let's get to it.

In this article we're going to start setting up our blog to work locally with multiple subdomains pointing at multiple blogs, within our one app. The multi-domain approach is used very often for all manner of white-labelled, or skin-able applications. Here's we'll focus on local development.

We're going to start where we left off in the last section.
If you need to catch up:

git clone https://github.com/lawwantsin/webpack-course.git
cd webpack-course
git checkout local-domains
npm install

So we want to create multiple domains in our development environment. We currently use http://localhost:8080 and we want to use subdomain under a common local Top Level Domain (TLD) like .local ie. http://domain1.local:8080 http://domain2.local:8080.

etc/hosts

So, the simplest way to get multiple hosts is to open up a file in terminal:

atom /etc/hosts

Usually you'll have to provide your password to save this file. It holds 2 things, domain names and where they point. In our file we want something like this.

127.0.0.1    localhost
255.255.255.255    broadcasthost
::1             localhost
fe80::1%lo0    localhost

# vvvvvv====== Our New Domains ======vvvvvv

127.0.0.1    link.local         # For this episode
127.0.0.1    zelda.local         # For this episode
127.0.0.1    anything.else      # Make your own as well

Now when we go to http://link.local:8080 in our browser. We see our blog site again. Same for http://zelda.local:8080.

So this is the simplest way to add domains to your local setup. Every time you want to add a new domain, you'd update this file and your browser should check that on the next reload. Worst case, you have to restart your browser.

Windows

Windows also has host files, but it's at C:\Windows\System32\drivers\etc\hosts. Otherwise it's the same syntax as above.

Dynamic Subdomains with DNSMasq

You may notice the hosts file is a bit slow, as the browser has to load it on every refresh. Another solution, which can give us some trouble, depending on your setup is DNSMasq. It can be installed via MacPorts or Homebrew.

brew install dnsmasq

Once installed we need to create a new folder if it doesn't exist already.

sudo mkdir /etc/resolver

Inside the /etc/resolver folder we want to create a simple file for our .local Top level domain.

sudo touch /etc/resolver/local

Inside this file we need to add just one line.

So in terminal we can just use echo.

sudo echo "nameserver 127.0.0.1" >> /etc/resolver/local

In /usr/local/etc/dnsmasq.conf:

domain-needed         # Only lookup full domains
bogus-priv            # No reverse IP lookups
no-resolv             # Don't use DNS servers listed in resolv.conf
no-poll               # Don't poll changes in resolv.conf
no-hosts              # Don't read /etc/hosts

address=/local/127.0.0.1   # Adds the .local TLD

listen-address=127.0.0.1  # Points it at localhost

Test Your New Config

There are a few commands that will help you debug your dnsmasq setup.

List your DNS resolutions:

scutil --dns

To start and stop with homebrew services.

sudo brew services start dnsmasq
sudo brew services stop dnsmasq

Stop dnsmasqs currently running:

sudo kill -9 $(pgrep dnsmasq)

Test your dnsmasq config for errors

sudo /usr/local/sbin/dnsmasq --test

Start dnsmasq with logging:

sudo /usr/local/sbin/dnsmasq --no-daemon --log-queries

Test your local domain from the terminal:

ping -c 1 link.local:8080

You should see it respond. It of course can also be brought up in a browser. Cool, we've got subdomains.

Gotcha: Sometimes the browser caches the last DNS rules it got, so when stopping DNSMasq or starting it, it's probably best to restart the browser if it's giving you the same results over and over.

In Sum

So there we have it. 2 ways to setup local domains on your system. Apologies to Windows users for the lack of detail. Installing DNSMasq can get tricky if you just slap up a bunch of stuff pasted in from the internet and your PATH is wrong so you can't find the binary. So I hope I at least imparted some understanding of how to test your DNS configuration.

We didn't add any new code to our project, so there are no branches for this video.

Up Next

We're going to use these new found domains as we build out the Blog app, with a proper article and a unique theme or skin for each of your domains.