Html preview in Atom


#1

I am a new Atom user, I write html, but the html preview drives me crazy. I installed the atom-html-preview package, but it is a crap. It sometimes multiplies the preview tabs to 6-8 tabs, I have no idea why. Its behaviour is strange sometimes, there is no back page arrow (e.g. if I have an external link, and want to go back to my html page).

I installed the browser-plus package, but it simply doesn’t work for the F2. Nothing happens.

Those who write html in Atom, how do you live preview your code? I am helpless now.
thx for your help.


#2

I use Browsersync and Chrome. Previewing a page within the editor won’t give you a perfect browser experience. Browsersync automatically refreshes when something changes and it’s easy to alt-tab between editor and browser (or keep one of them in either window).


#3

Thanks for the tip, never heard of browsersync but checked it, seems really cool. But getting it to work for a beginner is a nightmare. I installed node.js, tried to install Bs form the terminal but got stuck. I am afraid this is for seasoned programmers, not me. :frowning:


#4

Instead of giving up, you could share the part you’re stuck at or don’t understand.


#5

Thanks for your help, I don’t want to give up because it seems a good application, but for a beginner, getting a server side application to work is tough, to say the least. (I just began writing in html, I dont know JavaScript, I never worked with servers.)

I naively tried to install browsersync by inputting npm install -g browser-sync in the node.js window (terminal?), as browsersync’s website suggests. Of course it doesn’t work. Node.js gives me a nice message:

npm should be run outside of the node repl, in your normal shell.

I have no idea what normal shell is and what I should do now. Should I do this in some other terminal, not node.js? (I have windows 10).

(And thanks for Browsersync telling me: Get started in 5 minutes. I am way, way beyond that.)


#6

A shell is a program for starting and managing other programs. In Windows, your default shell is the command prompt.

Should I do this in some other terminal, not node.js?

Yes, you should. You can press the Windows key and x together, then hit c to easily bring up the command prompt (this type of keypress sequence is often written as Win-x c).

(And thanks for Browsersync telling me: Get started in 5 minutes. I am way, way beyond that.)

There’s a basic assumption that the user is familiar with their computer’s terminal.


#7

Ok, thanks, I think I could install browsersync in the windows terminal (instead of the node.js) with the npm install -g browser-sync command. Now I am still helpless, I read at their website:

  1. Start Browsersync
    A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:
    Static sites
    If you’re only using .html files, you’ll need to use the server mode. Browsersync will start a mini-server and provide a URL to view your site.

browser-sync start --server --files “css/*.css”

Lets supose my html and css files that I want to live preview are in the D:\html css folder on my computer. How should I continue? I watched youtube tuts e.g. this, but this server thing still confuses me.


#8

You might want to choose a more informative directory name, but okay.

How should I continue?

Follow the steps in the video.

  1. Change to the directory your files are in. In Windows, you have to use the /d flag to change drives. So if you’re starting within C, you would use cd /d "D:\html css". The quotes are necessary because of the space, so that the shell knows that it’s all one “word” in the command.

  2. As the video says, the --files switch for Browsersync tells it which files to watch. If all the files in the directory are ones you want to watch, use browser-sync start --server --files ".", which will tell it to watch all the files in that directory and reload whenever they change. You also need to make sure that your .html files have <body> tags, which Browsersync requires in order to inject the code that allows it to reload the page.


#9

Thank you for your patience!

I used the cd /d “D:\html css” to jump to that folder and then the browser-sync start --server --files “.” command. The win firewall jumped up and wanted to prevent it but I allowed, then it launched a chrome tab and I started to hope. I launched atom and changed something in the html file (which is in the above folder I set, and which contains tags), but the chrome tab doesnt work or refresh. There is no ip address in the tab (as opposed to the video), it says localhost:3000 instead in the address bar, and only Cannot GET/ is displayed below. (BS website mensions possible Visual studio problem for win users.)

If I optimistically assume that I can eventually make Browsersync work, how is BS launched in a new session? It always has to be launched from the windows terminal, setting the target folder?
There is global and local install of BS, as per its website local is the preferred way. The above install is a global or local install? I assumed global, but a specific folder was set so I dont know. If I start a new project (with a new folder containing the html, css etc. files), how to run BS?
How do you use it?
thx


#10

What’s the name of the file? The base file in any web page should be index.html, because that’s what the server expects it to be (unless it knows otherwise). This is not unique to Browsersync; it’s been a convention of web development probably since HTML started to be a thing.

There is no ip address in the tab (as opposed to the video), it says localhost:3000 instead in the address bar

localhost is the domain name for your local computer. It’s synonymous with the IP address 127.0.0.1. The port is 3000, which is an arbitrary high number that probably isn’t in use on any given machine and is easy enough for the user to remember.

only Cannot GET/ is displayed below.

A search turns up confirmation that the error happens when you don’t have an index.html in the directory, which goes back to my previous point.

how is BS launched in a new session?

There are a bunch of different ways, but most of them are more complicated.

It always has to be launched from the windows terminal, setting the target folder?

Not always. If you want, you can drop the command into a .bat file in the same directory and use that to run it from within Explorer.

There is global and local install of BS, as per its website local is the preferred way.

For your purposes, global is best. Local is important if you’re building a project that relies on certain features of Browsersync (features that might change in an update and would break your project). If you were building software to distribute to other people, you would need to define the Browsersync version within your project and have it local.

The above install is a global or local install? I assumed global, but a specific folder was set so I dont know.

You used the -g switch, so it’s global. All global NPM packages should be in your AppData/Roaming/npm directory. Since it’s global, you can activate it from anywhere.

Local packages are installed in the project folder under node_modules/. The required dependencies and version numbers for projects built in the Node ecosystem are recorded in a file called package.json, which you’ll see a lot of. None of that is relevant for you right now.

If I start a new project (with a new folder containing the html, css etc. files), how to run BS?

The exact same way.


#11

Finally, after much blood, sweat and tears shed due to my total lack of knowledge in the windows terminal commands, I could manage browsersync to work. Thank you for your help all along. The problem last time was that the name of the html file was not index.html.

What I didn’t expect, that the html, css whatever file needs to be saved for BS to refresh, from the video I expected that BS is totally automatic (like internal atom preview), but it is logical that the file needs to be saved. So basically I spared only one click (browser refresh) as compared to a simple browser page preview. (I understand that BS is mainly for more complicated tasks. I feel that I shot sparrows with a cannon.)
I noticed that if I close the terminal, browsersync stops working.

One last question, I don’t want to launch a new topic for this, on the top right corner of my Atom an icon appeared (I try to insert an image here, not sure how I can) saying “Combo Max 83” and a big number below that, usually 0, counting when I type. I couldn’t figure out what this is, which package causes this so I couldn’t look after.
Thanks.


#12

You asked what other people used and I answered. Apparently there’s nobody else who has an opinion.

Until the file is saved, changes made within Atom can’t be observed by anything outside of Atom. I prefer that. I save to commit my changes and

So basically I spared only one click (browser refresh) as compared to a simple browser page preview.

It also gives you an actual server environment.

(I understand that BS is mainly for more complicated tasks. I feel that I shot sparrows with a cannon.)

Think of it like shooting sparrows with a fancy assault rifle with a bunch of settings. You can go over to localhost:3001 and play with the settings there, you can keep track of which files change via the terminal, you can access your local server from other computers on the network (which can be useful for making sure that your design looks good on your smartphone), you can explore its plugins, and if you move on to other things like server-side JavaScript or Sass, you have a tool that works with them already.

I noticed that if I close the terminal, browsersync stops working.

You can background it and make it detach from the terminal, but then you lose your record of file updates and you would have to end the process manually to close it. In this case, consider the terminal to be the program window. (I have opinions about the best console to use, too, since cmd.exe sucks.)

One last question, I don’t want to launch a new topic for this, on the top right corner of my Atom an icon appeared (I try to insert an image here, not sure how I can) saying “Combo Max 83” and a big number below that, usually 0, counting when I type.

You insert an image by pasting the URL. Anyway, the package is activate-power-mode, and I know this because of the fighting game-style combo system you mentioned.