As developers, we often require a local web server to test something we're working on and often don't have time to set up a complex system for a quick test. We need something ready-to-go and easy to use to check our latest code changes, now!
Here's a quick tip on starting a local web server with one command!
The server we'll use features live-reload, which means when you make a change to your code, your browser will refresh automatically!
Oh, you also need to test on mobile, tablet, and/or your gaming console? No problem! Connect each of your devices to your local server and watch as they all refresh, hyper-link and scroll together in real-time! 😱
Let's go! 🚀
First, let's install some stuff
Node.js and npm
Like most things these days, make sure you have Node.js and
npm installed. You can do this by downloading the official installer for your platform from NodeJS.org.
After Node.js is installed, open your Terminal application to verify
npm is installed and ready to go by running the following command:
This should return the current version number.
Next let's use
npm to install our server application, Browsersync! This is the app that does all the heavy lifting like serving your files, reloading all the connected browsers on file save, and more!
Type and run the following command:
npm install -g browser-sync
This will install
browser-sync "globally" so that you can use it to serve and test your work in any directory on your computer.
Now that we have everything installed, let's set up the command to start the server in your Terminal!
Creating the command
One of the coolest things about using the Terminal and working with the command line interface is that you can create your own custom commands which then runs a bunch of other commands for you!
We're going to do just this in order to run our server with one simple command:
Open the shell config
A custom command is called an "alias" which are created in your Terminal shell configuration file.
By default, the macOS Terminal runs the Bash shell. From your home directory (
~/) open either the
.bash_profile file or, if that doesn't exist, the
.bashrc file. In case that one also doesn't exist, just create it and we'll make the changes there.
My text editor of choice is Atom, so if you have this installed, run the following in your Terminal to edit you shell configuration file:
Scroll to the end of this file as we'll be including our additions at the very end.
Get your local IP address
The first line to add will be used to get the current local IP address of your computer. This will come in handy if and when you're testing something elsewhere other than your home network.
Add this to your file:
export LOCAL_IP=`ipconfig getifaddr en0`
This line creates a new variable called
$LOCAL_IP and stores your local network IP address. Why do we need this information? You'll soon find out!
Setup the serve command alias
The other line we need to add is the actual command alias which will start the Browsersync server.
Add this line to your shell configuration file:
alias serve="browser-sync start -s -f . --no-notify --host $LOCAL_IP --port 9000"
Let's breakdown what's in this line.
- The first part,
alias, tells our shell environment that we want to create a new, custom command.
- Whatever comes after
aliasis the command that we type. In this case, our command will be, "
serve." The string that's set to this command is what actually gets run in the background.
browser-sync startcommand is what starts up the Browsersync server.
-soption runs the local server.
-foption tell Browsersync which files to watch. In this case we use the dot
.character to denote the current Terminal directory.
- Normally when connecting to a Browsersync server there's a little message to signify a connection. We use the
--no-verifyoption to remove this feature.
--hostoption sets the IP address of the host computer. This is where we use the
$LOCAL_IPvariable we created earlier.
- Finally, the
--portoption denotes which port our server should run on.
Note: Checkout all the other Browsersync command line options available to customize your server!
Now, let's save the file and try out the new
Run the command
In your Terminal, change directories to somewhere with project files that you're working on. For example, I'm checking out a change I've made on The A11Y Project site, and I want to test it locally.
Since my copy of the site is in
~/Sites/a11yproject.com/_site, I'd issue the following command to change to this directory:
In this directory there's an
index``.html file with content and style sheets linked from a subdirectory, along with all the other files to make up the site.
I'm going to run the serve command from here:
Your Terminal should output information like the following, as well as open your default browser and load the
index.html page automatically:
As displayed in the Terminal output, the "Local:" IP value is that of your own computer,
http://localhost:9000. However, the "External:" IP is what's interesting here. This is yet another benefit and use of the
$LOCAL_IP variable in the shell configuration file.
$LOCAL_IPvariable adds a quick note of your current, local network IP address when starting up your server.
Use this value when you want to test on a mobile, tablet, or other computing device with a browser!
serve command in action! 👇
I hope this tip has been helpful in getting a local, live-reload server up and running quickly!
Are there any other Browsersync configurations you'd recommend? Are you using a different method for launching a local server for quick tests? Let me know in the comments! 🙌
Happy hacking! 💻😄💖