0

Is there a way to preview js/html/css projects inside a browser, just like the Atom-Live-Server. So, I am after a server-client way of doing this, I mean in realtime as the files are being edited.

Besides Atom, Brackets IDE seems to be doing this, straight from their site:

Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen.

Update: I have to admit, this is not purely a VIM question, however, I would love to know what would be considered as a good setup when using VIM for web development.

Improve this question
2
  • Some of the suggestions involve the following npm package to watch/update/server a web based project: npmjs.com/package/light-server So, I guess this is about editing in VIM and the actual preview and updating happens in the background.
    – mbilyanov
    Mar 20, 2018 at 13:02
  • I'm voting to close this question as off-topic because this is about third party tools as the comments on this answers said.
    – statox
    Mar 20, 2018 at 14:22

2 Answers 2

Reset to default
2

What you are looking for has nothing to do with Vim or any editor you are using, you want a tool like grunt.js. Grunt is a task runner that you can configure to do a lot of things automatically, including serving your source files, watching them and reloading the changes.

There are a lot of resources online showing you how to do this and this would be out of the scope of this question but basically, you will need to

  • Add grunt to your dev dependencies
  • Create a gruntfile.js in your project
  • In this gruntfile declare which files to watch and how to serve your project
  • Use grunt serve to serve your project via a local web server.

After that it should be transparent: you will be able to modify your source code as you usually do and the changes should be live reloaded in your browser. This has the huge advantage of being editor/IDE agnostic and easily replicable when you work in a team.

Note that gulp.js should be able to do the same but I personally never used it before.

Improve this answer
2
  • Yes. This is clear now, the need for a third party tool. Anything that will let me keep VIM as my main editor, is a good solution for me. What would be your opinion on npmjs.com/package/light-server? It might be simpler to use compared to grunt?
    – mbilyanov
    Mar 20, 2018 at 14:05
  • 1
    @symbolix To be honest my opinion on this would not be really relevant because I'm not the most experienced web dev you'll find :) I will close your question as off topic because this is a question you should ask directly on stackoverflow (and I think there is probably a question already existing about that). If you find a third party tool and you have trouble integrating it in your vim workflow a new question may be on topic on this site though.
    – statox
    Mar 20, 2018 at 14:20
1

Atom is the only editor I know of that has that capability built-in. You'll need to bring in third party tools. I did some research on a related topic some time back as I was looking for real-time rendering of AsciiDoc markup as I typed it in (I write my work notes in AsciiDoc). The most viable editor-agnostic solution I saw was Live Reload

This app watches specified files/directories on your file system and as you save changes to your js/css/whatever (e.g. from Vim) the file is preprocessed as needed and the browser window(s) refreshed.

Update: Alternatively, you could use an IDE like Intellij or Eclipse that has a Vim emulator. Obviously you get good real-time update capabilities with an IDE. And while emulators are an imperfect replacement for actual Vim if you're not too advanced of a user and not too picky about exact duplication of features it might work just fine for you.

Improve this answer
6
  • Thanks. Yeah, I mostly use Vim for python and C++. But wanted to learn a bit of js/css/html and php. And was not able to immediately find a way to replicate what most of the people are doing with Atom while developing for web.
    – mbilyanov
    Mar 19, 2018 at 23:17
  • 1
    @symbolix No problem. Are you going to try Live Reload or something like it? Or were you only interested if there was a native Vim solution?
    – B Layer
    Mar 20, 2018 at 6:00
  • I will try it. Seems like the only solution. Can't believe so many people using vim for front-end dev work and there is no streamlined way to preview the work done in real-time?!
    – mbilyanov
    Mar 20, 2018 at 7:40
  • 1
    See the updated answer for a totally different approach to the problem.
    – B Layer
    Mar 20, 2018 at 11:52
  • Ah! :) No, I love my VIM. But wait a second, if I have a server running locally, serving my html/js/css app, isn't this about forcing a refresh every n seconds, in the background?
    – mbilyanov
    Mar 20, 2018 at 12:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.