Browsersync

Install 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)[nodejs.org]. Run the installer and follow the onscreen prompts.

After Node.js is installed, open your Terminal application to verify npm is installed and ready to go by running the following command:

npm -v

This should return the current version number.

Browsersync

Next, we’ll 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 a shortcut 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 to run a bunch of other commands for you!

We’re going to do just this in order to run our server with one simple command: serve.

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 (type cd ~/ to make sure you're in 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.

To find out if you have a .bash_profile or .bashrc file (or both), type ls -la at the prompt (making sure you're in your home directory first). The hidden files (the ones that start with a . will be at the top of the list).

If you don't have either file in the list, you can create one. Before you do, check that you are in your home directory already by typing cd ~/, then type touch .bash_profile.

Run the following in your Terminal to edit you shell configuration file, this is going to launch Atom with your file:

atom ~/.bash_profile

# or atom ~/.bashrc

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. With this information, we can now configure the server to provide an external address that we can use to go to our website with any other device that is connected to the same network (e.g., on the same wifi)!

Setup the serve command alias

The other line we need to add is the actual command alias which will start the Browsersync server. Make sure to put this one after the $LOCAL_IP one we just added in the step above.

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 alias is 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.
• The browser-sync start command is what starts up the Browsersync server.
• The -s option runs the local server.
• The -f option 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-verify option to remove this feature.
• The --host option sets the IP address of the host computer. This is where we use the $LOCAL_IP variable we created earlier.
• Finally, the --port option denotes which port our server should run on.

Run the command

In your Terminal, change directories to somewhere with project files that you’re working on. The easiest way to do this in Terminal is to type cd (with a space after it), then drag the folder you want to switch to onto the terminal window from Finder and press ENTER.

Next, just type your command to launch the server.

serve

Your Terminal should output information with the addresses that it's running, as well as open your default browser and load the index.html page automatically. 🎉