ritwickdey / vscode-live-server-plus-plus

VsCode Live Server++ : It's Truly Live 😊 (BETA) -- [NOT RELEASED YET]

Vscode Live Server++ (BETA)

It's Truly Live

---

---

Features

• No Need to save HTML, CSS, JS 😄
• No Browser full reload (for HTML & CSS)
• Customizable Server Root
• Customizable Server Port
• Customizable reloading time
• Customizable index file (e.g index.html)
• Auto Browser open (Mozila, Chrome & Edge)
• Control from statusbar

---

Downside

• Live Server++ will work well if your project only contents css & html and minimal JavaScript. If you do lot of DOM Manupulation with JavaScript, Live Server++ is not recommended.

---

How to Start/Stop Server ?

1. Open a project and click to Go Live++ from the status bar to turn the server on/off.

2. Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server++: Open Server to start a server or type Live Server++: Close Server to stop a server.

---

Settings

Click here to read settings Docs.

What's new ?

• v0.0.1 (##DATE##)

  • Initial release
  • hot Reload supported
  • No need to save
  • 5 settings are added (Port, Root, indexFile, timeout, browser)

---

Changelog

To check full changelog click here.

---

Why Live Server++ when there is a Live Server ?

Actually, I was receiving a lot of emails, PR, comments (and also there was few issue request, e.g. #12080) - why auto reload only happens when we save the file? - why it's not realtime?... blah blah....

Well, in Live Server Extension, I'm using a popular npm module (named live-server) and it's the core library of Live Server. (yaa! too many "Live Server" 😜). In the way it's working - it never possible auto reload without saving the file.

And yaa, to be honest, when I made (in mid of 2017) the live server extension, I didn't know Node.js or JavaScript well (Hold on! I still don't know Node.js but I'm now confident). I even didn't know promise/callback well. I understood the callback (& callback hell too) while making the extension. And Promise? Only I knew how to use it like .then().then().then() and IIFE? or closure? - I didn't even hear about those names at that time. 😬

Okay, now coming to the point, Code of the Live Server can't be migrated with Live Server++. Live Server++ is not depended on live-server(the npm module) - I've written the server side code from scratch & it has minimal dependency (still under development).

---

LICENSE

This extension is licensed under the MIT License

vscode-live-server-plus-plus's Issues

Error previewing in browser

<style>
    p:first-child {
        color: aqua;
    }
</style>

<p>text01</p>
<p>This is a passage of text</p>
<p>This is a passage of text</p>
<div>
    <p>text02</p>
    <marquee>
        <p>text03</p>
        <p>This is a passage of text</p>
    </marquee>
    <p>This is a passage of text</p>
    <p>This is a passage of text</p>
    <p>This is a passage of text</p>
</div>
<p>dasd</p>

Run the above code “text01” style is not displayed

AndroidMode.txt

Local ip address is from Hyper-V switch when useLocalIp is true

I have a win-10 setup with Hyper-V installed and a NATting switch.
When live-server is set to use the local ip. It binds to the ip of the natting switch.

I expect it to use the ip-address of the hardware nic.

If the file path contains the character ".", automatic refresh will not work.

I don't speak English, and the following content is translated using AI translation.
If the file path contains the character ".", automatic refresh will not work.

HTTPS only works on local machine

Live Server works just fine over HTTP on my local machine. I can access the port from other devices on my local network as well using my local IP:Port.

Following the provided directions on setting up HTTPS, i am ONLY able to access the secure server on a browser on the same machine as my vscode. I am no longer able to access my IP:Port from any other device on my local network.

The reason I need the SSL at all is because my Oculus browser requires it for accessing local servers. Otherwise, HTTP would suffice on my other devices.

Automatically dispose when the browser tab is closed

It would be great if you add a feature that its automatically dispose when the live browser tab is closed. currently we need to manually dispose after closing the browser tab. It would be great if this feature is added soon. Hope you consider it , Thank you

Live server ++ not working

Hi,

I have installed live server ++ extension. I am using command palette to start the serve live server++:Open server command because like the previous live server Go live is not showing.

but I have been getting the following error:

command 'extension.live-server++.open' not found

Something is went wrong! Please check into Developer Console or report on GitHub.

Error: Something is went wrong! Please check into Developer Console or report on GitHub.

Hey i got this error after connecting vs code to github. live server is not working can anyone guide me how to fix this

Live server stopped auto updating on file save out of nowhere

My live server was working fine until a few days back but now suddenly it has stopped auto updating on file save. I have to manually refresh to see file changes.

Things I've already tried that didn't work for me:

1. set chrome as default browser in local system and for live server
2. ensure UTF-8
3. ensured no '.' or '#' in my file name

Please help this is really frustrating

This is (propably) no longer maintained.

You will probably love using Five Server.
To install, open up VS Code (or Codium), hit CTRL+SHIFT+P and run https://marketplace.visualstudio.com/items?itemName=yandeu.five-server

I think that this is not maintained because the last commit was on 2019, and no response to issues or PRs.

---

Disclaimer: I did not receive any compensation for creating this issue. I just thought Some of y'all might need this.

How do i install this?

I cant think of any way to get this running in vscode

Uncaught TypeError

This is a vue demo (created by npm init vue@latest)
In VS Code when I click Go live.
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

This extension has been disabled because it does not support virtual workspaces.

This extension has been disabled because it does not support virtual workspaces.

[SRI Issue] - Missing integrity of inline injected script.

Hello everyone,

I'm working on a personal project and came across the SRI (Subresource Integrity) check subject.

After several minutes of configuring and testing my project, I discovered the issue shown in the image below:

As you can see, the script injected by Live Server does not have an integrity key configured.

If the developer chooses not to use SRI or CSP (Content Security Policy), Live Server will continue to work normally. However, when we configure CPS and SRI, this script injected by the tool will not be executed due to being considered as 'unsafe-inline,' which CPS identifies as a Cross-Site Scripting (XSS) weak point.

A possible solution could be to change the existing "<script>...</script>" tag to "<script integrity=''sha256-vvt4KWwuNr51XfE5m+hzeNEGhiOfZzG97ccfqGsPwvE=' crossorigin="self">...</script>" this might fix the issue. However, be aware that making changes to the script may have implications for this integrity key in the future (each code update the hash need to be calculated and updated too).

Alternatively, a setting option could be created to automatically concatenate the integrity key to the script tag. As developer, we could calculate these keys ourselves and insert them into the script tag by a setting "text box" field. That's more easy and takes less effort of maintenence, once that this setting only get usual on this CPS configuring scenario.

Thank you for the attention,

Best regards,

A. Leal.

How is this different from livePreview

How is this different from livePreview

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

domain to localhost

HI, Live Server is great and works like charm.
Do you know a fix (for example in windows hosts file), which would work as a DNS A record - 127.0.0.1:5500 to domain-name.com
Then when loading domain-name.com in browser to get what is served from Liver Server, not from the hosting of the real website.
Such possibility would be a huge time and live saver!!!

live server is opening a previously opened file from yesterday only

Hi I'm trying to use live server but it is only opening a file I had yesterday,
I'm on my index page and yet it refuses to open it and only opens that ne particular one from yesterday

Live service

When Live Server++ will be fully released ?

Live Server++ is looking so exciting. I am already a fan of Live Server, and I think Live Server++ will help in my HTML, CSS mini-projects. I am eagerly waiting for its release. So, I want to know when Live Server++ will be fully released?

gh repo clone ritwickdey/vscode-live-server-plus-plus

I'm having an issue with datatables library, page keeps reload over and over

Hello , First, thanks for this great software, I'm really love it , can't work without it

recentrly, I was working on a project that's use datatables javascript library.
I noticed that page keeps reload over and over if I just included datatables cdn
I hope you check that
Thanks a gain

O servidor Live não está abrindo no navegador.

VS Code - O servidor Live não está abrindo no navegador. Tentei reinstalar o Live Server, definindo um navegador padrão, mas ainda assim. . Recebo esta mensagem pop "incapaz de inicializar o Git". E precisa que eu baixe "O comando Git requer a ferramenta de desenvolvedor de linha de comando", que não tenho espaço suficiente para baixar, e o servidor Live estava funcionando bem antes.

Use it with CMS

Hi,
What is the entrypoint file on a CMS? In my particularly Situation I use Kirby.

Cheers

This page isn’t working!!>>

Once I had completed my HTML I clicked on Go Live but my Chrome it's showing this page isn't working
please help me out

Asiidoc/asciidoctor Live Server plugin support?

Hello, I'd like to know if you plain on adding (Asiidoc/asciidoctor) support. If not then please let me know if you would be open to Me making to software. So you might add It into the mainline branch?
here are the links!

Asciidoctor
1.) https://docs.asciidoctor.org
Asciidoc
2.) https://asciidoc-py.github.io/userguide.html

Thank you for reading this!
From: TheMaestro0

Vidéo

Live server won't open in browser

I get a message that the live server is running on 5500 when I 'Open with live server', but the file doen't open in the browser unless I open the browser and request http://localhost:5500/<filename>. This is only broken on the M1 Mac I just aquired. On an older Mac is seems to be working. I'm using default settings.

How can i install it

Hello i already saw the another person asking for it and nathanchu gave a answer for it but i didn't really understand it can anybody please help how i can install it?

Feature Request: Addition of the Installation Document

Many users are asking regarding how to install the LiveServer++ in their system. Some users are experienced so they can easily install the extension while some are new comers. So kindly grant me this opportunity to update the ReadMe with the Installation Guideline with the images illustrating all the steps along with the theory.

@ritwickdey @surya76657

help

Good day,

I would like to have live-server++ running correctly.
Please take a look at https://zombiefox.github.io/hexagonTab/
Once I run development side in vscode, i don't have 1:1 live refresh.
I installed liveserver++, I have GO Live++ in task bar.
Where/what modification I need to do (in hexagonTab) or (in Settings Liveserver) or on both

best regards

FEATURE REQUEST: specify root directory

Hello,

I wanted to specify a root directory for the server to listen (Maybe even a directory shortcut for opening a server in that directory). Because i have an extra build directory where i build my files and need the directory be at /. Can you already do that? If no that would be a useful feature to implement.

Thanks for reading

HTML files

thank you

Installation guide missing

The Readme does not contain instructions for installing live server ++.
How do I install this extension?

Virtual Studio Code provides manual installation instructions for extensions here.

You can manually install a VS Code extension packaged in a .vsix file.

Or running this code from the command line:
code --install-extension (<extension-id> | <extension-vsix-path>)

I was not able to do this as I was not able to find the extension-id?

Live Server no longer opening in browser

VS Code - Live server is not opening in browser. I tried reinstalling Live Server, setting a default browser but still. . I get this pop message "unable to initialize Git" . And needs me to download "Git command requires the command line developer tool" which i don't have enough space to download, and Live server was working fine before.

Please help😢

Live Server not working !

In VS Code when I click Go live it does not happen. Website not previewing.

Remote Development

Hi,
Can I use liveserver++ als if I work remote on a server and not local?

Overrides cmd+L keyboard shortcut in VScode for macOS

MacOS 12.4
VScode 1.69.2

Enabling live server causes the command+L shortcut to not work in VScode. This is the select-line shortcut.

Disabling live server extension causes the functionality to resume as expected.

js file cannot be loaded

my liver server not working

Something is went wrong! Please check into Developer Console or report on GitHub.

What launch.json configuration is needed to open in Live Server?

I would like to be able to open VSCode and press F5 to launch the currently viewed .html file into the live server without having to know it's Alt-L Alt-O key combination.

I tried the Run / Add Configuration however what got added into launch.json is not "run in live server"
Any insights on how to achieve press F5 to run would be much appreciated. Thank you.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Open index.html",
            "file": "s:\\_W\\ARP\\UPS.Help\\SRC\\UPS.Help\\Info\\index.html"
        }
    ]
}

i will go and open live server so, 1 error generate it say open folder->file and workshop. so, please you give me why I will solve of this problem.

Live reload doesn't work if folder name has a suffix like ".js", ".ts"

I've noticed that if I make a folder with a name ended in ".js" or ".ts", just open the folder in vscode and click "GO LIVE", then, live reload doesn't work (it starts server and browser, but change files doesn't auto-reload browser). If a rename that folder, just removing the dot (like "myprojectjs" instead myproject.js") and try again, then live reload works, in the same folder.

vscode 1.74.2 (apt/deb version)
OS: Ubuntu 22.04

Link open dns

Stopped seeing js files

Greetings, I stopped seeing any folders and js files, any ideas how to fix this?

Vs

5156830311296934