[Django]-Dockerized Django with webpackDevServer

by

5👍

✅

Thanks to this SO thread I found the solution.

docker-compose.yml

version: '2'
services:
  webpack:
    build:
      context: .
      dockerfile: docker/webpack
    volumes_from:
      - webapp:rw

  webapp:
    build:
      context: .
      dockerfile: docker/webapp
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"

docker/webapp

FROM python:latest
ENV PYTHONUNBUFFERED 1

# set working directory to /code/
RUN mkdir /code
WORKDIR /code

# add requirements.txt to the image
ADD ./requirements.txt /code/

# install python dependencies
RUN pip install -r requirements.txt

ADD . /code/

# Port to expose
EXPOSE 8000

docker/webpack

from node:latest

RUN npm install webpack -g

ADD docker/start-webpack.sh .
RUN chmod +x /start-webpack.sh

CMD ./start-webpack.sh

docker/start-webpack.sh

#!/usr/bin/env bash

until cd /code && npm install
do
  echo "Retrying npm install"
done

webpack --watch --watch-polling
👤Pietro

1👍

When using the webpack-dev-server, the actual outputs go to an in-memory output filesystem, so the only way to access the bundle from Django would be to either provide clients with a URL to the public path where the bundle is returned by webpack-dev-server, or extend how the static assets are discovered and gathered to retrieve these over HTTP if only Django can access the Webpack container.

Now that that’s covered, I’d recommend that you do not do it. Instead, use webpack $ARGS and webpack --watch $DEV_ARGS. This will write the outputs to the volume, which you can then share with Django.

👤Filip Dupanović

Leave a comment