Connecting frontend and backend of self-hosted app development reddit / selfhosted ---------------------------------------------------------------------- isleepbad · 2023-10-05 18:53 Hi guys. I'm trying to develop a new self hosted app and I need your help. I know a lot of self hosted developers lurk here so hopefully at least one of you can help. To give you an idea of what I'm developing, none of the docker update notification apps currently available have all of the features I'd like to see ​ https://preview.redd.it/ivrpm36aefsb1.png?width=532&format=png&auto=we bp&s=2639ac125f6d69a1d3fc98ca1d12397b7bf55ce3 ​ Long story short I have the normal setup of the image above which is a development container which I access via brave and a reverse proxy within docker. The backend functionality is all there, now I need to develop the frontend. I'm new to frontend development, however. The issue is I cannot connect to the backend (ERR\_CONNECTION\_REFUSED). I've done some googling and turned off all ad blockers for the page. https://preview.redd.it/jiu04zo0ifsb1.png?width=721&format=png&auto=we bp&s=60c9e6f7a797bae11828255b902d2d099777f1ed I also found out a bit about CORS and mixed content origins which basically means I'm using https and http which can be dangerous for obvious safety reasons. So I added the following to my python code but no dice. origins = ["http://localhost:3000", "http://127.0.0.1:3000", "http://localhost:6171"] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) But how do I fix it? Do I have to somehow force my container to use https internally and externally? How do others solve it? Thanks for your help in advance. ​ ---------------------------------------------------------------------- thekrautboy · 2023-10-05 18:59 Uhm dont use localhost? Localhost points to the container itself, so youre going from frontend to frontend. Make sure both containers are in the same Docker network, assign them useful container names and then connect from frontend to backend (or whatever else) by just using the container names as hostnames, like `http://backend:3000` ---------------------------------------------------------------------- Dramatic_Ad5442 · 2023-10-05 19:03 \^ This. Here's an example from my own self hosted app. ​ Nginx config: [https://github.com/Receipt-Wrangler/receipt-wrangler- proxy/blob/main/default.conf](https://github.com/Receipt- Wrangler/receipt-wrangler-proxy/blob/main/default.conf) ​ Compose example: https://github.com/Receipt- Wrangler/.github/blob/main/examples/mariadb/docker-compose.yaml ---------------------------------------------------------------------- isleepbad · 2023-10-05 19:05 Look at the first image again. I installed the service on the same container because I don't want to have a million containers floating around. Basically I installed python fastapi and npm in the same machine and can access the services locally in the container. ---------------------------------------------------------------------- thekrautboy · 2023-10-05 19:07 You are trying to run fronted and backend in the same container/image? ... good night. ---------------------------------------------------------------------- isleepbad · 2023-10-05 19:14 > What are those missing features? 1. I want notifications for DOCKER, GHCR and GIT apps. 2. When a new update for a self-built container I want it automatically rebuilt. I.e. When I use a base image or a container built with a got project it should check for those updates and be rebuilt and pushed to my registry. 3. I want to be able to update the container at a later time, not automatically when a new update comes out. 4. When a new update is read I just want to click a giant button and have the container update. 5. Version history should be automatically handled. 6. User should see the software version when available and not just the sha256. ---------------------------------------------------------------------- isleepbad · 2023-10-05 19:17 Obviously I'm not a fullstack dev or else I wouldn't be here. Why is it such a bad idea? ---------------------------------------------------------------------- isleepbad · 2023-10-05 19:43 So when your frontend wants to communicate with your backend you communicate via https? So https://backend.domain/? ---------------------------------------------------------------------- Dramatic_Ad5442 · 2023-10-05 19:51 I'm not too familiar with how traeffik works, unfortunately, but I have a few other comments that may be helpful. It is usually easier to run the frontend (assuming it is something like a SPA and not served from the API), and backend in separate containers. It gives higher deployment flexibility, and it is easier to manage each container and their dependencies. What framework are you using for the frontend, and how are you deploying those distributables? This will help determine how As far as https goes, it is a little trickier. Most apps I've seen use only http, and rely on a reverse proxy to expose it to the internet, in which the reverse proxy handles ssl and usually sits at the network edge to handle traffic for a domain or multiple sub domains. This way all ssl is handled in one place, and it is easier to apply things globally like security headers and such. I haven't implemented https in a server before, but it is probably easiest to generate a self signed cert into the container, and install that into the server. Check out [https://web.dev/enable- https/](https://web.dev/enable-https/) as an example. You could use some sort of packet inspector (like wireshark or something), or install some network tool in the container to verify that ssl is actually being used to communicate between the frontend and backend. Basically you're trying to achieve end to end encryption. If that's the case, you would want to make sure you are connecting to your db over ssl as well (assuming your db is not in memory). ---------------------------------------------------------------------- BCIT_Richard · 2023-10-05 21:07 For what you're trying to do, I recommend a VM over a container by a mile.