0

I've been struggling with a situation for the past day, and I couldn't really find anything that helped me solve it:

I have a Svelte + Flask project that I've been running directly on my host for a while, but I've recently decided to dockerize both the frontend and backend service into the same container.

Now, when developing the frontend part, I used npm run dev to start the frontend service and have it reload every time I made changes to the code. Problem is, when I run the same thing inside the container nothing happens when I update the code. I do know for sure that code I write on the host gets put into the container using the volume defined in the docker-compose.

I'm honestly pretty new to containerization in general, so I wouldn't be surprised if it is something I missed.

For reference, here's my Dockerfile:

FROM nikolaik/python-nodejs:python3.9-nodejs16-slim

WORKDIR /opt/myproject

COPY . .

RUN pip3 install -r server/requirements.txt
RUN cd client && npm install && npm run-script build

EXPOSE 5000
ENV FLASK_ENV="development"
ENV FLASK_APP="/opt/myproject/server/src/start.py"

CMD ["/bin/sh", "/opt/myproject/start_services.sh"]

I've made a script to run both Gunicorn on backend in addition to npm run dev:

#!/bin/sh
cd /opt/myproject/server/src
gunicorn --bind 0.0.0.0:5000 --reload --daemon start:app 
cd /opt/myproject/client
npm run dev

Here's my compose, if it is also needed:

# docker-compose.yml
version: '3.9'

services:
  web:
    image: myproject_main
    container_name: myproject_main_container
    ports:
     - "5000:5000"
    dns:
     - 8.8.8.8
    volumes:
     - ./myproject_code:/opt/myproject
  


networks:
  default:
    external: true
    name: myproject_net

Thanks a lot!

Lior Dahan
  • 682
  • 2
  • 7
  • 19
  • 1
    its not really about your issue, but you should probably not put your frontend and flask in the same container. For dev, use a node image or develop locally, and for prod put the statics in a nginx image for example. – The Fool Nov 30 '21 at 19:03
  • 1
    I dont have an answer for your question, but i wanted to point out that docker is intended to best mimic your production environment. Meaning its not the best suited tool to debug your app. I would recommend testing both sides of the app local. Then when both are solid run the container and see if the app behaves as expected. Deploy the image to your environment. I think what youre asking can be done. I've never seen it done tho. – Leonardo Wildt Nov 30 '21 at 19:03
  • 1
    Gotta be honest with you, you are prob right, but right now it's mostly a learning experience from me so I kinda cut corners there – Lior Dahan Nov 30 '21 at 19:04
  • You only expose one port. How do you indent to see the frontend while it's hot reloading? Looks to me like you built the statics once at image build time and let flask serve them. That way, flask wouldn't see what your svelte dev server is doing, unless its compiling the project into statics and puts them into flasks statics dir. – The Fool Nov 30 '21 at 19:21
  • @TheFool I have Flask running on 5000 and npm takes a random port since 5000 is occupied, but AFAIK npm rebuilds the pages itself when it's running regardless of what Flask is seeing, and Flask just referenced the built pages. I don't really rely on Flask to reload whenever frontend changes are detected – Lior Dahan Nov 30 '21 at 19:27
  • npm rebuilds the page but are you sure the final statics flask is looking for are ending up in the place they are supposed to? Some dev server will do it even in memory. Only in a real build command, they will produce real statics. What dev server are you using? – The Fool Nov 30 '21 at 19:29
  • and is flask actually serving your statics? It's not clear from your code, what is serving the statics. If flask doesnt serve them, you need to expose the port of the dev server. – The Fool Nov 30 '21 at 19:31
  • Flask calls the `send_from_directory` function in order to fetch pages, so (correct me if I'm mistaken) it isn't actually Flask which serves the pages, but npm. Exposing the ports might do it though, after all that's one of the things that are different between my host and the container. I'll try something with that and come back with an answer, thanks! – Lior Dahan Nov 30 '21 at 19:34
  • if you call send from directory then flask is serving the statics it finds inside that directory. So you need to take care of npm putting the statics on each hot reload there. Typically, dev servers dont work like that. Thats why first time when you build your image you do a real npm build so flask has something to send from that directory. But on code change these files are not updated. If you'd ask the devserver on its port, it likely would show you the updated page. – The Fool Nov 30 '21 at 19:37

0 Answers0