https://kotlinlang.org logo
#ktor
Title
m

martmists

09/06/2022, 8:54 AM
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.
a

August Lilleaas

09/06/2022, 9:13 AM
you could just use a plain webpack setup for this, your vue frontend doesn’t need to know about the ktor backend afaik?
so, have webpack build a file, and serve that file using a
static
route, and include the file in your HTML served from Ktor
a

Aleksei Tirman [JB]

09/06/2022, 9:29 AM
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.
m

martmists

09/06/2022, 9:57 AM
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?
a

August Lilleaas

09/06/2022, 9:57 AM
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
m

martmists

09/06/2022, 9:58 AM
How would I configure that in gradle/ktor?
a

August Lilleaas

09/06/2022, 9:58 AM
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”
for webpack, you can use a
static
route to make the file available to be loaded from a <script> tag
m

martmists

09/06/2022, 10:00 AM
I see, so I don't use singlePageApplication at all?
a

August Lilleaas

09/06/2022, 10:00 AM
I’m not sure what singlePageApplication is, I’ve not used it at least 🙂
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, 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
m

martmists

09/06/2022, 10:05 AM
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.
a

August Lilleaas

09/06/2022, 10:10 AM
so it’s not really a single page app, then?
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
a

Aleksei Tirman [JB]

09/06/2022, 10:35 AM
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.
🎯 1
a

August Lilleaas

09/06/2022, 11:06 AM
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
m

martmists

09/06/2022, 8:36 PM
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.
n

napperley

09/06/2022, 11:31 PM
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.
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
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.
m

martmists

09/07/2022, 12:02 AM
Oh so there's no way to pass the data to the vue templates directly to also support javascript-disabled users?
a

August Lilleaas

09/07/2022, 6:57 AM
as in, you want to run vue from Kotlin on the JVM for server side rendering?
m

martmists

09/14/2022, 2:51 PM
I guess that'd be what I'm looking for, yeah
n

napperley

09/15/2022, 1:26 AM
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.
m

martmists

09/15/2022, 11:59 AM
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.
n

napperley

09/15/2022, 11:52 PM
Can you elaborate on what you mean by single JVM process?
a

August Lilleaas

09/16/2022, 7:25 AM
I think it’ll be tricky to render vue on the back-end 🤔
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 🙂
323 Views