Running Vue on Code-Server

[abhinav1912]

I've gone through the documentation, but can't wrap my head around this. On starting a Vue server, it uses port 8080. How do I access it?

[jsjoeio]

Hmm I haven't worked with Vue in a long time, but code-server also uses the 8080 port. You should be able to change the port on Vue's side. Have you tried this?

[abhinav1912]

Yes, changed it to 3000. ip:3000 was inaccessible

[im-coder-lg]

Try using 8988. Even though I don't have a Linux or any PC with Vue, try that and use this: localhost:8988. That has to work.

[jsjoeio]

I figured it out. It's similar to how we tell folks to proxy Create React App

1. add vue.config.js
2. Change port and publicPath

module.exports = {
  devServer: {
    port: 3454,
  },
  publicPath: "/absproxy/3454",
}

3. access app at <code-server-root>/absproxy/3454 e.g. http://localhost:8080/absproxy/3454

Read more about publicPath in the Vue.js docs

Video

Screen.Recording.2021-08-06.at.10.43.25.AM.mov

[Blakeinstein]

even after reloading the Vue server and refreshing the page.

@Blakeinstein did you ever figure this out?

Well you also need to tell the client to look for hmr on a different path other than root.

module.exports = {
  devServer: {
    port: 3454,
    sockPath: 'sockjs-node'
  },
  publicPath: "/absproxy/3454",
}

should be all you need. If you are willing to give vite a shot, instead vue cli, for the vue template. You can read my setup guide here, https://github.com/Blakeinstein/codeserver-live#creating-a-template

[abhinav1912]

I'll try that out, but why does refresh not work and opening in a new tab does? It might be a caching issue, but that seems unlikely since this issue persists across browsers.

[Blakeinstein]

Well lets say you have the dev server on localhost:8080/absproxy/port

The devserver, expects the hmr socket to be on some path, usually the root, to listen to updates and tell the page to reload. Now since we have a proxied route. The socket isnt there at the expected path, which for our case the dev server usually thinks is localhost:8080 (we have code-server running on this, and internally the dev server socket is on localhost:port)

So we tell the dev server, to look for the socket on a specific route instead. Atleast that was my solution with vite, vue-cli uses webpack internally and I am pretty sure you should be able to replicate the setting here, as suggested by the docs https://coder.com/docs/code-server/v3.10.2/guide#proxying-to-create-a-react-app

basically along with the url you also set the path for the hmr socket.

[jsjoeio]

I knew you'd have the answer! Thanks for the help @Blakeinstein 🙌 (I'll also add the HMR part to the guide when I get this in the docs).

[bpmct]

Here's how I got Vue 3 working with an external domain FYI (e.g code-server --link):

// vue.config.js
module.exports = {
    publicPath: (process.env.NODE_ENV=="development" ? "/absproxy/8080" : "/"),
    // options...
    devServer: {
        disableHostCheck: true,
        public: "https://bens_macbook-bpmct.cdr.co/absproxy/8080",
        sockPath: '/absproxy/8080/sockjs-node',
    }
}