chore: make use of Webpack for building CSS and JS files (#2127)

Author: nicomiguelino

bin/prepare_test_environment.sh

@@ -48,9 +48,7 @@ EOF
 if [ "$START_SERVER" = true ]; then
     cd /usr/src/app
 
-    npm install && \
-        npm run coffee-build && \
-        npm run sass-build
+    npm install && npm run build
 
     ./manage.py makemigrations
     ./manage.py migrate --fake-initial

bin/start_server.sh

@@ -27,9 +27,7 @@ fi
 
 if [[ "$ENVIRONMENT" == "development" ]]; then
     echo "Starting Django development server..."
-    npm install && \
-        npm run coffee-build && \
-        npm run sass-build
+    npm install && npm run build
     ./manage.py runserver 0.0.0.0:8080
 else
     echo "Generating Django static files..."

docker/Dockerfile.server.j2

@@ -10,13 +10,16 @@ RUN \
 RUN mkdir -p /app
 WORKDIR /app
 
-COPY package.json package-lock.json /app
+COPY package.json \
+    package-lock.json \
+    webpack.prod.js \
+    webpack.common.js \
+    /app/
 RUN npm install
 
 COPY ./static/js/*.coffee /app/static/js/
 COPY ./static/sass/*.scss /app/static/sass/
-RUN npm run coffee-build && \
-    npm run sass-build
+RUN npm run build
 
 {% endif %}
 {% include 'Dockerfile.base.j2' %}

docs/developer-documentation.md

@@ -162,36 +162,21 @@ We've also provided a [checklist](/docs/qa-checklist.md) that can serve as a gui
 To get started, you need to start the development server first. See this [section](#dockerized-development-environment)
 for details.
 
-### Installing Node.js dependencies
+### Starting Webpack in development mode
 
-Run the following command from the project root directory.
+To start [Webpack](https://webpack.js.org/) in development mode, run the following command:
 
 ```bash
 $ docker compose -f docker-compose.dev.yml exec anthias-server \
-    npm install
+    npm run dev
 ```
 
-### Transpiling CSS from SASS
-
-Open a new terminal session and run the following command:
-
-```bash
-$ docker compose -f docker-compose.dev.yml exec anthias-server \
-    npm run sass-dev
-```
-
-### Transpiling JS from CoffeeScript
-
-Open a new terminal session and run the following command:
-
-```bash
-$ docker compose -f docker-compose.dev.yml exec anthias-server \
-    npm run coffee-dev
-```
+Making changes to the CoffeeScript or SCSS files will automatically trigger a recompilation,
+generating the corresponding JavaScript and CSS files.
 
 ### Closing the transpiler
 
-Just press `Ctrl-C` to close the SASS and CoffeeScript transpilers.
+Just press `Ctrl-C` to close Webpack in development mode.
 
 ## Linting Python code locally