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.
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
#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.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.
#4 - David Rolston 2019-04-12 04:28 - (Reply)
After more investigation, it seems that if you have Windows, you need to use "browser": "chrome". Thanks cano!
#5 - Lori 2019-12-11 16:48 - (Reply)
so whats the syntax for IE Edge? I've tried everything and cannot get it to work.
#5.1 - David Rolston 2020-01-21 05:38 - (Reply)
An educated guess would be to try "browser": "microsoft-edge"
