Q&A (pre v1.0.0)

[yandeu]

Want to ask questions? Here is the right place.

[zalo]

Thank you for putting this together; I was just mucking around with updating the send dependency in the old LiveServer to fix WASM Streaming Compilation. It's amazing how there are no other live-server packages that have been updated in the last couple years.

My only complaint is that the stylization of Five-Server is connected. https://npmjs.com/five-server is kind of jarring relative to the subdued colors of the standard logs and warnings. In my mind, neon colors are reserved for when something is broken and needs my attention, and so I consistently think something is broken 🙃

Other than that, I consider this to be a really handy addition to my workflow; thank you!

EDIT: I don't suppose there's any way to get HTTPS, is there? This package does it with a bogus cert and key, which the browser merely asks if you want to "Unsafely Proceed" through. This helps for HTTPS-gated features like WebXR.

EDIT2: Not get greedy, but perhaps also an optional config argument for specifying whether the automatically opened page uses the 127.0.0.1, or the machine's IP on the local network. The latter makes it quick and easy to paste the URL to a mobile device for cross-browser testing.

[yandeu]

Thank you for putting this together;

You're welcome :)

stylization of Five-Server is connected. https://npmjs.com/five-server is kind of jarring

I have changed it in https://github.com/yandeu/five-server/commit/a812af8f836cbc4cf8e5d38dd65d74d6acfbe962.

I don't suppose there's any way to get HTTPS

There is. And I have just improved it in https://github.com/yandeu/five-server/commit/5b08a7ba8ffe729c4be8742b6274b95dbe5bd065. You can now set the option https to true and Five Server will automatically generate a cert for 30 days. But since it is self-signed, the browser warns you the first time you use the cert.

config argument for specifying whether the automatically opened page uses the 127.0.0.1, or the machine's IP on the local network

This is already included. I have now set the default host to localhost. If you need 127.0.0.1, set the option host to 0.0.0.0.

---

A detailed documentation will follow soon.

[yandeu]

@zalo I have published the latest version with all your feature requests.

In the next version, I will add a logging system to be able to view your phones console.log in the terminal.

There will also be a Chrome Extension for connecting SSR content with Five Server.

[zalo]

@zalo I have published the latest version with all your feature requests.

Awesome! Thank you very much for this! These are all handy quality of life improvements that I'm sure will benefit more than just me :-)

In the next version, I will add a logging system to be able to view your phones console.log in the terminal.

This is huge! I'd recently taken to appending worker and page errors as divs to view them on mobile, but doing it through the Live Server's websockets connection would be a dramatic improvement on that workflow!

There will also be a Chrome Extension for connecting SSR content with Five Server.

I don't personally do a ton of server-side stuff, but I'm sure it will be useful. A way to call commands on each file save (like node run build) would be perfect for my more static-site workflow with esbuild.

Thanks again!

[zalo]

Quick Request: If the page isn't being viewed on mobile, could you avoid intercepting the console.log's? (It doesn't seem like the .apply() method is as transparent (in terms of preserving log stacktraces) as I'd hoped...)

[yandeu]

could you avoid intercepting the console.log's

Yes, set remoteLogs to false in your config file.

(It doesn't seem like the .apply() method is as transparent (in terms of preserving log stacktraces) as I'd hoped...)

Could you elaborate what you mean?

[zalo]

Yes, set remoteLogs to false in your config file.

Ah; great, this disables main thread logs getting intercepted. Unfortunately, WebWorker logs are still be getting intercepted...

Could you elaborate what you mean?

Just that intercepted messages appear in the Chrome console as having come from fiveServer.js rather than the original file they were called from:

(Also, setting https to true appears to hang FiveServer on "Going Live...` indefinitely; is there a dependency that is needed to generate the fake certs?)

[yandeu]

@zalo both issues should be fixed in the next release.

btw, thanks for being a sponsor 😃

[iamk3v]

Hey, so i have a tiny issue...

Its not opening in browser

What I've done: Installed the extension and tried to right click and open Five Server.

It starts the port, but doesn't actually open the HTML file in my browser..?

[yandeu]

Hi @iamk3v ,

Thanks for reporting.

• Have you restarted VSCode?
• Have you uninstalled the old Live Server?
• Do you use a five-server config file?
• (if you have Node.js) Does it work if you do npm i -g five-server@latest and five-server .?
• What OS and browser do you use?
• If you open your browser manually, do you see your .html file?

[iamk3v]

Hi @iamk3v ,

Thanks for reporting.

• Have you restarted VSCode?
• Have you uninstalled the old Live Server?
• Do you use a five-server config file?
• (if you have Node.js) Does it work if you do npm i -g five-server@latest and five-server .?
• What OS and browser do you use?
• If you open your browser manually, do you see your .html file?

Ive tried restarting VSC and removing Live Server (keeping only Five Server) Without any success.

As i mentioned, I've only installed the extension (no node.js installation or anything), and i do not use a Five Server config file.

OS and Browser: Mac os Big Sur Chrome (newest release)

When i click on the go live on the bottom right in my vsc it opens the root folder that i have opened (where i can navigate to my HTML file). From there it looks to be working fine, but i would love for it to actually open directly without me having to navigate.. As of now its doing nothing except start the port when i right click and select Open Five Server

[yandeu]

click on the go live on the bottom right in my vsc it opens the root folder

Good to hear. At least this is working 👍

---

I think some paths are mixing up. I have added a debug mode in v20. Please add the config file below to your workspace, start Five Server, and have a look at the logs in the Terminal called "Five Server".

// fiveserver.config.js
module.exports = {
  debugVSCode: true,
};

[yandeu]

Also try:

// fiveserver.config.js
module.exports = {
 debugVSCode: true,
 browser: ["google chrome", "google-chrome", "google-chrome-stable", "chrome"],
};

[iamk3v]

click on the go live on the bottom right in my vsc it opens the root folder

Good to hear. At least this is working 👍

I think some paths are mixing up. I have added a debug mode in v20. Please add the config file below to your workspace, start Five Server, and have a look at the logs in the Terminal called "Five Server".

// fiveserver.config.js
module.exports = {
  debugVSCode: true,
};

i added the file "fiveserver.config.js" in my root folder (as you can see on the screenshot), but nothing is popping up in terminal when i switch to the five server terminal?

The file I'm trying to run is the one highlighted in red:

Do you have Discord or anything where i could contact you?

I'm genuinely confused why nothing is working

EDIT: tried with browser config also, still nothing in five server terminal nor any chrome site opening..

[yandeu]

• You have to open the Terminal yourself and choose "Five Server" in the dropdown menu.
• Already tried browser: ["google chrome", "google-chrome", "google-chrome-stable", "chrome"],?
• You can join the discussions.

[iamk3v]

• You have to open the Terminal yourself and choose "Five Server" in the dropdown menu.
• Already tried browser: ["google chrome", "google-chrome", "google-chrome-stable", "chrome"],?
• You can join the discussions.

Moved over to discussions :)

[zalo]

A somewhat recent change appears to have made the idle CPU and Memory Usage skyrocket.

Server Off:

Server On:

This appears to be unrelated to the websocket (as it occurs whether or not the website is open). This is with the default config (that is, no config specified).

[yandeu]

Thanks for reporting!

Can you try to use Watch & Ignore?

[zalo]

Can you try to use Watch & Ignore?

Adding a file with module.exports = { watch: "examples" } appears to be enough to get the performance issue to disappear.

However, I also notice that the original live server doesn't exhibit this behavior (even without a config) on the same project.

[yandeu]

idle CPU and Memory Usage skyrocket

Fixed

[yandeu]

I just released v0.0.25 (vscode) and I'm pretty happy with it.

The next goal is to improve the Instant Update and Highlight feature :)

[typhonrt]

Thanks for taking this up.

One code issue... I'm all in on ES Modules and you have to specify .default when importing. So figuring out the right tsconfig.json to remove this situation would be great.

import LiveServer from 'five-server';
const liveServer = new LiveServer.default();

A general branding suggestion; take or leave it. It seems to make sense to publish five-server under an NPM organization perhaps even yandeu so the published result is @yandeu/live-server.

[yandeu]

ES Modules and you have to specify .default

I see. Yes, I will try to figure out the right settings. I admit I have never used Node.js ES Modules before. I almost always write in TypeScript.

NPM organization perhaps even yandeu

You're right! Maybe I should. But not @yandeu. I used this namespace for personal public packages and config files. But why not @fiveserver? Then we would have like:

@fiveserver/core
@fiveserver/hot-reload
@fiveserver/html-validtor
@fiveserver/etc.

But I guess I wait until the project gets bigger. For now, I don't need to split the code into multiple packages.

Also, I hmm, I actually don't really see the benefit of splitting Node.js modules since bundle size does not really matter. If I don't use a namespace and keep it under five-server, everyone can add a plugin appending -PLUGIN_NAME, like:

five-server # includes everything (core, hot-reload, html-validator)
five-server-my-plugin # some plugin, someone publishes

---

Really, I'm not sure what I would prefer :thinking: But what I'm almost certain about, is to move all Five Server related repositories to https://github.com/fiveserver

---

btw, thanks for being a sponsor 😃

[yandeu]

Check out the new "Hot Body Injection" feature 😍 https://youtu.be/3-zKYNrxKOk

[typhonrt]

Right on. re: hot body injection. At some point a WebStorm plugin would be awesome too.

My comment on the naming of five-server as a live-server replacement has more to do with distinguishing your continuation effort as not something that is potentially typo-squatting. @{org-name}/live-server is a bit clearer that it is a live-server drop in replacement. Having to do Five Server (Live Server) in descriptions all over the place from the VSCode plugin to any documentation seems a bit redundant. Again just a general comment / suggestion to think about before five-server is absolutely locked in per se.

I do see a point in having a unique name in regards to 3rd party plugins though.

[knosuhor]

Thank you so much for this extension, I've been looking for preview with highlights since announced end of support for brackets. As for questions, would you consider webview support in vs code alongside browsers?

[yandeu]

Thank you so much for this extension

You're welcome 😊

webview support

Should already work if you use an extension like Browser Preview.
Can you test it? Is there a need for a better WebView integration?

[yandeu]

Does someone need instant updates for PHP files? Take a look at https://youtu.be/4s7q5chX-e0 😍

[zalo]

That PHP Preview feature is really cool! I'm sure PHP developers will get some good use out of it.

On a side note, I've recently learned that VS Code has the ability to automatically hook into the Chrome Debugger by setting: "debug.javascript.debugByLinkOptions": "always" (in the VSCode settings JSON) and by Ctrl-Clicking the link FiveServer prints in the console.

This seems like too cool of a feature to leave locked behind obscurity: would it make sense to have FiveServer automatically open the website in Debugger mode when Go Live is clicked?

These lines within the default VS Code debugging extension might be useful... https://github.com/microsoft/vscode-js-debug/blob/main/src/ui/companionBrowserLaunch.ts#L51 https://github.com/microsoft/vscode-js-debug/blob/main/src/ui/debugLinkUI.ts#L86

[yandeu]

I don't know much about the VS Code debugging features. Is it necessary to build something into Five Server? How would users benefit from it?

automatically open the website in Debugger mode when Go Live is clicked?

I think it would just confuse most users.

[yandeu]

I'm all in on ES Modules and you have to specify .default when importing. So figuring out the right tsconfig.json to remove this situation would be great.

import LiveServer from 'five-server';
const liveServer = new LiveServer.default();

@typhonrt I just can't figure out the right settings.

Does anyone know?

[typhonrt]

@yandeu I couldn't come up with any good solutions from the TS side of things. I did however work out a Node / package.json based solution which you can see in https://github.com/yandeu/five-server/pull/10

Basically provide a separate ESM wrapper around ./lib/index.js. It worked in my trial run of the modification.

[NerdyDeedsLLC]

@yandeu So, are you going to be forking and maintaining LiveSass, too? Or at least incorporating Sass/SCSS compile capabilities into FiveServer? I ask this mainly because I cannot work out a way to jury-rig things such that LiveSass will still compile the changes to my SCSS files (let alone do so while live monitoring the folder) without LiveServer - which it lists as an active dependency in VSC, to boot - also actively enabled in the workspace (which results in an entirely different set of challenges while FiveServer is ALSO enabled, as you well know).

I'm a FED, as, I suspect, a great many of the people using this sort of instant, just-add-WWWater webserver extension are. Lack of the ability to compile and serve style code (and again, this is shelving entirely the file/folder monitoring/direct injection capabilities) is a deal-breaker, for me at least. I may as well just run the code with a file:// protocol. Are there any plans? I love what you've done with it so far, and I'm thoroughly eager to migrate... but, as things stand (or unless I'm missing something flagrantly-obvious), I'm stuck with the status quo.

[yandeu]

which it lists as an active dependency in VSC

I did not know that. There is already another fork. Have you tried it?

Are there any plans?

I don't understand what you mean in the second paragraph :/

[norixx]

I just switched from live-server. to five server in my VSCode. I tried proxy setting to work with my local WordPress(on MAMP/MacOSX) but all the attachments(like CSS, images, etc.) and other pages are displayed as front page HTML in my browser. Does this extension not intended to work with CMS, In the first place?

Here's my setting.

 module.exports = {
  port: 8086,
  proxy: { '/': 'http://myvirtualhost.io'},
  root: '/',
  ignore: [
    '/dev/**',
    '/wpdirectory/wp-admin/**',
    '/wpdirectory/wp-includes/**',
    '/wpdirectory/wp-content/plugins/**',
  ]
}

[yandeu]

@norixx Thanks for reporting

Please ~open a new issue and~ try to connect manually to the five server in the meantime:

 <script async data-id="five-server" src="http://localhost:5500/fiveserver.js"></script>

To make this work, you also have to enable cors for the five server:

module.exports = {
  cors: true
}

---

Update

I have detected 3 issues:

The proxy-middleware:

• could not handle redirects.
• was case sensitive for the content-type header (content-type and Content-Type).
• was not able to inject scripts into a compressed HTML file (gzip or deflate).

This should all work in the next version.

[mzaini30]

In docs, caching with prepend /.cache:

<img src="/.cache/https://external.image/cat.jpg">

What about caching assets with cache attribute like this:

<img src="https://external.image/cat.jpg" cache>

[mzaini30]

Check out the new "Hot Body Injection" feature 😍 https://youtu.be/3-zKYNrxKOk

I use Sublime. But, I want this feature 🥺

[yandeu]

I can't run WordPress files as php WHY ? / what things are needed to run WordPress (with FiveServer)

See: https://youtu.be/bF4BbbeTWb8

[daslicht]

where is that file when using fiveserver in vscode? please

fiveserver.config.js

[yandeu]

where is that file when using fiveserver in vscode? please

Root of your workspace.

[daslicht]

Thank you , I just saw that there is a dedicated input field in teh vscode settings :)

[LeonardoCastDev]

Hi, I found a bug: "CSS updated" status doesn't go away after updating CSS

The status won't go away and creates a large stripe spanning from the top to the center of the page.

I'm using version 0.0.32 of five server and version 1.59 of visual studio code

[abhitrueprogrammer]

Using Fiveserver in VSCode. OS: Linux (KDE neon(ubuntu)) I want to change the browser used in fiveserver from firefox(default) to chrome. I installed chrome. Then set "fiveServer.browser": ["chrome"] in settings.json. Instead of the expected behavior, no browser launched. I even tried putting path of the executable(/opt/google/chrome) in there with no avail Did I do something wrong? Please document this better(or make selecting default browser a dropdown).

[yandeu]

Try https://github.com/yandeu/five-server/issues/23#issuecomment-901260814

[yandeu]

In docs, caching with prepend /.cache:

<img src="/.cache/https://external.image/cat.jpg">

What about caching assets with cache attribute like this:

<img src="https://external.image/cat.jpg" cache>

Hi @mzaini30. I have just added this feature. See https://github.com/yandeu/five-server/commit/250dd0072cc60c222566a41bb17e1c98a1e517cb :)

[yandeu]

Everything works pretty well. I will close this issue and soon release v0.1.0 :)