How to install & configure Atom Live Server

#1

Downloaded and installed from Github, option does appear under “packages” in my Atom.

However items I’m working on in Atom do not automatically update in live server window when project is saved. In fact live server window is not loading the same file I’m working on in Atom.

I have tried both accessing from within Atom (“packages --> atom-live-server --> Start server”) and by manually typing in “127.0.0.1:3000” in URL bar. Doing an “inspect” on page shows live server code injected on page, but html is empty (it’s not the same document I’m working on in Atom).

What am I doing wrong? Any guidance would be appreciated, it’s difficult to find instructions online on how to install & configure this. I’ve spent time searching both here and in Google with no luck. Cannot find 3rd party sites with instructions either. Any help is greatly appreciated.

#2

Are you working with a file called index.html? Is your HTML file in the top directory level of your project?

#3

Yes, working with two files: index.html and script.js. They are the only files in the folder in which I’m working. I have both files opened in Atom.

I don’t understand how to attach the live server to the current folder I’m working on. I work in many different folders, do I need to copy instances of the live server package into every folder I work?

#4

Do you have many folders open in Atom at the same time? Because if you do, and the package is opening a server for your first project folder (which is the one that’s literally first on the list), then you are doing things differently than how the package was designed to work.

#5

Thanks for your continued engagement and support, DamnedScholar.

No, I have one project/folder open at a time. But when I finish with one, I’ll close it out and open another “project” and work there.

Right now if I type in “127.0.0.1:3000” it loads a page that shows a directory with a folder and three files. I don’t know from where it is pulling this information (could be a previous project from several days ago) but it’s definitely not the project I’m currently working on in Atom. I only have one instance of Atom opened and I’m only working in one project.

I’m willing to completely start over, what is the proper way to install & configure live server? If there are instructions somewhere online that I’ve missed, I’d be happy to give it another shot.

I came from using Brackets and was using their version of live server successfully, so I don’t believe it is an issue with my machine.

#6

Do the files have names?

I’m willing to completely start over, what is the proper way to install & configure live server?

According to the documentation, all that should be required is pressing the keybinding to activate the server on the chosen port. Speaking of which, what happens if you try to use one of the commands to activate it on a different port? Does the 3000 server go away or no?

I came from using Brackets and was using their version of live server successfully, so I don’t believe it is an issue with my machine.

Is the Brackets feature based on the live-server Node package, like atom-live-server is? If not, then they’re not really comparable.

#7

Have you tried restarting the server?
Packages -> Atom-live-server ->start.

I was getting same issue. My issue got resolved with that.

#8

So I just started with Atom based on the Lynda Course recommendation and that it is well integrated with GitHub.
1)I started a fresh install of atom 64 bit on my windows 10 laptop
2) I went to File/ Settings/ Install Packages and selected atom live server
3) opened my first project and pointed the folder at the public live folder which contained the index.html and .js files of my website porject
4) went to Packages/atom-live-server/ Start Server and the server booted up in Chrome on 127.0.0.1:3000
5) it’s updating and the page is live

#9

Bro how to point the folder inside atom live server in which folder I wants to put my html and CSS files pls help me

#10

@Sabari wherever you have the root of your current project that will be the root directory for your atom-live-server. that way you can be working on several different projects in different folders

#11

Tqs for Ur reply bro now it’s working :slightly_smiling_face::heart::heart:

#12

I’m in kinda the same boat as you, but with much-less experience. In fact, I’m a newbie when it comes to programming. I’m ALSO taking a Lynda course, JavaScript Essential Training, The person teaching this course, Morten Rand-Hendriksen, says to download Atom and then download Atom live server and install it directly inside of Atom. And I’m like, “Whaaaaa? How do you do that?”

So I downloaded Atom and Atom live server, but don’t know what I’m supposed to do next. Should the Atom live server folder be put inside the Atom folder? Would I then go to “Install Package” in Atom and find Atom live server there? I hope someone could take me through it, from the beginning, step-by-step.

More info, if it’ll help: My browser is Firefox Quantam 60.0.2 (64-bit). I downloaded Atom 1.27.2 x64, and Atom live server v1.2.5
.

#13

You download packages from within Atom, normally. Just go to Settings -> Install and search for whatever you want.

#14

@johnk . I think the steps i outlined above list the install process pretty clearly how to get a frssh install. install live server outside of atom will only work if the path variables are set correcty. It’s better to install it as a package within the Atom editor

#15

All right. Thanks both of you. We’ll now see how far I get into the lesson before I become confused again. Atom seems rather daunting to use.

#16

Atom does not hold your hand. The documentation covers pretty much everything you need to know, but the software and the documentation are written by seasoned coders for seasoned coders who have used a bunch of IDEs and editors. This does present a barrier to entry, but as someone who is quite comfortable on the other side, the barrier can be surmounted with relative ease if you have the right approach. The first step is to approach the problem aware of your naivete. Since you know that you don’t know how much you don’t know, you look for clues in the documentation provided to teach novices how to use the program. In this case, you want to read the page on installing packages.

There is a small level of expertise that makes Atom easier to use. It is not hard to attain this expertise if you find Atom to be an interesting tool. This forum is populated by a collection of people who have learned the language and the methods of Atom enough to make it do what we want. If you also want to learn to use Atom, it is available to you.

#17

Okay, I read the installing packages page - and well as a lot of the other documentation (a lot of which went over my head. But as you said, it’s written by seasoned coders for seasons coders). The page didn’t address the issue I’m having, though: I go to Packages on the menu bar and hover the cursor over atom-live-server and then click on Start server. A new blank web page opens up. How can I get the Atom live server to integrate into the same screen as Atom? Thanks again for any help.

#18

I’m not sure why the Atom documentation would address a community package. Furthermore, you want the package to do something that it hasn’t been written to do. You can take a look at the functionality the package authors have made available by looking at the package page, and following that to the GitHub repo. There, you will see that it is indeed possible to tell live-server to stop opening your browser. It’s a piece of cake to use that setting alongside a package that does create a browser inside Atom, such as browser-plus. Just enter your live-server URL into the browser-plus pane as normal, and you can add it as a favorite if you want.

#19

Not exactly sure I understood what you said, but the instructor of the video course tells us to download Atom and the Atom live server extension. From the transcript of the course:

Finally, to simplify the development process and ensure the JavaScript I write on my computer acts as if it was served up from a real web server I’ll use the Atom extension called Atom live server. It spins up a small web server on my computer and sends any changes I make to my project directly to the browser on the fly.

Here’s a screenshot of something we see later in the course. Maybe I’m misunderstanding something and these are just two windows put up next to each other, but not part of the same window?

image
image.jpg1127x630 95.8 KB

#20

Yup. That’s chrome on the right, not Atom.