Add react

.eslintrc.js

@@ -0,0 +1,79 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "airbnb",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "prettier/react",
+  ],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint", "prettier"],
+  rules: {
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-did-update-set-state": "off",
+    "import/extensions": "off",
+    "no-unused-vars": "off",
+    camelcase: "off",
+    "prettier/prettier": "warn",
+    "lines-between-class-members": [
+      "error",
+      "always",
+      { exceptAfterSingleLine: true },
+    ],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        assert: "either",
+      },
+    ],
+    "react/static-property-placement": "off",
+    "class-methods-use-this": "off",
+    "react/no-unused-class-component-methods": "off",
+    "default-param-last": "off",
+  },
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+  },
+  overrides: [
+    {
+      // Configuration specific to Typescript files.
+      // These are defined mostly when the ESLint rules don't support typescript
+      // Usually there is an equivalent typescript rule from typescript-eslint
+      files: ["**/*.ts", "**/*.tsx"],
+      rules: {
+        // Disabling no-undef rule for typescript files
+        // "The checks it provides are already provided by TypeScript without the need for configuration"
+        // see https://typescript-eslint.io/docs/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+        "no-undef": "off",
+        // see https://typescript-eslint.io/rules/no-use-before-define/
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": "warn",
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error",
+      },
+    },
+  ],
+};

.stylelintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extends: "stylelint-config-recommended-less",
+  customSyntax: "postcss-less",
+  plugins: ["stylelint-prettier"],
+  rules: {
+    "prettier/prettier": true,
+    "no-descending-specificity": null,
+    "function-calc-no-unspaced-operator": null,
+  },
+  ignoreFiles: [
+    "**/static/css/theme/bootstrap/*",
+    "**/static/css/theme/bootstrap/mixins/*",
+  ],
+}

Dockerfile

@@ -1,24 +1,19 @@
-FROM metabrainz/python:3.8-20210115
+ARG PYTHON_BASE_IMAGE_VERSION=3.8-20210115
+ARG NODE_VERSION=16-alpine
+FROM metabrainz/python:$PYTHON_BASE_IMAGE_VERSION as metabrainz-dev
 
-# remove expired let's encrypt certificate and install new ones
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends ca-certificates \
-    && rm -rf /usr/share/ca-certificates/mozilla/DST_Root_CA_X3.crt \
-    && update-ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
-
-##############
-# MetaBrainz #
-##############
+ARG PYTHON_BASE_IMAGE_VERSION
 
-RUN mkdir /code
-WORKDIR /code
+LABEL org.label-schema.vcs-url="https://github.com/metabrainz/metabrainz.org.git" \
+      org.label-schema.vcs-ref="" \
+      org.label-schema.schema-version="1.0.0-rc1" \
+      org.label-schema.vendor="MetaBrainz Foundation" \
+      org.label-schema.name="MetaBrainz" \
+      org.metabrainz.based-on-image="metabrainz/python:$PYTHON_BASE_IMAGE_VERSION"
 
-# Node and dependencies
-RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
-RUN apt-get install -y nodejs
-COPY ./package.json /code/
-RUN npm install
+ENV DOCKERIZE_VERSION v0.6.1
+RUN wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
+    && tar -C /usr/local/bin -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
 
 # Python dependencies
 RUN apt-get update \
@@ -31,30 +26,80 @@ RUN apt-get update \
                         libxml2-dev \
                         libxslt1-dev \
                         libssl-dev \
+                        wget \
      && rm -rf /var/lib/apt/lists/*
+
+# While WORKDIR will create a directory if it doesn't already exist, we do it explicitly here
+# so that we know what user it is created as: https://github.com/moby/moby/issues/36677
+RUN mkdir -p /code/metabrainz /static
+
+WORKDIR /code
+
 COPY requirements.txt /code/
 RUN pip3 install pip==21.0.1
 RUN pip install --no-cache-dir -r requirements.txt
-RUN pip install --no-cache-dir uWSGI==2.0.15
 
 COPY . /code/
-RUN ./node_modules/.bin/lessc ./metabrainz/static/css/main.less > ./metabrainz/static/css/main.css
-RUN ./node_modules/.bin/lessc ./metabrainz/static/css/theme/boostrap/boostrap.less > ./metabrainz/static/css/theme/boostrap/boostrap.css
-RUN ./node_modules/.bin/lessc ./metabrainz/static/fonts/font_awesome/less/font-awesome.less > ./metabrainz/static/fonts/font_awesome/less/font-awesome.css
 
-############
-# Services #
-############
+#####################################################################################################
+# NOTE: The javascript files are continously watched and compiled using this image in developement. #
+#####################################################################################################
+FROM node:$NODE_VERSION as metabrainz-frontend-dev
+
+ARG NODE_VERSION
+
+LABEL org.label-schema.vcs-url="https://github.com/metabrainz/metabrainz.org.git" \
+      org.label-schema.vcs-ref="" \
+      org.label-schema.schema-version="1.0.0-rc1" \
+      org.label-schema.vendor="MetaBrainz Foundation" \
+      org.label-schema.name="MetaBrainz Static Builder" \
+      org.metabrainz.based-on-image="node:$NODE_VERSION"
+
+RUN mkdir /code
+WORKDIR /code
+
+COPY package.json package-lock.json /code/
+RUN npm install
+
+COPY webpack.config.js babel.config.js tsconfig.json .eslintrc.js .stylelintrc.js /code/
+
+
+#########################################################################
+# NOTE: The javascript files for production are compiled in this image. #
+#########################################################################
+FROM metabrainz-frontend-dev as metabrainz-frontend-prod
+
+# Compile front-end (static) files
+COPY ./frontend /code/frontend
+RUN npm run build:prod
+
+
+###########################################
+# NOTE: The production image starts here. #
+###########################################
+FROM metabrainz-dev as metabrainz-prod
 
-# Consul Template service is already set up with the base image.
-# Just need to copy the configuration.
 COPY ./docker/prod/consul-template-uwsgi.conf /etc/
 
 COPY ./docker/prod/uwsgi.service /etc/service/uwsgi/run
 RUN chmod 755 /etc/service/uwsgi/run
 COPY ./docker/prod/uwsgi.ini /etc/uwsgi/uwsgi.ini
 
-EXPOSE 13031
+# copy the compiled js files and static assets from image to prod
+COPY --from=metabrainz-frontend-prod /code/frontend/robots.txt /static/
+COPY --from=metabrainz-frontend-prod /code/frontend/fonts /static/fonts
+COPY --from=metabrainz-frontend-prod /code/frontend/img /static/img
+COPY --from=metabrainz-frontend-prod /code/frontend/js/lib /static/js/lib
+COPY --from=metabrainz-frontend-prod /code/frontend/dist /static/dist
+
+# Now install our code, which may change frequently
+COPY docker /code/metabrainz/
+
+WORKDIR /code/metabrainz
+# Ensure we use the right files and folders by removing duplicates
+RUN rm -rf ./frontend/
+RUN rm -f /code/metabrainz/metabrainz/config.py /code/metabrainz/metabrainz/config.pyc
 
 ARG GIT_COMMIT_SHA
+LABEL org.label-schema.vcs-ref=$GIT_COMMIT_SHA
 ENV GIT_SHA ${GIT_COMMIT_SHA}

babel.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  sourceType: "unambiguous",
+  presets: [
+    [
+      "@babel/preset-typescript",
+      {
+        allowDeclareFields: true,
+      },
+    ],
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        useBuiltIns: "usage",
+        corejs: { version: "3.26", proposals: true },
+        targets: {
+          node: "16",
+          browsers: ["> 0.2%", "last 2 versions", "not dead", "Firefox >= 44"],
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        allowDeclareFields: true,
+      },
+    ],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
+  ],
+};

develop.sh

@@ -8,8 +8,15 @@
 set -e
 cd "$(dirname "${BASH_SOURCE[0]}")"
 
+echo "Checking docker compose version"
+if docker compose version &> /dev/null; then
+    DOCKER_COMPOSE_CMD="docker compose"
+else
+    DOCKER_COMPOSE_CMD="docker-compose"
+fi
+
 function invoke_docker_compose {
-    exec docker-compose -f docker/docker-compose.dev.yml \
+    exec $DOCKER_COMPOSE_CMD -f docker/docker-compose.dev.yml \
         -p metabrainz \
         "$@"
 }

docker/docker-compose.dev.yml

@@ -1,5 +1,5 @@
 # Docker Compose file for development
-version: "2"
+version: "3.8"
 
 volumes:
   db:
@@ -9,13 +9,15 @@ services:
   web:
     build:
       context: ..
-      dockerfile: ./docker/Dockerfile.dev
+      dockerfile: Dockerfile
+      target: metabrainz-dev
     command: python /code/manage.py runserver -h 0.0.0.0 -p 80
     volumes:
       - ../data/replication_packets:/data/replication_packets
       - ../data/json_dumps:/data/json_dumps
       - ../data/logos:/code/metabrainz/static/img/user_logos
       - ..:/code
+      - ../frontend:/static
     ports:
       - "8000:80"
     depends_on:
@@ -33,3 +35,13 @@ services:
 
   redis:
     image: redis:3.2.1
+
+  static_builder:
+    build:
+      context: ..
+      dockerfile: Dockerfile
+      target: metabrainz-frontend-dev
+    command: npm run build:dev
+    user: ${STATIC_BUILD_USER:-node}
+    volumes:
+      - ../frontend:/code/frontend:z

docker/docker-compose.test.yml

@@ -1,11 +1,13 @@
 # Docker Compose file for testing
-version: "2"
+version: "3.8"
+
 services:
 
   web:
     build:
       context: ..
-      dockerfile: ./docker/Dockerfile.dev
+      dockerfile: Dockerfile
+      target: metabrainz-dev
     volumes:
       - ..:/code
     depends_on: