CB-349: Gulp to webpack

.babelrc

@@ -1,3 +1,5 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": [
+    "@babel/preset-env"
+  ]
 }

Dockerfile

@@ -27,7 +27,7 @@ RUN apt-get update \
 ENV PGPASSWORD "critiquebrainz"
 
 # Node
-RUN curl -sL https://deb.nodesource.com/setup_6.x | bash -
+RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
 RUN apt-get install -y nodejs
 
 RUN pip install uWSGI==2.0.13.1
@@ -41,13 +41,12 @@ RUN pip install -r requirements.txt
 
 # Node dependencies
 COPY ./package.json /code/
-COPY ./npm-shrinkwrap.json /code/
 RUN npm install
 
 COPY . /code/
 
 # Build static files
-RUN ./node_modules/.bin/gulp
+RUN npm run build
 
 # Compile translations
 RUN pybabel compile -d critiquebrainz/frontend/translations

Dockerfile.webpack

@@ -0,0 +1,8 @@
+FROM node:10.15-alpine
+
+RUN mkdir /code
+WORKDIR /code
+
+COPY package.json package-lock.json webpack.config.js /code/
+RUN npm install
+

critiquebrainz/frontend/static/scripts/leaflet.js

@@ -1,2 +1,3 @@
+import '../styles/leaflet.less';
 var L = require('leaflet');
-L.Icon.Default.imagePath = '/static/images';
+L.Icon.Default.imagePath = '/static/images/';

critiquebrainz/frontend/static/scripts/main.js

@@ -0,0 +1 @@
+import '../styles/main.less';

critiquebrainz/frontend/static_manager.py

@@ -1,7 +1,7 @@
 import os.path
 import json
 
-MANIFEST_PATH = os.path.join(os.path.dirname(__file__), "static", "build", "rev-manifest.json")
+MANIFEST_PATH = os.path.join(os.path.dirname(__file__), "static", "build", "manifest.json")
 
 manifest_content = {}
 
@@ -14,6 +14,7 @@ def read_manifest():
 
 
 def get_static_path(resource_name):
+
     if resource_name not in manifest_content:
         return "/static/%s" % resource_name
     return "/static/build/%s" % manifest_content[resource_name]

docker/docker-compose.dev.yml

@@ -37,6 +37,7 @@ services:
       - db_test
       - critiquebrainz_redis
       - musicbrainz_db
+      - static_builder
 
   critiquebrainz_redis:
     image: redis:4.0-alpine
@@ -50,3 +51,11 @@ services:
       MB_IMPORT_DUMPS: "true"
     ports:
       - "5430:5432"
+
+  static_builder:
+    build:
+      context: ..
+      dockerfile: Dockerfile.webpack
+    command: npm run dev
+    volumes:
+      - ..:/code:z

docs/intro.rst

@@ -123,26 +123,14 @@ Initialization of CritiqueBrainz database is also required::
    $ docker-compose -f docker/docker-compose.dev.yml run critiquebrainz python3 \
    manage.py init_db --skip-create-db
 
-Then you can start all the services::
-
-   $ docker-compose -f docker/docker-compose.dev.yml up -d
-
-Building static files
-'''''''''''''''''''''
 
-Current Docker setup for development has one caveat: installation of Node.js dependencies
-and static file builds need to be done manually. This is caused by the volume setup.
+You will also need to run a command to build the static assets (javascript and css files) for the first run::
 
-After you started development versions of containers with Compose, connect to the main
-container::
+   $ docker-compose -f docker/docker-compose.dev.yml run --rm static_builder npm run pre-dev
 
-   $ docker-compose -f docker/docker-compose.dev.yml run critiquebrainz /bin/bash
-
-then install dependencies (it's enough to do this once, unless you modify ``package.json``)
-and build static files (needs to be done after any changes to JS or Less)::
+Then you can start all the services::
 
-   root@<container_id>:/code# npm install
-   root@<container_id>:/code# ./node_modules/.bin/gulp
+   $ docker-compose -f docker/docker-compose.dev.yml up -d
 
 Importing data dump
 '''''''''''''''''''

manage.py

@@ -19,7 +19,7 @@
 # Files listed here will be monitored for changes in debug mode and will
 # force a reload when modified.
 OBSERVE_FILES = [
-    "critiquebrainz/frontend/static/build/rev-manifest.json",
+    "critiquebrainz/frontend/static/build/manifest.json",
 ]