Self hosting guide

[sarthakpranesh]

This looks really useful as a wire-framing tool. I was hoping to self host this on my home lab for easier access. Couldn't find any guide or pre build docker images. It would be a great idea to self host a service like this and I can help create a self host guide.

[SebastianStehle]

There are 2 components:

1. The UI, which is just a set of files.
2. The backend, which stores everything in google cloud store at the moment: https://github.com/mydraft-cc/server2/blob/main/index.ts

Before we think about self hosting, we would have to adjust the server to support a local file store. Then we can build a docker image based on the UI and server.

At the moment it is not that easy, yet. The server URL is also hardcoded: https://github.com/mydraft-cc/ui/blob/71368b45e092d78a16828b4acfdc4b7f24abb367/.env. We could just inject a flag to use the current URL for the container case.

[sarthakpranesh]

I was thinking about the container architecture, mostly had two options. Either we can use docker compose and spin up two containers on the same network or we can use a single container and lunch two processes one running the server and another running the react app. Not sure which would be the best in this case. Any thoughts @SebastianStehle ?

[SebastianStehle]

You could also add a static file handler to the normal backend process and just serve the files from the same process.

[sarthakpranesh]

I guess both static file handler and deploying both ui and server on same container seem more like an approach mono repos would take. Going ahead with docker compose for now, let me know if you thing otherwise.

[SebastianStehle]

Where do you see the advantage? The UI also does not build a container yet, so you have to do the extra step anyway.

[sarthakpranesh]

Hmm, seems a little redundant working on containerizing the UI separately. I guess then the simplest thing would be to pull the UI repo in build step of server2 and serve it using express.static middle ware. Let me try that.

[sarthakpranesh]

Used two processes in docker for running both ui and server separately. Using express.static was clashing with GET /:token routes when visiting domain/sometoken on react app.

[SebastianStehle]

I am fine if you change the route

[sarthakpranesh]

I have changed the route and everything looks good. I am just running into something weird with the env variables. I build the vite app after updating the .env file to point to local server and when serving the ./dist folder with express static I am also setting the VITE_SERVER_URL in the server's .env. Yet the site that is served by the static route hits the api.mydraft.cc instead of the local one. Any idea about this?

[SebastianStehle]

VITE_SERVER_URL is not relevant at runtime. You have to set it to a relative path like "/api" and then build.

[sarthakpranesh]

Done, the pr is using express static now. I have started using it on local, seems to be working great.