Building OctoPrint in JavaScript?

Hi people,
I am trying to include some desirable features of OctoPrint into a similar Progressive Web App(PWA) as my Uni project. The issue is that, OctoPrint's backed is written in Python, and though I can use it's REST APIs, but it will only send the requests to an OctoPrint instance being served on my system locally.
So just to reiterate, I want to add these functionalities into my own PWA but I don't want to use any APIs for the same, and I am making this project in NextJs.
Is there a way to do the above mentioned tasks?

Your best bet is with REST API to login and generate a session, then use the websocket connection with push updates to program your side. There's a POC of the websocket stuff in the below UIPlugin mixin implementation using react.

If you want to re-create the whole communication of device to printer for sending info to it in nextjs then I hope you have several years to complete your uni project as that would be a massive undertaking.

It does sound to me like you are effectively wanting to rewrite OctoPrint in JavaScript and entirely in the frontend?

If that is the case... good luck & I hope you have plenty of energy.

While it would technically be possible to communicate with a serial port from a PWA in Chrome (not all browsers & devices support it), it is not the most user friendly experience, including requiring the user keeping the page open if I remember right, which is not what you want for a 3D print. Could be incorrect on that part, I'm not sure. I can't imagine it would perform all that well.

He will also have much fun recreating the communication layer for talking to the printers XD


Hey @jneilliii Thank you so much for the resource, I'll have a look through it and let you know if it is of any help or not:))

Let's say I am testing my frontend application by connecting with the Virtual Printer plugin, and I am able to send the commands through their given REST APIs.
I can see the commands are being received by the printer, but I am unable to get a response back from the virtual printer on my application. How could I possibly do that? Let's say I am sending M105 command for getting the current temperature, the response is being shown on OctoPrint's CLI. But, how do I get the response back to us in our PWA and then handle it there?
The code references would would also be a big help. Thank You:)

that's what the websocket will give you.