shoppingfoki.blogg.se - Atom livereload

#Atom livereload install#
#Atom livereload code#

This is where we use the $LOCAL_IP variable we created earlier.

The -host option sets the IP address of the host computer.

We use the -no-verify option to remove this feature.

Normally when connecting to a Browsersync server there's a little message to signify a connection.

character to denote the current Terminal directory.

The -f option tell Browsersync which files to watch.

The browser-sync start command is what starts up the Browsersync server.

In this case, our command will be, " serve." The string that's set to this command is what actually gets run in the background.

Whatever comes after alias is the command that we type.

The first part, alias, tells our shell environment that we want to create a new, custom command.

The other line we need to add is the actual command alias which will start the Browsersync server.Īdd this line to your shell configuration file: alias serve= "browser-sync start -s -f. Why do we need this information? You'll soon find out! Setup the serve command alias This line creates a new variable called $LOCAL_IP and stores your local network IP address. This will come in handy if and when you're testing something elsewhere other than your home network.Īdd this to your file: export LOCAL_IP=`ipconfig getifaddr en0` The first line to add will be used to get the current local IP address of your computer. Scroll to the end of this file as we'll be including our additions at the very end. 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: atom ~/.bashrc In case that one also doesn't exist, just create it and we'll make the changes there. bash_profile file or, if that doesn't exist, the. From your home directory ( ~/) open either the. Open the shell configĪ custom command is called an "alias" which are created in your Terminal shell configuration file.īy default, the macOS Terminal runs the Bash shell.

We're going to do just this in order to run our server with one simple command: serve. 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! Now that we have everything installed, let's set up the command to start the server in your Terminal! Creating the command

#Atom livereload install#

This will install browser-sync "globally" so that you can use it to serve and test your work in any directory on your computer. Type and run the following command: npm install -g browser- sync 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! This should return the current version number. You can do this by downloading the official installer for your platform from .Īfter Node.js is installed, open your Terminal application to verify npm is installed and ready to go by running the following command: npm -v Like most things these days, make sure you have Node.js and npm installed. Let's go! 🚀 First, let's install some stuff Node.js and npm 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! 😱 The server we'll use features live-reload, which means when you make a change to your code, your browser will refresh automatically! Here's a quick tip on starting a local web server with one command!

#Atom livereload code#

We need something ready-to-go and easy to use to check our latest code changes, now!

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.