Adds prod webpack config. Modifies materia-app dockerfile to correctly build assets into app image.

Author: clpetersonucf

docker/run_build_github_release_package.sh

@@ -90,7 +90,7 @@ docker run \
 	--mount type=bind,source="$(pwd)"/clean_build_clone/,target=/build \
 	--mount source=materia-asset-build-vol,target=/build/node_modules \
 	node:18.13.0-alpine \
-	/bin/ash -c "apk add --no-cache git && cd build && yarn install --frozen-lockfile --non-interactive --pure-lockfile --force && npm run-script build"
+	/bin/ash -c "apk add --no-cache git && cd build && yarn install --frozen-lockfile --non-interactive --pure-lockfile --force && npm run-script build-for-image"
 
 # verify all files we expect to be created exist
 for i in "${FILES_THAT_SHOULD_EXIST[@]}"

materia-app.Dockerfile

@@ -61,18 +61,24 @@ COPY --chown=www-data:www-data ./oil /var/www/html/oil
 RUN composer install --no-cache --no-dev --no-progress --no-scripts --prefer-dist --optimize-autoloader
 
 # =====================================================================================================
-# Yarn stage buils js/css assets
+# Yarn stage build js/css assets
 # =====================================================================================================
 FROM node:18.13.0-alpine AS yarn_stage
 
 RUN apk add --no-cache git
 
 COPY ./public /build/public
+# copy configs into /build. These are required for yarn and webpack
 COPY ./package.json /build/package.json
+COPY ./babel.config.json /build/babel.config.json
+COPY ./webpack.prod.config.js /build/webpack.prod.config.js
 COPY ./yarn.lock /build/yarn.lock
+# these directories must be hoisted into /build in order for webpack to work on them
+COPY ./src /build/src
+COPY ./fuel/packages /build/fuel/packages
 RUN mkdir -p /build/fuel/app/config/
-RUN cd build && yarn install --frozen-lockfile --non-interactive --production --silent --pure-lockfile --force
-
+# run yarn install and then the build script in the package.json (webpack --config webpack.prod.config.js)
+RUN cd build && yarn install --frozen-lockfile --non-interactive --silent --pure-lockfile --force && npm run-script build-for-image
 
 # =====================================================================================================
 # final stage creates the final deployable image

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "dev": "webpack-dev-server",
     "build": "webpack",
+    "build-for-image": "webpack --config webpack.prod.config.js",
     "test": "TZ=Etc/UTC jest --verbose",
     "test:dev": "TZ=Etc/UTC jest --verbose --watch --coverage",
     "test:ci": "TZ=Etc/UTC CI=true jest --ci --useStderr --coverage --coverageReporters text-summary cobertura",

webpack.prod.config.js

@@ -0,0 +1,82 @@
+const glob = require('glob')
+const path = require('path')
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const jsPath = path.join(__dirname, 'src',)
+const packageJsPath = path.join(__dirname, 'fuel','packages')
+const cssPath = path.join(__dirname, 'src', 'css')
+const componentCssPath = path.join(__dirname, 'src', 'components')
+
+const entry = {}
+// Webpack Entry Point Registration Overview
+// Create object with:
+// Key = output name, Value = source sass file
+// for every scss file in the cssPath directory
+// EX: { 'css/<filename>.css' : './src/css/filename.scss', ...}
+
+
+// SASS/CSS webpack entry point registration
+glob.sync(path.join(cssPath, '*.scss')).forEach(file => {
+	entry['css/'+path.basename(file, '.scss')] = file
+})
+
+glob.sync(path.join(componentCssPath, '*.scss')).forEach(file => {
+	entry['css/'+path.basename(file, '.scss')] = file
+})
+
+// // JS webpack entry point registration
+// // locates all `js/*.js` files
+glob.sync(path.join(jsPath, '*.js')).map(file => {
+	entry['js/'+path.basename(file, '.js')] = file
+})
+
+// some packages (like the reactified materia-theme-ucf) have js that needs to be added to webpack
+glob.sync(path.join(packageJsPath, '**/*.js')).map(file => {
+	entry['js/'+path.basename(file, '.js')] = file
+})
+
+module.exports = {
+	mode: 'production',
+	entry,
+	output: {
+		path: path.join(__dirname, 'public/dist/'),
+		filename: '[name].js',
+		clean: true
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx)$/,
+				exclude: /node_modules/,
+				use: {
+						loader: 'babel-loader'
+					}
+			},
+			{
+				test: /\.s?css$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: 'css-loader',
+						options: {
+							url: false
+						}
+					},
+					'sass-loader'
+				]
+			},
+		]
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: "[name].css"
+		})
+	],
+	resolve: {
+		extensions: ['.js', '.jsx'],
+	}
+	// externals: {
+	// 	react: 'React',
+	// 	'react-dom': 'ReactDOM'
+	// }
+}