GizmoLA.com

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:



For Chrome under Windows:




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