Install Atom Text Editor and Use of Live Server Package for HTML, CSS and JavaScript

Atom is a coding editor that was developed by Github. Because Github is now owned by Microsoft, Atom is technically maintained by Microsoft. And, sure, it is kept up to date. There are a lot of individuals on Github who are following the Atom repository, staring the repository, and actually using the editor.

A hackable text editor for the 21st Century

The editor is totally hackable, which means you can set it to function exactly how you want it to - either through plugins or by modifying the code yourself. Atom is a desktop program that was created using HTML, JavaScript, CSS, and Node.js.

GitHub for Atom

A text editor is at the heart of a developer's toolkit, yet it hardly works alone. The GitHub package allows you to interact with Git and GitHub directly from Atom.

Create new branches, stage and commit them, push and pull them, handle merge conflicts, see pull requests, and more - all from your editor. The GitHub package is pre-installed with Atom, so you're good to go!

Installing Atom

What is a "live server?"

Live Server that makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET - Whatever, it doesn't matter).

This is a small development server with the ability to reload in real time. Use it for tinkering with your HTML/JavaScript/CSS files, but not for releasing the finished product.

Adding atom-live-server

Go to Packages –> Settings View –> Install Packages/Theme screen allows for installing new ones.

In the “Search packages” text area or input field, type "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 few minutes depending on bandwidth and other factors.)

Using a package called live server in atom.

Atom now includes a local web server thanks to the atom-live-server package.

Start:Click Packages –> atom-live-server –> Start server to launch the web-server for the currently open project (folder).

Stop: (Once launched, it may be terminated by going to Packages –> atom-live-server –> Stop...)

When atom-live-server is started, it launches a web server on port 3000 on the localhost. To put it another way, this is a private, local version of a web server.

Atom-live-server reloads the content when files are saved in Atom. This implies that when working with HTML, CSS, and JavaScript, the webpage will refresh as soon as the file is saved. It will always display the most recent version of the files. This allows you to view changes to the code as they happen and speeds up the design and development process.

Note: When hosting a web server on Windows, the Windows Defender Firewall may request you to confirm which sorts of networks to allow access to. Never use atom-live-server as a private server with public network access.