m

.github/workflows/python.yml

@@ -26,7 +26,7 @@ jobs:
       shell: bash
 
     - name: Run Django Tests
-      run: docker-compose -f docker-compose-dev.yaml exec --env TESTING=True -T web pytest 
+      run: docker-compose -f docker-compose-dev.yaml exec --env TESTING=True -T web pytest
 
       # Run with coverage, saves report on htmlcov dir
       # run: docker-compose -f docker-compose-dev.yaml exec --env TESTING=True -T web pytest --cov --cov-report=html --cov-config=.coveragerc

Dockerfile

@@ -7,16 +7,10 @@ ENV VIRTUAL_ENV=/home/mediacms.io
 ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 ENV PIP_NO_CACHE_DIR=1
 
-ARG DEVELOPMENT_MODE=no
-
 RUN mkdir -p /home/mediacms.io/mediacms/{logs} && cd /home/mediacms.io && python3 -m venv $VIRTUAL_ENV
 
 # Install dependencies:
 COPY requirements.txt .
-COPY requirements-dev.txt .
-
-RUN set -x \
-    && if [ "$DEVELOPMENT_MODE" = "yes" ]; then pip install -r requirements-dev.txt ; fi
 
 RUN pip install -r requirements.txt
 

Dockerfile-dev

@@ -0,0 +1,73 @@
+FROM python:3.11.4-bookworm AS compile-image
+
+SHELL ["/bin/bash", "-c"]
+
+# Set up virtualenv
+ENV VIRTUAL_ENV=/home/mediacms.io
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+ENV PIP_NO_CACHE_DIR=1
+
+RUN mkdir -p /home/mediacms.io/mediacms/{logs} && cd /home/mediacms.io && python3 -m venv $VIRTUAL_ENV
+
+# Install dependencies:
+COPY requirements.txt .
+COPY requirements-dev.txt .
+
+RUN pip install -r requirements.txt
+
+RUN pip install -r requirements-dev.txt
+
+COPY . /home/mediacms.io/mediacms
+WORKDIR /home/mediacms.io/mediacms
+
+RUN wget -q http://zebulon.bok.net/Bento4/binaries/Bento4-SDK-1-6-0-637.x86_64-unknown-linux.zip && \
+    unzip Bento4-SDK-1-6-0-637.x86_64-unknown-linux.zip -d ../bento4 && \
+    mv ../bento4/Bento4-SDK-1-6-0-637.x86_64-unknown-linux/* ../bento4/ && \
+    rm -rf ../bento4/Bento4-SDK-1-6-0-637.x86_64-unknown-linux && \
+    rm -rf ../bento4/docs && \
+    rm Bento4-SDK-1-6-0-637.x86_64-unknown-linux.zip
+
+############ RUNTIME IMAGE ############
+FROM python:3.11.4-bookworm as runtime-image
+
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
+
+# See: https://github.com/celery/celery/issues/6285#issuecomment-715316219
+ENV CELERY_APP='cms'
+
+# Use these to toggle which processes supervisord should run
+ENV ENABLE_UWSGI='yes'
+ENV ENABLE_NGINX='yes'
+ENV ENABLE_CELERY_BEAT='yes'
+ENV ENABLE_CELERY_SHORT='yes'
+ENV ENABLE_CELERY_LONG='yes'
+ENV ENABLE_MIGRATIONS='yes'
+
+# Set up virtualenv
+ENV VIRTUAL_ENV=/home/mediacms.io
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+
+COPY --chown=www-data:www-data --from=compile-image /home/mediacms.io /home/mediacms.io
+
+RUN apt-get update -y && apt-get -y upgrade && apt-get install --no-install-recommends \
+    supervisor nginx imagemagick procps wget xz-utils -y && \
+    rm -rf /var/lib/apt/lists/* && \
+    apt-get purge --auto-remove && \
+    apt-get clean
+
+RUN wget -q https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz && \
+    mkdir -p ffmpeg-tmp && \
+    tar -xf ffmpeg-release-amd64-static.tar.xz --strip-components 1 -C ffmpeg-tmp && \
+    cp -v ffmpeg-tmp/ffmpeg ffmpeg-tmp/ffprobe ffmpeg-tmp/qt-faststart /usr/local/bin && \
+    rm -rf ffmpeg-tmp ffmpeg-release-amd64-static.tar.xz
+
+WORKDIR /home/mediacms.io/mediacms
+
+EXPOSE 9000 80
+
+RUN chmod +x ./deploy/docker/entrypoint.sh
+
+ENTRYPOINT ["./deploy/docker/entrypoint.sh"]
+
+CMD ["./deploy/docker/start.sh"]

cms/dev_settings.py

@@ -1,7 +1,6 @@
-# Development settings, mainly used in docker-compose-dev.yaml
-# Django runs in debug mode with runserver, uwsgi and nginx arenot loaded
-# Django static loads everything from static/ folder
+# Development settings, used in docker-compose-dev.yaml
 import os
+
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
 INSTALLED_APPS = [
@@ -28,7 +27,7 @@ INSTALLED_APPS = [
     'djcelery_email',
     'ckeditor',
     'drf_yasg',
-    'corsheaders'
+    'corsheaders',
 ]
 
 MIDDLEWARE = [
@@ -45,7 +44,5 @@ MIDDLEWARE = [
 
 DEBUG = True
 CORS_ORIGIN_ALLOW_ALL = True
-STATICFILES_DIRS = (
-  os.path.join(BASE_DIR, 'static/'),
-)
-STATIC_ROOT = None
+STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static/'),)
+STATIC_ROOT = None

docker-compose-dev.yaml

@@ -4,7 +4,7 @@ services:
   migrations:
     build:
       context: .
-      dockerfile: ./Dockerfile
+      dockerfile: ./Dockerfile-dev
     image: mediacms/mediacms-dev:latest
     volumes:
       - ./:/home/mediacms.io/mediacms/
@@ -32,7 +32,7 @@ services:
   web:
     build:
       context: .
-      dockerfile: ./Dockerfile
+      dockerfile: ./Dockerfile-dev
     image: mediacms/mediacms-dev:latest
     command: "python manage.py runserver 0.0.0.0:80"
     environment:

docs/dev_exp.md

@@ -4,4 +4,57 @@ There is ongoing effort to provide a better developer experience and document it
 ## How to develop locally with Docker
 First install a recent version of [Docker](https://docs.docker.com/get-docker/), and [Docker Compose](https://docs.docker.com/compose/install/).
 
+Then run `docker-compose -f docker-compose-dev.yaml up`
 
+```
+user@user:~/mediacms$ docker-compose -f docker-compose-dev.yaml up
+```
+
+In a few minutes the app will be available at http://localhost . Login via admin/admin
+
+### What does docker-compose-dev.yaml do?
+It build the two images used for backend and frontend.
+
+* Backend: `mediacms/mediacms-dev:latest`
+* Frontend: `frontend`
+
+and will start all services required for MediaCMS, as Celery/Redis for asynchronous tasks, PostgreSQL database, Django and React
+
+For Django, the changes from the image produced by docker-compose.yaml are these:
+
+* Django runs in debug mode, with `python manage.py runserver`
+* uwsgi and nginx are not run
+* Django runs in Debug mode, with Debug Toolbar
+* Static files (js/css) are loaded from static/ folder
+* corsheaders is installed and configured to allow all origins
+
+For React, it will run `npm start` in the frontend folder, which will start the development server.
+Check it on http://localhost:8088/
+
+### How to develop in Django
+Django starts at http://localhost and is reloading automatically. Making any change to the python code should refresh Django.
+
+### How to develop in React
+React is started on http://localhost:8088/ , code is located in frontend/ , so making changes there should have instant effect on the page. Keep in mind that React is loading data from Django, and that it has to be built so that Django can serve it.
+
+### Making changes to the frontend
+
+The way React is added is more complicated than the usual SPA project and this is because React is used as a library loaded by Django Templates, so it is not a standalone project and is not handling routes etc.
+
+The two directories to consider are:
+* frontend/src , for the React files
+* templates/, for the Django templates.
+
+Django is using a highly intuitive hierarchical templating system (https://docs.djangoproject.com/en/4.2/ref/templates/), where the base template is templates/root.html and all other templates are extending it.
+
+React is called through the Django templates, eg templates/cms/media.html is loading js/media.js
+
+In order to make changes to React code, edit code on frontend/src and check it's effect on http://localhost:8088/ . Once ready, build it and copy it to the Django static folder, so that it is served by Django.
+
+### Development workflow with the frontend
+1. Edit frontend/src/ files
+2. Check changes on http://localhost:8088/
+3. Build frontend with `docker-compose -f docker-compose-dev.yaml exec frontend npm run dist`
+4. Copy static files to Django static folder with`cp -r frontend/dist/static/* static/`
+5. Restart Django - `docker-compose -f docker-compose-dev.yaml restart web` so that it uses the new static files
+6. Commit the changes