Merge pull request #281 from CityOfDetroit/issue.278

Create stable build pipeline for UXDS
CityOfDetroit · Jan 9, 2025 · ccec766 · ccec766
2 parents b266482 + 18ccb6d
commit ccec766
Show file tree

Hide file tree

Showing 12 changed files with 197 additions and 152 deletions.
diff --git a/.github/workflows/build-tests.yml b/.github/workflows/build-tests.yml
@@ -0,0 +1,19 @@
+name: 'Package Build Tests'
+on:
+  push:
+    branches: [ dev ]
+  pull_request:
+    branches: [ dev ]
+jobs:
+  package-build-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/Jod
+      - name: Install dependencies
+        run: yarn
+      - name: Build package using Webpack
+        run: yarn build
diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
@@ -5,7 +5,7 @@ on:
   pull_request:
     branches: [ dev ]
 jobs:
-  test:
+  storybook-tests:
     timeout-minutes: 60
     runs-on: ubuntu-22.04
     steps:

diff --git a/.gitignore b/.gitignore
@@ -111,3 +111,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Storybook static build files
+storybook-static/
diff --git a/build/experimental/assets/js/main.js b/build/experimental/assets/js/main.js
diff --git a/build/stable/assets/js/main.js b/build/stable/assets/js/main.js
diff --git a/build/stable/assets/js/runtime.js b/build/stable/assets/js/runtime.js
diff --git a/build/stable/index.html b/build/stable/index.html
@@ -0,0 +1 @@
+<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
diff --git a/package.json b/package.json
@@ -24,15 +24,16 @@
   "scripts": {
     "check-lint-config": "npx eslint-config-prettier src/index.js",
     "lint": "eslint src && prettier --check src/*",
-    "build:experimental": "webpack --mode production",
-    "build-package": "cross-env BABEL_ENV=production babel src -d dist",
-    "start": "webpack-dev-server --mode development",
+    "build": "yarn build:experimental && yarn build:stable",
+    "build:experimental": "webpack --mode production --config webpack.config.experimental.js",
+    "build:stable": "webpack --mode production --config webpack.config.stable.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "storybook-to-ghpages",
     "test-storybook": "test-storybook --maxWorkers=2 --coverage",
-    "release": "auto shipit --base-branch=dev",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "build-package": "cross-env BABEL_ENV=production babel src -d dist",
+    "release": "auto shipit --base-branch=dev"
   },
   "author": {
     "name": "Edgar Montes"

diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,150 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+const createConfig = (options) => {
+  const { entry, outputPath, port = 3000 } = options;
+  return (_env, argv) => {
+    const isProduction = argv.mode === 'production';
+    const isDevelopment = !isProduction;
+
+    return {
+      devtool: isDevelopment && 'cheap-module-source-map',
+      entry,
+      output: {
+        path: path.resolve(__dirname, outputPath),
+        filename: 'assets/js/[name].js',
+        publicPath: '',
+      },
+      module: {
+        rules: [
+          {
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                cacheDirectory: true,
+                cacheCompression: false,
+                envName: isProduction ? 'production' : 'development',
+              },
+            },
+          },
+          {
+            test: /\.css$/i,
+            use: [
+              isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader',
+              'css-loader',
+              'postcss-loader',
+            ],
+          },
+          {
+            test: /\.s[ac]ss$/i,
+            use: [
+              isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+              'css-loader',
+              'sass-loader',
+            ],
+          },
+          {
+            test: /\.(png|jpg|gif)$/i,
+            use: {
+              loader: 'url-loader',
+              options: {
+                limit: 8192,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+          },
+          {
+            test: /\.svg$/,
+            use: ['@svgr/webpack'],
+          },
+          {
+            test: /\.(eot|otf|ttf|woff|woff2)$/,
+            loader: require.resolve('file-loader'),
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+      resolve: {
+        extensions: ['.js', '.jsx'],
+      },
+      plugins: [
+        isProduction &&
+          new MiniCssExtractPlugin({
+            filename: 'assets/css/[name].css',
+            chunkFilename: 'assets/css/[name].chunk.css',
+          }),
+        new HtmlWebpackPlugin({
+          template: path.resolve(__dirname, 'public/index.html'),
+          inject: true,
+        }),
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': JSON.stringify(
+            isProduction ? 'production' : 'development',
+          ),
+        }),
+      ].filter(Boolean),
+      optimization: {
+        minimize: isProduction,
+        minimizer: [
+          new TerserWebpackPlugin({
+            terserOptions: {
+              compress: {
+                comparisons: false,
+              },
+              mangle: {
+                safari10: true,
+              },
+              output: {
+                comments: false,
+                ascii_only: true,
+              },
+              warnings: false,
+            },
+          }),
+          new CssMinimizerPlugin(),
+        ],
+        splitChunks: {
+          chunks: 'all',
+          minSize: 0,
+          maxInitialRequests: 10,
+          maxAsyncRequests: 10,
+          cacheGroups: {
+            vendors: {
+              test: /[\\/]node_modules[\\/]/,
+              name(module, chunks, cacheGroupKey) {
+                const packageName = module.context.match(
+                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
+                )[1];
+                return `${cacheGroupKey}.${packageName.replace('@', '')}`;
+              },
+            },
+            common: {
+              minChunks: 2,
+              priority: -10,
+            },
+          },
+        },
+        runtimeChunk: 'single',
+      },
+      devServer: {
+        port,
+        compress: true,
+        historyApiFallback: true,
+        open: true,
+        client: {
+          overlay: true,
+        },
+      },
+    };
+  };
+};
+
+module.exports = createConfig;
diff --git a/webpack.config.experimental.js b/webpack.config.experimental.js
@@ -0,0 +1,7 @@
+const createConfig = require('./webpack.common');
+
+module.exports = createConfig({
+  entry: './src/experimental/index-experimental.js',
+  outputPath: 'build/experimental',
+  port: 3000
+});
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.config.stable.js b/webpack.config.stable.js
@@ -0,0 +1,7 @@
+const createConfig = require('./webpack.common');
+
+module.exports = createConfig({
+  entry: './src/stable/index-stable.js',
+  outputPath: 'build/stable',
+  port: 3001
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>