Live Preview for VS Code

[glenn-christmas]

Describe the feature request.

Hello, I was excited to see support for NodeJS added in VS Code 2.0.0 today. However, in order to build apps, extensions like Live Server or Live Preview are essential.

As the AP version of VSCode is web-based, I think this is causing problems with these extensions expecting to be able to access localhost (so e.g. I'll get errors like 127.0.0.1 refused to connect., as presumably VSCode is trying to access e.g. http://127.0.0.1:3000/index.html).

At the moment this means app development outside of the existing R/Python approaches can't really be done. (Unless there are other extensions you'd recommend that might solve this issue - I couldn't spot anything that didn't rely on either exposing the app to a public URL (nope from a security perspective) or using localhost as above.

Describe the context.

Short term use of VS Code:

• Use of VSCode for custom UI element creation (e.g. using Live Preview to efficiently develop CSS classes that can then be pasted into stylesheets used in our R Shiny apps).
• Development of JS with live preview to inspect its behaviour - limits of R mean we have to use JS in some of our Shiny apps for more bespoke UI behaviour. Being able to visualise this live via the extensions mentioned would be much faster than trying to do the same inside RStudio.

Long term use of VS Code: Exploratory work to use React frontend/Node backend to develop and deploy web apps to the cloud platform (probably more for corporate group web apps (e.g. interactive training materials) rather than anything business critical).

Value / Purpose

If this is a super time intensive task to implement, it's probably disproportionate. However, if there is a quick fix then this would be helpful.

User Types

Analysts in Systems and Monitoring Team/Analysts who develop custom CSS/JS

[simon-pope]

Request to be presented and reviewed at FR Forum on 7/10

[simon-pope]

Forum outcome: Request understood. To be prioritised and taken to refinement to size.

[jacobwoffenden]

Hi @glenn-christmas,

Live preview functionality has been shipped as part of VS Code 2.5.1 release on Control Panel (release note)

Cheers,

Jacob

[glenn-christmas]

Thanks @jacobwoffenden. Unfortunately when I try this I get a 401 error, even after logging in with GitHub credentials. I've tried this on both Chrome and Safari.

[jacobwoffenden]

I've just DM'd you on Slack, would be good to see what you're doing to get to that point.

FWIW I've tested this with Streamlist, Express and Python's simple server and they worked.

Just to double check - are you running it on port 8081 as per the guidance?

Cheers,

Jacob

[jacobwoffenden]

Sorted - @glenn-christmas was using https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server, advised to use Python's simple server

python3 -m http.server 8081