Using Atom as a “Live Server”

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.