How to set local web server in Visual Studio Code
Just use the Live Server Extension. Install it from VS Code directly and you will be fine. You'll then have a link in the bottom of your editor to start and run the server automatically and also view your HTML immediately.
Also check: live-server-web-extension and Live Server
saranchel n
Updated on December 22, 2020Comments
-
saranchel n over 3 years
I am new in VS code and working in typescript.Just I am trying to set local server path to open my HTML file.how to set that and when I was trying to set always I am getting error. I can not use this (NPM install) and (NPM start) command in terminal.If I use this command I am getting error. Any proxy issue? How to resolve this issue in VS code?
Folder structure:
TsDemo--folder name .vscode ->launch.json ->tasks.json out ->app.js ->app.js.map app.ts index.html tsconfig.json
i follwed this link:https://blogs.msdn.microsoft.com/cdndevs/2016/01/24/visual-studio-code-and-local-web-server/ but not working. If I use this command: D:\TsDemo>NPM install
D:\TsDemo>npm install npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/lite-server failed, reason: connect ETIMEDOUT 10.232.192.45:8080 npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\AppData\Roaming\npm-cache\_logs\2017-12-20T14_16_49_680Z-debug.log
If I use this command: D:\TsDemo>NPM start
D:\TsDemo>npm start >[email protected] start D:\TsDemo > npm run lite npm WARN invalid config loglevel="notice" > [email protected] lite D:\TsDemo >lite-server --port 10001 'lite-server' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] lite: `lite-server --port 10001` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] lite script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\411732\AppData\Roaming\npm-cache\_logs\2017-12-20T14_07_41_636Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `npm run lite` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\AppData\Roaming\npm-cache\_logs\2017-12-20T14_07_41_694Z-debug.log
-
Tom Stambaugh over 3 yearsApparently not if you're using the "Remote SSH" extension -- the default for many current developers. I want to set breakpoints in VSC, open a URL in the browser, and have execution pause IN VSC at the breakpoint. LiveServer doesn't do that, at least not without unmentioned configuration.
-
Sur over 3 yearsThis helps a lot!, Thanks!
-
Michael Jess over 3 yearsNote that as of today, it hasn't been updated in 2 years and has hundreds of issues in Github. I just removed it due to some Content Security Policy quirks, not sure if this is still good in 2021.
-
k.vincent over 3 years@MichaelJess: The Content Securtiy Policies have surely to do with your settings. The Application is still a great and helpful option for an integrated Live Server for Studio Code. https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&ssr=false#review-details
-
Michael Jess over 3 years@k.vincent It was a combination of the old live server and an equally old project template, even though I must say no idea how a plain HTML page would trigger this behavior. Anyhow, my recommendation stands in that it is best to look for well-maintained tools, and this isn't one of those. An up-to-date template with CLI dev server did it for me.
-
ZX9 over 3 years@MichaelJess Care to post an answer?
-
Michael Jess over 3 years@ZX9 You mean in addition to the comment above? I do not believe what I did is generally applicable. I am used to working with dev servers running from CLIs, and that is what is typically included in dev tools these days. In my case, the issue went away when I used Vue CLI as opposed to trying to host the Vue app via this VSCode plugin.
-
Reahreic about 3 yearsLive Server is great, but if you need HTTPS during your testing and development regime beware it's not always functional.
-
Dinith Rukshan Kumara almost 3 yearsThis is great. Reduced development time a lot. This auto refresh on file save. Can instantly see changes.