build(web): integrate nx (#16706)

apps/web/postcss.config.js

@@ -1,9 +1,13 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
+const path = require("path");
+
 module.exports = {
   plugins: [
-    require("postcss-import"),
+    require("postcss-import")({
+      path: [path.resolve(__dirname, "../../libs"), path.resolve(__dirname, "src/scss")],
+    }),
     require("postcss-nested"),
-    require("tailwindcss"),
+    require("tailwindcss")({ config: path.resolve(__dirname, "tailwind.config.js") }),
     require("autoprefixer"),
   ],
 };

apps/web/project.json

@@ -0,0 +1,215 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "web",
+  "projectType": "application",
+  "sourceRoot": "apps/web/src",
+  "tags": ["scope:web", "type:app"],
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "oss",
+      "options": {
+        "outputPath": "dist/apps/web",
+        "webpackConfig": "apps/web/webpack.config.js",
+        "tsConfig": "apps/web/tsconfig.json",
+        "main": "apps/web/src/main.ts",
+        "target": "web",
+        "compiler": "tsc"
+      },
+      "configurations": {
+        "oss": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/oss"
+        },
+        "oss-dev": {
+          "mode": "development",
+          "outputPath": "dist/apps/web/oss-dev",
+          "env": {
+            "NODE_ENV": "development",
+            "ENV": "development"
+          }
+        },
+        "commercial": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts"
+        },
+        "commercial-dev": {
+          "mode": "development",
+          "outputPath": "dist/apps/web/commercial-dev",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "development",
+            "ENV": "development"
+          }
+        },
+        "commercial-qa": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-qa",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "qa"
+          }
+        },
+        "commercial-cloud": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-cloud",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "cloud"
+          }
+        },
+        "commercial-euprd": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-euprd",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "euprd"
+          }
+        },
+        "commercial-euqa": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-euqa",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "euqa"
+          }
+        },
+        "commercial-usdev": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-usdev",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "usdev"
+          }
+        },
+        "commercial-ee": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-ee",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "production",
+            "ENV": "ee"
+          }
+        },
+        "oss-selfhost": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/oss-selfhost",
+          "env": {
+            "ENV": "selfhosted",
+            "NODE_ENV": "production"
+          }
+        },
+        "oss-selfhost-dev": {
+          "mode": "development",
+          "outputPath": "dist/apps/web/oss-selfhost-dev",
+          "env": {
+            "NODE_ENV": "development",
+            "ENV": "selfhosted"
+          }
+        },
+        "commercial-selfhost": {
+          "mode": "production",
+          "outputPath": "dist/apps/web/commercial-selfhost",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "ENV": "selfhosted",
+            "NODE_ENV": "production"
+          }
+        },
+        "commercial-selfhost-dev": {
+          "mode": "development",
+          "outputPath": "dist/apps/web/commercial-selfhost-dev",
+          "webpackConfig": "bitwarden_license/bit-web/webpack.config.js",
+          "main": "bitwarden_license/bit-web/src/main.ts",
+          "env": {
+            "NODE_ENV": "development",
+            "ENV": "selfhosted"
+          }
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/webpack:dev-server",
+      "defaultConfiguration": "oss-dev",
+      "options": {
+        "buildTarget": "web:build",
+        "host": "localhost",
+        "port": 8080
+      },
+      "configurations": {
+        "oss": {
+          "buildTarget": "web:build:oss"
+        },
+        "oss-dev": {
+          "buildTarget": "web:build:oss-dev"
+        },
+        "commercial": {
+          "buildTarget": "web:build:commercial"
+        },
+        "commercial-dev": {
+          "buildTarget": "web:build:commercial-dev"
+        },
+        "commercial-qa": {
+          "buildTarget": "web:build:commercial-qa"
+        },
+        "commercial-cloud": {
+          "buildTarget": "web:build:commercial-cloud"
+        },
+        "commercial-euprd": {
+          "buildTarget": "web:build:commercial-euprd"
+        },
+        "commercial-euqa": {
+          "buildTarget": "web:build:commercial-euqa"
+        },
+        "commercial-usdev": {
+          "buildTarget": "web:build:commercial-usdev"
+        },
+        "commercial-ee": {
+          "buildTarget": "web:build:commercial-ee"
+        },
+        "oss-selfhost": {
+          "buildTarget": "web:build:oss-selfhost"
+        },
+        "oss-selfhost-dev": {
+          "buildTarget": "web:build:oss-selfhost-dev"
+        },
+        "commercial-selfhost": {
+          "buildTarget": "web:build:commercial-selfhost"
+        },
+        "commercial-selfhost-dev": {
+          "buildTarget": "web:build:commercial-selfhost-dev"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/web/jest.config.js"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/web/**/*.ts", "apps/web/**/*.html"]
+      }
+    }
+  }
+}

apps/web/tailwind.config.js

@@ -1,16 +1,17 @@
 /* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const path = require("path");
 const config = require("../../libs/components/tailwind.config.base");
 
 config.content = [
-  "./src/**/*.{html,ts}",
+  path.resolve(__dirname, "./src/**/*.{html,ts}"),
-  "../../libs/components/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/components/src/**/*.{html,ts}"),
-  "../../libs/assets/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/assets/src/**/*.{html,ts}"),
-  "../../libs/auth/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/auth/src/**/*.{html,ts}"),
-  "../../libs/key-management-ui/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/key-management-ui/src/**/*.{html,ts}"),
-  "../../libs/vault/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/vault/src/**/*.{html,ts}"),
-  "../../libs/angular/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/angular/src/**/*.{html,ts}"),
-  "../../libs/tools/generator/components/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../libs/tools/generator/components/src/**/*.{html,ts}"),
-  "../../bitwarden_license/bit-web/src/**/*.{html,ts}",
+  path.resolve(__dirname, "../../bitwarden_license/bit-web/src/**/*.{html,ts}"),
 ];
 config.corePlugins.preflight = true;
 

apps/web/webpack.base.js

@@ -9,17 +9,21 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const webpack = require("webpack");
 
-const config = require("./config.js");
+const config = require(path.resolve(__dirname, "config.js"));
-const pjson = require("./package.json");
+const pjson = require(path.resolve(__dirname, "package.json"));
 
-module.exports.getEnv = function getEnv() {
+module.exports.getEnv = function getEnv(params) {
-  const ENV = process.env.ENV == null ? "development" : process.env.ENV;
+  const ENV = params.env || (process.env.ENV == null ? "development" : process.env.ENV);
   const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
   const LOGGING = process.env.LOGGING != "false";
 
   return { ENV, NODE_ENV, LOGGING };
 };
 
+const DEFAULT_PARAMS = {
+  outputPath: path.resolve(__dirname, "build"),
+};
+
 /**
  *
  * @param {{
@@ -29,10 +33,14 @@ module.exports.getEnv = function getEnv() {
  *      entryModule: string;
  *  };
  *  tsConfig: string;
+ *  outputPath?: string;
+ *  mode?: string;
+ *  env?: string;
  * }} params
  */
 module.exports.buildConfig = function buildConfig(params) {
-  const { ENV, NODE_ENV, LOGGING } = module.exports.getEnv();
+  params = { ...DEFAULT_PARAMS, ...params };
+  const { ENV, NODE_ENV, LOGGING } = module.exports.getEnv(params);
 
   const envConfig = config.load(ENV);
   if (LOGGING) {
@@ -89,6 +97,9 @@ module.exports.buildConfig = function buildConfig(params) {
           loader: "postcss-loader",
           options: {
             sourceMap: true,
+            postcssOptions: {
+              config: path.resolve(__dirname, "postcss.config.js"),
+            },
           },
         },
       ],
@@ -99,7 +110,7 @@ module.exports.buildConfig = function buildConfig(params) {
         {
           loader: "babel-loader",
           options: {
-            configFile: "../../babel.config.json",
+            configFile: path.resolve(__dirname, "../../babel.config.json"),
             cacheDirectory: NODE_ENV !== "production",
           },
         },
@@ -113,43 +124,43 @@ module.exports.buildConfig = function buildConfig(params) {
 
   const plugins = [
     new HtmlWebpackPlugin({
-      template: "./src/index.html",
+      template: path.resolve(__dirname, "src/index.html"),
       filename: "index.html",
       chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main", "styles"],
     }),
     new HtmlWebpackInjector(),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/webauthn.html",
+      template: path.resolve(__dirname, "src/connectors/webauthn.html"),
       filename: "webauthn-connector.html",
       chunks: ["connectors/webauthn", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/webauthn-mobile.html",
+      template: path.resolve(__dirname, "src/connectors/webauthn-mobile.html"),
       filename: "webauthn-mobile-connector.html",
       chunks: ["connectors/webauthn", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/webauthn-fallback.html",
+      template: path.resolve(__dirname, "src/connectors/webauthn-fallback.html"),
       filename: "webauthn-fallback-connector.html",
       chunks: ["connectors/webauthn-fallback", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/sso.html",
+      template: path.resolve(__dirname, "src/connectors/sso.html"),
       filename: "sso-connector.html",
       chunks: ["connectors/sso", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/redirect.html",
+      template: path.resolve(__dirname, "src/connectors/redirect.html"),
       filename: "redirect-connector.html",
       chunks: ["connectors/redirect", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/connectors/duo-redirect.html",
+      template: path.resolve(__dirname, "src/connectors/duo-redirect.html"),
       filename: "duo-redirect-connector.html",
       chunks: ["connectors/duo-redirect", "styles"],
     }),
     new HtmlWebpackPlugin({
-      template: "./src/404.html",
+      template: path.resolve(__dirname, "src/404.html"),
       filename: "404.html",
       chunks: ["styles"],
       // 404 page is a wildcard, this ensures it uses absolute paths.
@@ -157,18 +168,28 @@ module.exports.buildConfig = function buildConfig(params) {
     }),
     new CopyWebpackPlugin({
       patterns: [
-        { from: "./src/.nojekyll" },
+        { from: path.resolve(__dirname, "src/.nojekyll") },
-        { from: "./src/manifest.json" },
+        { from: path.resolve(__dirname, "src/manifest.json") },
-        { from: "./src/favicon.ico" },
+        { from: path.resolve(__dirname, "src/favicon.ico") },
-        { from: "./src/browserconfig.xml" },
+        { from: path.resolve(__dirname, "src/browserconfig.xml") },
-        { from: "./src/app-id.json" },
+        { from: path.resolve(__dirname, "src/app-id.json") },
-        { from: "./src/images", to: "images" },
+        { from: path.resolve(__dirname, "src/images"), to: "images" },
-        { from: "./src/videos", to: "videos" },
+        { from: path.resolve(__dirname, "src/images/icons"), to: "images" },
-        { from: "./src/locales", to: "locales" },
+        { from: path.resolve(__dirname, "src/videos"), to: "videos" },
-        { from: "../../node_modules/qrious/dist/qrious.min.js", to: "scripts" },
+        { from: path.resolve(__dirname, "src/locales"), to: "locales" },
-        { from: "../../node_modules/braintree-web-drop-in/dist/browser/dropin.js", to: "scripts" },
         {
-          from: "./src/version.json",
+          from: path.resolve(__dirname, "../../node_modules/qrious/dist/qrious.min.js"),
+          to: "scripts",
+        },
+        {
+          from: path.resolve(
+            __dirname,
+            "../../node_modules/braintree-web-drop-in/dist/browser/dropin.js",
+          ),
+          to: "scripts",
+        },
+        {
+          from: path.resolve(__dirname, "src/version.json"),
           transform(content, path) {
             return content.toString().replace("process.env.APPLICATION_VERSION", pjson.version);
           },
@@ -203,7 +224,9 @@ module.exports.buildConfig = function buildConfig(params) {
   ];
 
   // ref: https://webpack.js.org/configuration/dev-server/#devserver
-  let certSuffix = fs.existsSync("dev-server.local.pem") ? ".local" : ".shared";
+  let certSuffix = fs.existsSync(path.resolve(__dirname, "dev-server.local.pem"))
+    ? ".local"
+    : ".shared";
   const devServer =
     NODE_ENV !== "development"
       ? {}
@@ -211,8 +234,8 @@ module.exports.buildConfig = function buildConfig(params) {
           server: {
             type: "https",
             options: {
-              key: fs.readFileSync("dev-server" + certSuffix + ".pem"),
+              key: fs.readFileSync(path.resolve(__dirname, "dev-server" + certSuffix + ".pem")),
-              cert: fs.readFileSync("dev-server" + certSuffix + ".pem"),
+              cert: fs.readFileSync(path.resolve(__dirname, "dev-server" + certSuffix + ".pem")),
             },
           },
           // host: '192.168.1.9',
@@ -332,6 +355,15 @@ module.exports.buildConfig = function buildConfig(params) {
           hot: false,
           port: envConfig.dev?.port ?? 8080,
           allowedHosts: envConfig.dev?.allowedHosts ?? "auto",
+          static: {
+            directory: path.resolve(params.outputPath),
+            publicPath: "/",
+          },
+          devMiddleware: {
+            // when running `serve` locally this option writes all built files to `dist`
+            // files are still served from memory, this is just a helpful debug tool
+            writeToDisk: true,
+          },
           client: {
             overlay: {
               errors: true,
@@ -347,15 +379,21 @@ module.exports.buildConfig = function buildConfig(params) {
     devServer: devServer,
     target: "web",
     entry: {
-      "app/polyfills": "./src/polyfills.ts",
+      "app/polyfills": path.resolve(__dirname, "src/polyfills.ts"),
       "app/main": params.app.entry,
-      "connectors/webauthn": "./src/connectors/webauthn.ts",
+      "connectors/webauthn": path.resolve(__dirname, "src/connectors/webauthn.ts"),
-      "connectors/webauthn-fallback": "./src/connectors/webauthn-fallback.ts",
+      "connectors/webauthn-fallback": path.resolve(
-      "connectors/sso": "./src/connectors/sso.ts",
+        __dirname,
-      "connectors/duo-redirect": "./src/connectors/duo-redirect.ts",
+        "src/connectors/webauthn-fallback.ts",
-      "connectors/redirect": "./src/connectors/redirect.ts",
+      ),
-      styles: ["./src/scss/styles.scss", "./src/scss/tailwind.css"],
+      "connectors/sso": path.resolve(__dirname, "src/connectors/sso.ts"),
-      theme_head: "./src/theme.ts",
+      "connectors/duo-redirect": path.resolve(__dirname, "src/connectors/duo-redirect.ts"),
+      "connectors/redirect": path.resolve(__dirname, "src/connectors/redirect.ts"),
+      styles: [
+        path.resolve(__dirname, "src/scss/styles.scss"),
+        path.resolve(__dirname, "src/scss/tailwind.css"),
+      ],
+      theme_head: path.resolve(__dirname, "src/theme.ts"),
     },
     cache:
       NODE_ENV === "production"
@@ -402,7 +440,10 @@ module.exports.buildConfig = function buildConfig(params) {
     resolve: {
       extensions: [".ts", ".js"],
       symlinks: false,
-      modules: [path.resolve("../../node_modules")],
+      modules: [
+        path.resolve(__dirname, "../../node_modules"),
+        path.resolve(process.cwd(), "node_modules"),
+      ],
       fallback: {
         buffer: false,
         util: require.resolve("util/"),
@@ -415,7 +456,7 @@ module.exports.buildConfig = function buildConfig(params) {
     },
     output: {
       filename: "[name].[contenthash].js",
-      path: path.resolve(__dirname, "build"),
+      path: params.outputPath,
       clean: true,
     },
     module: {

apps/web/webpack.config.js

@@ -1,10 +1,29 @@
-const { buildConfig } = require("./webpack.base");
+const path = require("path");
+const { buildConfig } = require(path.resolve(__dirname, "webpack.base"));
 
-module.exports = buildConfig({
+module.exports = (webpackConfig, context) => {
-  configName: "OSS",
+  const isNxBuild = context && context.options;
-  app: {
+
-    entry: "./src/main.ts",
+  if (isNxBuild) {
-    entryModule: "src/app/app.module#AppModule",
+    return buildConfig({
-  },
+      configName: "OSS",
-  tsConfig: "tsconfig.build.json",
+      app: {
-});
+        entry: context.options.main
+          ? path.resolve(context.context.root, context.options.main)
+          : path.resolve(__dirname, "src/main.ts"),
+        entryModule: "src/app/app.module#AppModule",
+      },
+      tsConfig: "apps/web/tsconfig.build.json",
+      outputPath: path.resolve(context.context.root, context.options.outputPath),
+    });
+  } else {
+    return buildConfig({
+      configName: "OSS",
+      app: {
+        entry: path.resolve(__dirname, "src/main.ts"),
+        entryModule: "src/app/app.module#AppModule",
+      },
+      tsConfig: "tsconfig.build.json",
+    });
+  }
+};

bitwarden_license/bit-web/webpack.config.js

@@ -1,10 +1,31 @@
-const { buildConfig } = require("../../apps/web/webpack.base");
+const path = require("path");
+const { buildConfig } = require(path.resolve(__dirname, "../../apps/web/webpack.base"));
 
-module.exports = buildConfig({
+module.exports = (webpackConfig, context) => {
-  configName: "Commercial",
+  const isNxBuild = context && context.options;
-  app: {
+  if (isNxBuild) {
-    entry: "../../bitwarden_license/bit-web/src/main.ts",
+    return buildConfig({
-    entryModule: "../../bitwarden_license/bit-web/src/app/app.module#AppModule",
+      configName: "Commercial",
-  },
+      app: {
-  tsConfig: "../../bitwarden_license/bit-web/tsconfig.build.json",
+        entry: context.options.main
-});
+          ? path.resolve(context.context.root, context.options.main)
+          : path.resolve(__dirname, "src/main.ts"),
+        entryModule: "bitwarden_license/bit-web/src/app/app.module#AppModule",
+      },
+      tsConfig: "bitwarden_license/bit-web/tsconfig.build.json",
+      outputPath:
+        context.context && context.context.root
+          ? path.resolve(context.context.root, context.options.outputPath)
+          : context.options.outputPath,
+    });
+  } else {
+    return buildConfig({
+      configName: "Commercial",
+      app: {
+        entry: path.resolve(__dirname, "src/main.ts"),
+        entryModule: "bitwarden_license/bit-web/src/app/app.module#AppModule",
+      },
+      tsConfig: path.resolve(__dirname, "tsconfig.build.json"),
+    });
+  }
+};