Merge pull request #161 from stumpylog/multistep-build

Refactor: Do the npm compile as a Build step in docker (Multistep build)

.github/workflows/ci.yml

@@ -144,35 +144,8 @@ jobs:
           cd src/
           coveralls --service=github
 
-  frontend:
-    runs-on: ubuntu-20.04
-    steps:
-    -
-      name: Checkout
-      uses: actions/checkout@v2
-    -
-      uses: actions/setup-node@v2
-      with:
-        node-version: '16'
-    -
-      name: Configure version on dev branches
-      if: startsWith(github.ref, 'refs/heads/feature-') || github.ref == 'refs/heads/dev'
-      run: |
-        git_hash=$(git rev-parse --short "$GITHUB_SHA")
-        git_branch=${GITHUB_REF#refs/heads/}
-        sed -i -E "s/version: \"(.*)\"/version: \"${git_branch} ${git_hash}\"/g" src-ui/src/environments/environment.prod.ts
-    -
-      name: Build frontend
-      run: ./compile-frontend.sh
-    -
-      name: Upload artifact
-      uses: actions/upload-artifact@v2
-      with:
-        name: frontend-compiled
-        path: src/documents/static/frontend/
-
   build-release:
-    needs: [frontend, documentation, tests, whitespace, codestyle]
+    needs: [build-docker-image, documentation, tests, whitespace, codestyle]
     runs-on: ubuntu-20.04
     steps:
       -
@@ -283,7 +256,7 @@ jobs:
   build-docker-image:
     if: github.event_name == 'push' && (startsWith(github.ref, 'refs/heads/feature-') || github.ref == 'refs/heads/dev' || startsWith(github.ref, 'refs/tags/ng-'))
     runs-on: ubuntu-latest
-    needs: [frontend, tests, whitespace, codestyle]
+    needs: [tests, whitespace, codestyle]
     steps:
       -
         name: Prepare
@@ -304,12 +277,6 @@ jobs:
       -
         name: Checkout
         uses: actions/checkout@v2
-      -
-        name: Download frontend artifact
-        uses: actions/download-artifact@v2
-        with:
-          name: frontend-compiled
-          path: src/documents/static/frontend/
       -
         name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
@@ -338,3 +305,13 @@ jobs:
         name: Inspect image
         run: |
           docker buildx imagetools inspect ${{ steps.prepare.outputs.inspect_tag }}
+      -
+        name: Export frontend artifact from docker
+        run: |
+          docker cp ${{ steps.prepare.outputs.tags }}:/src/src/documents/static/frontend/ src/documents/static/frontend/
+      -
+        name: Upload frontend artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: frontend-compiled
+          path: src/documents/static/frontend/

Dockerfile

@@ -1,3 +1,12 @@
+FROM node:16 AS compile-frontend
+
+COPY . /src
+
+WORKDIR /src/src-ui
+RUN npm install
+RUN ./node_modules/.bin/ng build --prod
+
+
 FROM ubuntu:20.04 AS jbig2enc
 
 WORKDIR /usr/src/jbig2enc
@@ -103,7 +112,7 @@ RUN cd docker \
 COPY gunicorn.conf.py ../
 
 # copy app
-COPY src/ ./
+COPY --from=compile-frontend /src/src/ ./
 
 # add users, setup scripts
 RUN addgroup --gid 1000 paperless \

compile-frontend.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-set -e
-
-cd src-ui
-npm install
-./node_modules/.bin/ng build --prod

docs/administration.rst

@@ -92,7 +92,6 @@ B.  If you built the image yourself, do the following:
     .. code:: shell-session
 
         $ git pull
-        $ ./compile-frontend.sh
         $ docker-compose build
         $ docker-compose up
 

docs/extending.rst

@@ -60,11 +60,12 @@ To do the setup you need to perform the steps from the following chapters in a c
 
   * Make sure you're using python 3.9.x or lower. Otherwise you might get issues with building dependencies. You can use `pyenv <https://github.com/pyenv/pyenv>`_ to install a specific python version.
 
-7.  Generate the static UI so you can perform a login to get session that is required for frontend development (this needs to be done one time only). From root folder:
+7.  Generate the static UI so you can perform a login to get session that is required for frontend development (this needs to be done one time only). From src-ui directory:
 
     .. code:: shell-session
 
-        compile-frontend.sh
+        npm install .
+        ./node_modules/.bin/ng build --prod
 
 8.  Apply migrations and create a superuser for your dev instance:
 
@@ -273,15 +274,7 @@ directory.
 Building the Docker image
 =========================
 
-Building the docker image from source requires the following two steps:
+Building the docker image from source:
-
-1.  Build the front end.
-
-    .. code:: shell-session
-
-        ./compile-frontend.sh
-
-2.  Build the docker image.
 
     .. code:: shell-session
 

docs/setup.rst

@@ -260,9 +260,7 @@ Build the Docker image yourself
         webserver:
             build: .
 
-4.  Run the ``compile-frontend.sh`` script. This requires ``node`` and ``npm >= v15``.
+4.  Follow steps 3 to 8 of :ref:`setup-docker_hub`. When asked to run
-
-5.  Follow steps 3 to 8 of :ref:`setup-docker_hub`. When asked to run
     ``docker-compose pull`` to pull the image, do
 
     .. code:: shell-session
@@ -684,7 +682,7 @@ configuring some options in paperless can help improve performance immensely:
     your documents before feeding them into paperless. Some scanners are able to
     do this! You might want to even specify ``skip_noarchive`` to skip archive
     file generation for already ocr'ed documents entirely.
-*   If you want to perform OCR on the the device, consider using ``PAPERLESS_OCR_CLEAN=none``.
+*   If you want to perform OCR on the device, consider using ``PAPERLESS_OCR_CLEAN=none``.
     This will speed up OCR times and use less memory at the expense of slightly worse
     OCR results.
 *   Set ``PAPERLESS_OPTIMIZE_THUMBNAILS`` to 'false' if you want faster consumption