Configure the Atom live server to use Chrome

Configure the Atom live server to use Chrome Fri, Sep 15. 2017

The free open source Atom text editor from Github is one of several development tools that have gotten a lot of traction in recent years amongst web technology developers looking for an alternative to the big IDE's like Visual Studio, Eclipse or the JetBrains editors.

Atom is aimed at the same niche often filled by Sublime Text, Vim and Notepad++, namely to provide a small self contained code editor able to work on multiple files at a time, and with available plugins that provide programming features like color syntax highlighting, smart indentation and robust search and replace.

Atom is a desktop application based on the Electron framework, which provides a runtime that supports many different platforms, and facilitates the development of products written in the standard web languages using html, css and javascript. Discord, Tidal, Slack & Microsoft Visual Studio Code are a few notable apps also built on top of Electron. In the case of Atom, the source is written in CoffeeScript and Less. It's no surprise given that Atom was created by Github initially for internal use, that it features tight integration to git and github.

One of the design goals of Atom was that it be extensible, and as developers have begun to use it, a large number of "Packages" have been contributed. One of these packages "atom live server" provides an integrated HTTP server with "live reload capability."

To use it, you open your primary html page file in Atom, and start the atom-live-server using the Packages menu or one of a number of different key bindings that launch the HTTP server on a particular port. What's really convenient, is that by default, it will open a browser and load the page for you, connecting to whatever port the live server is listening on.

As you edit your web project files, "Live reload" looks for changes and updates the web environment without requiring you to refresh the browser manually. This is a really great feature for html & javascript developers who are working iteratively on a web project. For example, you can be looking at a page that includes a lot of javascript code, with the developer tools and console open, and do interactive coding, with your changes reflected instantaneously in the browser as soon as you save the source file. It's extremely slick once you have it setup.

Using Chrome

Atom Live Server will use your default system browser, but in many cases that might not be the browser you want to work with. The Live server supports a project by project configuration option. You need to create a .json file in your project directory named .atom-live-server.json In this file you simply need to include a json block with a "browser" key. While this is documented on the Atom Live Server page, there isn't specific instructions on how you set Atom Live Server to open Chrome. In fact, there are a number of different options you can put in the atom-live-server.json file, few of which are documented. They do point you to the live-server github page, which is a node app that provided the basis for atom-live-server. The Params documented on startup give you a lot of different options for things like supporting https, however there is nothing there to help you know what "browser" string to use to get chrome to open.

For Chrome under OSX, the block you need is:

// .atom-live-server.json
{
"browser": "google chrome"
}

For Chrome under Windows:

// .atom-live-server.json
{
"browser": "chrome"
}

Once this file is in place, start the Live Server and you should see your page opened in Chrome or a Chrome tab if Chrome is already open.

Companion Video

Posted by David Rolston Comments: (7) Trackbacks: (0)

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

#1 - uxdOwl 2018-02-03 00:42 - (Reply)

Just wanna shout out to the author and say thank you so much for this tip!

Once thing to note is that after adding the code snippet to your .json file from terminal and running source command it returns an error stating -bash command not found. I ignored this error and then ran the command live-server and it worked, launching the live server in google chrome as expected. So thank you for the tip!

#2 - Frustrated 2018-03-26 02:11 - (Reply)

Wondering if anyone is willing to write an instruction (for dummies) on how to install atom live server and get it to properly work? It's not obvious to me and I'm a developer. (Giving Atom a trial, previously used Sublime 3, Brackets & Notepad++).

I have it installed, I think it is running, but it only loads a blank page and not the one I'm currently working on in Atom.

I'm three hours into trying to figure this out and am about to give up on Atom.

#2.1 - David Rolston 2018-03-26 02:27 - (Reply)

It works like a web server that runs a project directory, so make sure you have a project directory setup. It isn't specifically tied to the file you are editing, but rather all the files in the project directory. This makes sense when you think about it, because it wouldn't make sense to just load an included .css file or .js script. Also make sure you are clear what port it is running on. If you hover over the Packages menu for the server, it will show you what port the server is running on.

#3 - cano 2019-01-11 08:30 - (Reply)

for me it works just writing
"browser": "chrome"

#3.1 - David Rolston 2019-02-13 22:13 - (Reply)

Thanks for your comment. I tried to use "chrome" but that did not work for me under OSX. I believe that by default, it will use your default OS browser, so you really need this if Chrome is not the default.