When working on a static site your life can be made much easier if you have a simple way to activate a local preview of your design.
What’s even better is if this local preview has a live reload function so you automatically see your changes take effect as you work. And even better yet, if it allows you to view your site via a https:// protocol, given that sometimes things don’t work quite as expected when viewed over a file:// protocol.
There are multiple ways to setup local previews, but one of the easiest ways is to just operate directly through the Atom code editor, taking advantage of its excellent ecosystem of extension packages. All you need to do is install your preferred package, activate it, and you’re ready to go.
In this quick tip I’ll show you three of the best Atom packages for quickly and easily setting up live reloading local previews. Let’s begin!
Note: If you don’t have Atom yet, you can grab it from https://atom.io/
atom-live-server
The atom-live-server package is my personal “go to” when I need a quick and easy way to preview some static code. It spins up a local preview with an http:// protocol and automatically refreshes when changes to any of the files being used in your project are saved.
To install it go to Packages > Settings View > Install Packages / Themes. Then search for “atom-live-server” and hit the package’s Install button when you find it.
To use the package you’ll need to have a project folder added to the Project sidebar. From here go to Packages > atom-live-server > Start Server and a preview of your site will open up in your default browser. If you need to stop the server again go to Packages > atom-live-server > Stop Server.
If you have multiple projects open in the sidebar, whichever is at the top will the be one previewed. If you need to switch from previewing one project to another, first stop the server, then drag and drop the project you want to preview to the top of the sidebar, and restart the server.
atom-html-preview
Rather than opening a preview in your default browser, the atom-html-preview package gives you an inline preview of any HTML page within the Atom editor. To install this package follow the same instructions as we went over for the package above, but search for “atom-html-preview” instead.
Once installed, open the HTML file you want to preview, then go to Packages > Preview HTML > Enable Preview. You’ll then see your work space split, with your code showing in the left pane and your live preview in the right pane.
When using atom-html-preview, files don’t need to be saved in order for the preview to be updated. Rather, as you type your preview will be updated on an ongoing basis.
atom-browser
The atom-browser package allows you to easily preview your HTML in a browser window embedded inside Atom, similarly to atom-html-preview. Unfortunately previews are via a file:// protocol, but it does include live reload.
The real standout perk of this package though, is you can use the inline preview window as a regular browser. This makes it very convenient to look up documentation as you work, or to follow a coding tutorial for example.
Install the package by following the steps described earlier and searching for atom-browser.
After installation, open the browser for regular browsing by going to Packages > Atom Browser > Toggle.
To preview an HTML document right-click on it in the Project sidebar and choose Atom Preview. To enable live reload while you code click the little lightning icon next to the browser’s URL field.
Wrapping Up
That covers three super handy live preview packages for Atom. With these in your tool kit keeping tabs on your designs as you go should be a lot smoother and easier!
Do you have any other suggestions on quick and easy ways to handle local previews? If so, please go ahead and share them with other Tuts+ readers in the comments below.
Related Links
Learn More Atom
