JS build changes

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
   #     - name: Prepare release
   #       run: |
   #         mix compile
-  #         mix js.release
+  #         mix assets.release
   #         mix phx.digest
   #         mix release
   #       env:

Dockerfile.dev

@@ -32,6 +32,9 @@ RUN cd $FORKS/messctl && cp -r origin/* . && cargo build --release && cargo inst
 # install 
 RUN cp /opt/app/.cargo/bin/* /bin/
 
+# JS package manager
+RUN curl -L https://unpkg.com/@pnpm/self-installer | node
+
 EXPOSE 4000/tcp
 EXPOSE 4004/tcp
 

Dockerfile.release

@@ -62,6 +62,9 @@ RUN mix do bonfire.deps.update
 # COPY forks/ ./ 
 # RUN mix do deps.get --only prod
 
+# JS package manager
+RUN curl -L https://unpkg.com/@pnpm/self-installer | node
+
 # install JS deps
 COPY assets/package* ./assets/
 RUN mix js.deps.get
@@ -76,7 +79,7 @@ COPY . .
 RUN mix do deps.get --only prod
 
 # prepare static assets
-RUN mix js.release
+RUN mix assets.release
 RUN MIX_ENV=prod RELEASING=1 mix phx.digest
 
 # build final OTP release

Makefile

@@ -133,6 +133,9 @@ deps.get: mix.remote~deps.get mix~deps.get ## Fetch locked version of non-forked
 
 #### DEPENDENCY & EXTENSION RELATED COMMANDS ####
 
+js.deps.get:
+	@make --no-print-directory mix~js.deps.get
+
 dep.clean~%:
 	@make mix~"deps.clean $* --build"
 

assets/webpack.config.js

@@ -1,79 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-module.exports = (env, options) => {
-  const devMode = options.mode !== 'production';
-
-  return {
-    optimization: {
-      minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
-    },
-    entry: {
-      'non_live': glob.sync('./vendor/**/*.js').concat(['./js/non_live.js']),
-      'live': glob.sync('./vendor/**/*.js').concat(['./js/live.js'])
-    },
-    output: {
-      filename: '[name].js',
-      path: path.resolve(__dirname, '../priv/static/js'),
-      publicPath: '/js/'
-    },
-    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader'
-          }
-        },
-        {
-          test: /\.(png|svg|jpg|gif)$/,
-          use: [
-            'file-loader',
-          ],
-        },
-        {
-          // fonts
-          test: /\.(woff(2)?|ttf|otf|eot)(\?v=\d+\.\d+\.\d+)?$/,
-          use: [
-            {
-              loader: "file-loader",
-              options: {
-                name: "[name].[ext]",
-                outputPath: "../fonts",
-              },
-            },
-          ]
-        },
-        {
-          test: /\.[s]?css$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            'css-loader',
-            // 'sass-loader',
-            'postcss-loader',
-          ],
-        },
-        {
-          // images assets
-          test: /\.(gif|png|svg|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          use: ['file-loader'],
-        },
-      ]
-    },
-    plugins: [
-      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
-    ]
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
-  }
-};

docs/DEPLOY.md

@@ -146,7 +146,7 @@ There is a `Makefile` with relevant commands:
 
 - Run `mix deps.get --only prod` to install elixir dependencies.
 
-- Prepare assets with `mix js.deps.get`, `mix js.release` and `mix phx.digest`
+- Prepare assets with `mix js.deps.get`, `mix assets.release` and `mix phx.digest`
 
 - Run `mix release` to create an elixir release. This will create an executable in your `_build/prod/rel/bonfire` directory. We will be using the `bin/bonfire` executable from here on.
 

mix.exs

@@ -41,11 +41,11 @@ defmodule Bonfire.MixProject do
       "hex.setup": ["local.hex --force"],
       "rebar.setup": ["local.rebar --force"],
       "js.deps.get": [
-        "cmd npm install --prefix "<>dep_path("bonfire_geolocate")<>"/assets", # FIXME: make generic to apply to all extensions that bundle JS
-        "cmd npm install --prefix ./assets ./assets",
+        "cmd cd "<>dep_path("bonfire_geolocate")<>"/assets && pnpm install", # FIXME: make generic to apply to all extensions that bundle JS
+        "cmd cd ./assets && pnpm install",
       ],
-      "js.release": [
-        "cmd npm run deploy --prefix ./assets",
+      "assets.release": [
+        "cd ./assets && pnpm build",
       ],
       "js.deps.update": ["cmd npm update --prefix assets"],
       "ecto.seeds": [