In this section we're going to begin the final build of our multi-domain blog application.
- We'll setup our local development environment to work with multiple domains.
- We'll scope our data and css on a per domain basis.
- We'll build out the content of our blog and add SSL to the workflow.
- 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.
So, the simplest way to get multiple hosts is to open up a file in terminal:
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 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
/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
sudo echo "nameserver 127.0.0.1" >> /etc/resolver/local
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:
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.
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.
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.