[Don't merge in Testing]Backend - Build service testing

template/package.json

@@ -14,6 +14,7 @@
     "web": "cross-env TARGET=web NODE_ENV=development webpack-dev-server --hot --open --config webpack.web.config.js",
     "ts": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.ts.config.js",
     "web:build": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.web.config.js",
+    "web-bs:build": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.wbs.config.js",
     "web-sdk": "cross-env TARGET=wsdk NODE_ENV=development gulp webSdk",
     "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
     "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
@@ -192,4 +193,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

template/webpack.bs.commons.js

@@ -0,0 +1,159 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and
+documentation (the “Materials”) are owned by Agora Lab, Inc. and its licensors.
+The Materials may not be accessed, used, modified, or distributed for any
+purpose without a license from Agora Lab, Inc. Use without a license or in
+violation of any license terms and conditions (including use for any purpose
+competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
+*********************************************
+*/
+/**
+ * Common Webpack configuration to be used across web and electron's renderer
+ * process
+ */
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const isDevelopment = process.env.NODE_ENV === 'development';
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {
+    getCustomizationApiPath,
+    customizationDummyPath,
+} = require('./customization.config');
+
+const isElectron = ['linux', 'windows', 'mac'].includes(process.env.TARGET);
+const isReactSdk = process.env.TARGET === 'rsdk';
+const isWebSdk = process.env.TARGET === 'wsdk';
+const isSdk = isReactSdk || isWebSdk;
+
+module.exports = {
+    // Adds React Refresh webpack plugin for webpack dev server hmr
+    plugins: [
+        // Using html webpack plugin to utilize our index.html
+        !isSdk &&
+        new HtmlWebpackPlugin({
+            title: "base-build",
+            template: isElectron ? 'electron/index.html' : 'web/index.html',
+        }),
+        isDevelopment &&
+        !isSdk &&
+        new ReactRefreshWebpackPlugin({
+            overlay: false,
+        }),
+    ].filter(Boolean),
+    resolve: {
+        alias: {
+            // Using react-native web to translate UI
+            'react-native$': 'react-native-web',
+            // Using rtm bridge to translate React Native RTM SDK calls to web SDK calls
+            'agora-react-native-rtm$': path.join(
+                __dirname,
+                'bridge/rtm/web/index.ts',
+            ),
+            // Using rtc bridge to translate React Native RTC SDK calls to web SDK calls for web and linux
+            // Using rtc bridge to translate React Native RTC SDK calls to electron SDK calls for windows and mac
+            'react-native-agora$': path.join(__dirname, 'bridge/rtc/webNg/index.ts'),
+            'customization-api': path.join(__dirname, 'customization-api/index.ts'),
+            'customization-implementation': path.join(
+                __dirname,
+                'customization-implementation/index.ts',
+            ),
+            customization: path.join(
+                __dirname,
+                isSdk ? customizationDummyPath : getCustomizationApiPath(),
+            ),
+            'agora-react-native-rtm/lib/typescript/src': path.join(
+                __dirname,
+                'bridge/rtm/web/index.ts',
+            ),
+        },
+        // Adds platform specific extensions and OS specific extensions
+        // .web.tsx works for web specific code
+        // .electron.tsx works for electron specific code
+        // .linux.tsx works for OS(linux) specific electron code
+        extensions: [
+            `.${process.env.TARGET}.tsx`,
+            `.${process.env.TARGET}.ts`,
+            isElectron && '.electron.tsx',
+            isElectron && '.electron.ts',
+            isSdk && '.sdk.ts',
+            isSdk && '.sdk.tsx',
+            isSdk && '.web.ts',
+            isSdk && '.web.tsx',
+            '.tsx',
+            '.ts',
+            '.jsx',
+            '.js',
+            '.node',
+        ].filter(Boolean),
+    },
+    // Enable source maps during development
+    devtool: isDevelopment ? 'eval-cheap-module-source-map' : undefined,
+    module: {
+        rules: [
+            {
+                // Use babel to transpile all js, ts, jsx and tsx files
+                test: /\.[jt]sx?$/,
+                exclude: /node_modules/, // don't transpile the files under node_modules
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        cacheDirectory: true, // enables caching in babel
+                        configFile: false,
+                        presets: [
+                            '@babel/preset-react', // transforms tsx into normal ts
+                            [
+                                '@babel/preset-typescript', // transforms ts into js
+                                {
+                                    allExtensions: true,
+                                    isTSX: true,
+                                },
+                            ],
+                            [
+                                '@babel/preset-env', // smartly transforms js into es5-es6
+                                {
+                                    targets: {
+                                        node: 'current',
+                                    },
+                                },
+                            ],
+                        ],
+                        plugins: [
+                            // Adds support for class properties
+                            ['transform-define'],
+                            '@babel/plugin-proposal-optional-chaining',
+                            '@babel/plugin-proposal-class-properties',
+                            isDevelopment && !isSdk && require.resolve('react-refresh/babel'),
+                        ].filter(Boolean),
+                    },
+                },
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                    {
+                        loader: 'file-loader',
+                    },
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(wasm)$/i,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            outputPath: 'wasm',
+                            name: '[name].[ext]',
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+};

template/webpack.wbs.config.js

@@ -0,0 +1,42 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+const commons = require('./webpack.bs.commons');
+const { merge } = require('webpack-merge');
+const path = require('path');
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+module.exports = merge(commons, {
+    // Enable optimizations in production
+    mode: isDevelopment ? 'development' : 'production',
+    // Main entry point for the web application
+    entry: {
+        main: './index.web.js',
+    },
+    output: {
+        path: path.resolve(__dirname, `../Builds/web`),
+    },
+    // Webpack dev server config
+    devServer: {
+        port: 9000,
+        // https: true,
+        historyApiFallback: true, // Support for react-router
+        static: './', // same as contentBase from webpack v4 config
+        client: {
+            overlay: false,
+        },
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+        },
+    },
+});