Merge pull request #104 from 15100399015/dev

Optimize the build process and Manage environment variables using.env

solidui-web/.eslintignore

@@ -20,6 +20,7 @@ node_modules*/*
 dist/*
 public
 scripts
+config
 docker
 coverage
 src/components/Chat/index.tsx

solidui-web/.gitignore

@@ -24,6 +24,6 @@
 
 # production
 /dist
-
+.env.*
 # misc
 .DS_Store

solidui-web/README.md

@@ -0,0 +1,30 @@
+If you want to run or build this web project
+
+ensure that the nodejs environment is installed
+
+then run `code ./solidui-web` and `yarn install` or `npm install`,
+
+then create `.evn.dev` and `.env.prod` file in the `solidui-web`folder
+
+The basic contents are as follows
+
+```shell
+# .env.prod
+NODE_ENV=production
+
+BASE_ENV=""
+```
+
+```shell
+# .env.dev
+NODE_ENV=development
+
+BASE_ENV=""
+# proxy address，
+# If solidui server is running locally: http://localhost:12345
+PROXY_SERVER=http://*********:***
+# local serve port
+SERVER_PORT=3000
+
+```
+

solidui-web/config/env.js

@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const productionVariable = [
+    { name: "NODE_ENV", default: "production" },
+    { name: "BASE_ENV", default: "" },
+]
+const developmentVariable = [
+    { name: "NODE_ENV", default: "development" },
+    { name: "BASE_ENV", default: "" },
+    { name: "PROXY_SERVER", default: "http://localhost:12345" },
+    { name: "SERVER_PORT", default: 3000 },
+]
+
+module.exports = {
+    "production": productionVariable,
+    "development": developmentVariable,
+    filter(isDev = true, originEnvObj = {}) {
+        const newObj = {}
+        const dev = developmentVariable.map((v) => v.name)
+        const prod = productionVariable.map((v) => v.name)
+        Object.entries(originEnvObj).forEach(([key, value]) => {
+            if (typeof value !== "string" && typeof value !== "number") return
+            if ((isDev && dev.includes(key)) || (!isDev && prod.includes(key))) {
+                newObj[key] = value;
+            }
+        })
+        return newObj
+    }
+}

solidui-web/config/paths.js

@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+
+const contextDir = path.join(__dirname, '../')
+
+module.exports = {
+    // app directory
+    appDir: contextDir,
+    // source directory
+    appSrcDir: path.join(contextDir, "src"),
+    // output directory
+    outputDir: path.join(contextDir, 'dist'),
+    // staticAssetsDir directory
+    staticAssetsDir: path.join(contextDir, 'public'),
+    // html file
+    appHtml: path.join(contextDir, "public/index.html"),
+    // entry js file
+    appMainJs: path.join(contextDir, "src/index.tsx"),
+
+    contextDir,
+}

solidui-web/scripts/webpack.analysis.js → solidui-web/config/webpack.analysis.js

@@ -16,13 +16,17 @@
  */
 
 const prodConfig = require('./webpack.prod.js')
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
-const smp = new SpeedMeasurePlugin()
 const { merge } = require('webpack-merge')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 
-module.exports = smp.wrap(merge(prodConfig, {
+/**
+ * We're going to remove the speed-measure-webpack-plugin here
+ * because speed-measure-webpack-plugin will conflict with mini-css-extract-plugin
+ * more info please check issue https://github.com/webpack-contrib/mini-css-extract-plugin/issues/744
+ * This may be the alternative https://webpack.js.org/configuration/other-options/#profile
+ */
+module.exports = merge(prodConfig, {
   plugins: [
-    new BundleAnalyzerPlugin()
+    new BundleAnalyzerPlugin(),
   ]
-}))
+})

solidui-web/scripts/webpack.base.js → solidui-web/config/webpack.base.js

@@ -21,34 +21,37 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const themeVars = require('./theme')
 const webpackBar = require('webpackbar');
+const { name: appName } = require("../package.json")
+const { appMainJs, outputDir, appSrcDir, appHtml } = require("./paths")
+const envVariate = require("./env")
 const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
-  entry: path.join(__dirname, '../src/index.tsx'),
+  entry: appMainJs,
   output: {
     filename: 'static/js/[name].[chunkhash:8].js',
-    path: path.join(__dirname, '../dist'),
+    path: outputDir,
     clean: true,
     publicPath: '/',
   },
   resolve: {
     extensions: ['.js', '.tsx', '.ts'],
     alias: {
-      '@': path.join(__dirname, '../src')
+      '@': appSrcDir
     },
-		// [issue fix] react-markdown, react-syntax-highlighter common deps property-information with different version
-		// if set modules, webpack will search property-information in root node_modules, this may cause error
-		// ERROR in ./node_modules/hastscript/factory.js 4:16-57
-		// Module not found: Error: Can't resolve 'property-information/normalize' in '/..../SolidUI/solidui-web/node_modules/hastscript'
+    // [issue fix] react-markdown, react-syntax-highlighter common deps property-information with different version
+    // if set modules, webpack will search property-information in root node_modules, this may cause error
+    // ERROR in ./node_modules/hastscript/factory.js 4:16-57
+    // Module not found: Error: Can't resolve 'property-information/normalize' in '/..../SolidUI/solidui-web/node_modules/hastscript'
     // modules: [path.resolve(__dirname, '../node_modules')]
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         include: [
-          path.resolve(__dirname, '../src'),
-					path.resolve(__dirname, '../node_modules/@szhsin/react-menu')
+          appSrcDir,
+          path.resolve(__dirname, '../node_modules/@szhsin/react-menu')
           // path.resolve(__dirname, '../node_modules/antd')
         ],
         use: [
@@ -60,10 +63,10 @@ module.exports = {
       {
         test: /\.less$/,
         include: [
-					path.resolve(__dirname, '../src'),
-					path.resolve(__dirname, '../node_modules/antd'),
-					path.resolve(__dirname, '../node_modules/rc-select')
-				],
+          appSrcDir,
+          path.resolve(__dirname, '../node_modules/antd'),
+          path.resolve(__dirname, '../node_modules/rc-select')
+        ],
         use: [
           isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
@@ -81,44 +84,21 @@ module.exports = {
       },
       {
         test: /\.(js|jsx|ts|tsx)$/,
-        include: [path.resolve(__dirname, '../src')],
+        include: [appSrcDir],
         use: [
           'thread-loader',
           'babel-loader'
         ]
       },
       {
         test: /\.svg$/i,
-        include: [path.resolve(__dirname, '../src')],
+        include: [appSrcDir],
         issuer: /\.[jt]sx?$/,
         use: [
           { loader: 'thread-loader' },
           { loader: 'babel-loader', },
           { loader: '@svgr/webpack', options: { icon: true, typescript: true, svgo: false, mome: true } }
         ],
-        // 根据条件识别资源（暂时用不到）
-        // oneOf: [
-        //   {
-        //     resourceQuery: { not: [/asset/] },
-        //     use: [
-        //       { loader: 'thread-loader' },
-        //       { loader: 'babel-loader', },
-        //       { loader: '@svgr/webpack', options: { icon: true, typescript: true, svgo: false, mome: true } }
-        //     ],
-        //   },
-        //   {
-        //     resourceQuery: { and: [/asset/] },
-        //     type: 'asset',
-        //     parser: {
-        //       dataUrlCondition: {
-        //         maxSize: 10 * 1024,
-        //       }
-        //     },
-        //     generator: {
-        //       filename: 'static/images/[name].[contenthash:8][ext]',
-        //     },
-        //   }
-        // ]
       },
       {
         test: /.(png|jpg|jpeg|gif)$/,
@@ -160,17 +140,23 @@ module.exports = {
   },
   plugins: [
     new webpackBar({
-      color:"#C142DA"
+      color: "#3771FA",
+      name: appName,
     }),
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '../public/index.html'),
+      template: appHtml,
       inject: true,
     }),
     new webpack.DefinePlugin({
-      'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV)
+      "process.env": JSON.stringify(envVariate.filter(isDev, process.env)),
+      "process.env.APP_NAME": JSON.stringify(process.APP_NAME),
+      "process.env.APP_VERSION": JSON.stringify(process.env.APP_VERSION),
     }),
   ],
   cache: {
     type: 'filesystem',
+    store: 'pack',
   }
 }
+
+

solidui-web/scripts/webpack.dev.js → solidui-web/config/webpack.dev.js

@@ -15,45 +15,46 @@
  * limitations under the License.
  */
 
-const path = require('path')
 const { merge } = require('webpack-merge')
 const baseConfig = require('./webpack.base')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const { staticAssetsDir } = require('./paths')
 
 module.exports = merge(baseConfig, {
   stats: "minimal",
   mode: 'development',
   devtool: 'eval-cheap-module-source-map',
+  infrastructureLogging: { level: 'none' },
   devServer: {
-		port: 3000,
+    port: process.env.SERVER_PORT,
     compress: false,
     hot: true,
     historyApiFallback: true,
     static: {
-      directory: path.join(__dirname, '../public'),
+      directory: staticAssetsDir,
+    },
+    proxy: {
+      '/solidui/models/generate': {
+        target: 'http://localhost:5110',
+        changeOrigin: true,
+        pathRewrite: {}
+      },
+      '/solidui/kernel/restart': {
+        target: 'http://localhost:5010',
+        changeOrigin: true,
+        pathRewrite: {}
+      },
+      '/solidui/models/api/api': {
+        target: 'http://localhost:5110',
+        changeOrigin: true,
+        pathRewrite: {}
+      },
+      '/solidui': {
+        target: process.env.PROXY_SERVER,
+        changeOrigin: true,
+        pathRewrite: {}
+      }
     },
-		proxy: {
-			'/solidui/models/generate': {
-				target: 'http://localhost:5110',
-				changeOrigin: true,
-				pathRewrite: {}
-			},
-			'/solidui/kernel/restart': {
-				target: 'http://localhost:5010',
-				changeOrigin: true,
-				pathRewrite: {}
-			},
-			'/solidui/models/api/api': {
-				target: 'http://localhost:5110',
-				changeOrigin: true,
-				pathRewrite: {}
-			},
-			'/solidui': {
-				target: 'http://localhost:12345',
-				changeOrigin: true,
-				pathRewrite: {}
-			}
-		},
   },
   plugins: [
     new ReactRefreshWebpackPlugin(),