Is there any way to use ktor as backend and vue as...

# ktor

[martmists]

Is there any way to use ktor as backend and vue as frontend? I foiund the singlePageApplication but it didn't seem to take a route argument, and it also seemed to require compiled files rather than being able to reload quickly.

[August Lilleaas]

you could just use a plain webpack setup for this, your vue frontend doesn’t need to know about the ktor backend afaik?

[August Lilleaas]

so, have webpack build a file, and serve that file using a static route, and include the file in your HTML served from Ktor

[Aleksei Tirman [JB]]

For the development setup you can use Vue’s dev server to serve your frontend and proxy all API requests to a backend (Ktor) https://cli.vuejs.org/config/#devserver-proxy.

[martmists]

So the only way to do it is by running two servers and some form of proxy, no way to do it with just ktor? What about production, how would I run the vue server from within a jar?

[August Lilleaas]

I’m not sure about the vue dev server, but I’m assuming it works like webpack 🙂 In dev, you run a server that recompiles code on the fly and automatically reloads code in the browser etc, In production, you pre-build minified JS files instead

[martmists]

How would I configure that in gradle/ktor?

[August Lilleaas]

for the webpack dev server you still point to a file on the file system, that webpack creates. This file contains the bare bones to connect to the webpack server that does the rest. So in both dev and prod, you link to the same “file”

[August Lilleaas]

for webpack, you can use a static route to make the file available to be loaded from a <script> tag

[martmists]

I see, so I don't use singlePageApplication at all?

[August Lilleaas]

I’m not sure what singlePageApplication is, I’ve not used it at least 🙂

[August Lilleaas]

I suppose singlePageApplication also sets up a catch-all route that is served for all URLs etc, so maybe it’s a good idea to use it. And then also add a static route to serve the js

[August Lilleaas]

hmm, seems like singlePageApplication also sets up serving of static files, so maybe that’s all you need! As well as the dev/prod build of the actual JS, that’s definitely outside of the scope of ktor

[martmists]

I suppose singlePageApplication also sets up a catch-all route that is served for all URLs etc, so maybe it’s a good idea to use it. And then also add a static route to serve the js

Hmm, that's not really desired, as different pages have different permissions and contents, so I'll just look into the vue stuff instead, though it seems to only generate a single file from what I can tell rather than one for each vue file.

[August Lilleaas]

so it’s not really a single page app, then?

[August Lilleaas]

I’m assuming that you can mix singlePageApplication with other routes, though. So you can have /api/foo and /api/bar be your API, and all other non-mapped URLs go to the singlePageApplication route

[Aleksei Tirman [JB]]

If you develop a SPA then I would suggest having a separate frontend server for serving a static content and proxying requests to a backend server. Although, you can serve a static content in production with a Ktor server.

[August Lilleaas]

agreed! If I were to write an SPA today, I’d strongly consider going all in on something like next.js so you can get server-side rendering etc

[martmists]

so it’s not really a single page app, then?

The main problem is that all our backend devs want to work with kotlin/ktor and implement the frontend with pebble templates, but the frontend devs want to work with vue. I assumed a single-page-application was just a vue rendered page, is it not? I also haven't seen of a way to pass data to the vue templates for rendering, so that's something to look into as well.

[napperley]

Type safe data transfer between the backend, and frontend is one of the major advantages Kotlin has over JavaScript. Hypothetically if the OP were to use Kotlin for both the back and front ends then this advantage would be available.

[napperley]

Some Kotlin JS web frontend frameworks support integrating with some Kotlin web backend frameworks. One example of this is KVision ( https://kvision.io/ ) which has a module for integrating with Ktor Server (unfortunately it only supports JVM, and not the Native version): https://kvision.gitbook.io/kvision-guide/6.-full-stack-development-guide/server-side/ktor

[napperley]

Type safe data transfer between the front and backends can be achieved via Web Sockets, which is supported by KVision ( https://kvision.gitbook.io/kvision-guide/6.-full-stack-development-guide/websockets ) and Ktor Server for example.

[martmists]

Oh so there's no way to pass the data to the vue templates directly to also support javascript-disabled users?

[August Lilleaas]

as in, you want to run vue from Kotlin on the JVM for server side rendering?

[martmists]

I guess that'd be what I'm looking for, yeah

[napperley]

The OP is better off using a Kotlin JVM, or Kotlin Native based backend to do the server side rendering. Kotlin is far ahead of JS when it comes to server side rendering.

[martmists]

Well yeah, that's what I'm trying to do, but the frontend devs really want it to be Vue, so I don't know how to set this up as a single JVM process.

[napperley]

Can you elaborate on what you mean by single JVM process?

[August Lilleaas]

I think it’ll be tricky to render vue on the back-end 🤔

[August Lilleaas]

there are ways to execute JS from the JVM, but I don’t think your Vue devs will be feeling like they’re using Vue if that’s what they end up having to do 🙂