Introduction

Atom is a popular open-source text editor with color styling, code autocompletion, and other functionality. It comes with support for many programming languages including C, C++, C#, CSS, HTML, Java, and many, many others. Atom has been extended by its community of users through packages that add new features.

Installing Atom

Visiting atom.io will try to guess the operating system of the device and prove an appropriate download link. Other versions and supported platforms can also be found on its latest releases page on GitHub.

Once installed, Atom can then be used to write in many different programming languages.

What is a “live server?”

In web development, and programming terminology in general, the phrase “live server” means something which updates as changes are made to its configuration or code.

When working on a website, having a “live server” is a common technique for very quickly working on code where changes go “live” as they are saved to a development or local device. This can be a fast way to build a site where code changes can be made and then “seen” in the server as it reloads its content.

Accessing Packages

Atom comes with many built-in packages. These can be managed through going to Packages –> Settings View –> Manage Packages.

Note: Atom comes with over 80+ installed packages by default!

Adding atom-live-server

While packages can be managed through the Managed Packages screen, going to Packages –> Settings View –> Install Packages/Theme screen allows for installing new ones.

In the “Search packages” text area, typing “atom-live-server” to find the package.

Click “Install” to download and install the atom-live-server package. (This process can take seconds to up to minutes depending on bandwidth and other factors.)

Using live-server

The atom-live-server package adds a local web-server to Atom. To start the web-server for the currently opened project (folder), click on Packages –> atom-live-server –> Start server. (Once started, it can be ended through Packages –> atom-live-server –> Stop…)

When started, atom-live-server opens a web-server on port 3000 on the localhost. In other words, this is a local, private version of a web-server. When working with web development, this private server “pretends” it is a public server and allows for working on projects as if they were “live” on the public internet.

As files are saved in Atom, atom-live-server reloads the content. With working with HTML, CSS, and JavaScript, this means the webpage will reload as soon as the file is saved. It will always show the latest version of the files. This allows for very quickly seeing changes to the code as they happen and shortens the design and development process.

Note: When using Windows, running a web-server might prompt Windows Defender Firewall to confirm which types of networks to allow access. Never use atom-live-server as a private server with access to a public network.