CH-109 update frontend libraries

Author: filippomc

application-templates/flask-server/backend/requirements.txt

@@ -0,0 +1,5 @@
+connexion[swagger-ui]==2.14.2
+swagger-ui-bundle >= 0.0.2
+python_dateutil >= 2.6.0
+setuptools >= 21.0.0
+Flask<3.0.0

application-templates/flask-server/backend/setup.py

@@ -0,0 +1,41 @@
+# coding: utf-8
+
+import sys
+from setuptools import setup, find_packages
+
+NAME = "__APP_NAME__"
+VERSION = "1.0.0"
+
+# To install the library, run the following
+#
+# python setup.py install
+#
+# prerequisite: setuptools
+# http://pypi.python.org/pypi/setuptools
+
+REQUIRES = [
+    "connexion>=2.0.2",
+    "swagger-ui-bundle>=0.0.2",
+    "python_dateutil>=2.6.0",
+    "pyjwt>=2.6.0",
+    "cloudharness"
+]
+
+setup(
+    name=NAME,
+    version=VERSION,
+    description="__APP_NAME__",
+    author_email="cloudharness@metacell.us",
+    url="",
+    keywords=["OpenAPI", "__APP_NAME__"],
+    install_requires=REQUIRES,
+    packages=find_packages(),
+    package_data={'': ['openapi/openapi.yaml']},
+    include_package_data=True,
+    entry_points={
+        'console_scripts': ['__APP_NAME__=__APP_NAME__.__main__:main']},
+    long_description="""\
+    __APP_NAME__
+    """
+)
+

application-templates/webapp/Dockerfile

@@ -7,28 +7,28 @@ ENV APP_DIR=/app
 
 WORKDIR ${APP_DIR}
 COPY frontend/package.json ${APP_DIR}
-COPY frontend/package-lock.json ${APP_DIR}
-RUN npm ci
+COPY frontend/yarn.lock ${APP_DIR}
+RUN yarn install --frozen-lockfile --timeout 60000
 
 COPY frontend ${APP_DIR}
-RUN npm run build
+RUN yarn build
 
 #####
-
 FROM $CLOUDHARNESS_FLASK
-
-ENV MODULE_NAME=__APP_NAME__
+ENV MODULE_NAME=samples
 
 ENV WORKERS=2
 ENV PORT=8080
 
 COPY backend/requirements.txt /usr/src/app/
 
-RUN pip3 install --no-cache-dir -r requirements.txt
+RUN --mount=type=cache,target=/root/.cache python -m pip install --upgrade pip &&\
+    pip3 install -r requirements.txt  --prefer-binary
 
 COPY backend/ /usr/src/app
-RUN pip3 install -e .
 
 COPY --from=frontend app/dist/ /usr/src/app/www
 
-ENTRYPOINT gunicorn --workers=$WORKERS --bind=0.0.0.0:$PORT $MODULE_NAME.__main__:app
+RUN pip3 install -e .
+
+CMD gunicorn --workers=$WORKERS --bind=0.0.0.0:$PORT $MODULE_NAME.__main__:app --timeout 180

application-templates/webapp/frontend/package.json

@@ -11,10 +11,10 @@
     "prestart": "eslint . --color --fix",
     "start": "webpack serve --progress  --env DOMAIN=http://localhost:5000 --config webpack.config.dev.js",
     "start:dev": "webpack serve --progress  --env.DOMAIN=https://__APP_NAME__.cloudharness.metacell.us --config webpack.config.dev.js",
-    "start:minikube": "webpack serve --progress --env DOMAIN=http://__APP_NAME__.cloudharness.local --config webpack.config.dev.js"
+    "start:local": "webpack serve --progress --env DOMAIN=http://__APP_NAME__.ch.local --config webpack.config.dev.js"
   },
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "dependencies": {
     "axios": "^0.21.1",
     "react": "^16.12.0",
@@ -28,31 +28,33 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-minify": "^0.5.1",
     "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "^7.1.2",
     "copy-webpack-plugin": "^6.2.1",
-    "css-loader": "^3.4.2",
+    "css-loader": "^5.2.4",
+    "dotenv": "^16.0.2",
     "eslint": "5.16.0",
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "file-loader": "^5.0.2",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.5.0",
+    "image-webpack-loader": "^8.1.0",
     "less": "^3.10.3",
-    "less-loader": "^5.0.0",
+    "less-loader": "^6.1.2",
     "less-vars-to-js": "^1.3.0",
     "raw-loader": "^4.0.2",
     "style-loader": "^1.1.3",
-    "typescript": "^3.9.3",
-    "webpack": "^5.0.0",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1",
-    "webpack-merge": "^5.0.0"
+    "ts-loader": "^9.0.0",
+    "typescript": "^4.8.3",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.5.0",
+    "webpack-merge": "^5.7.0"
   }
 }

application-templates/webapp/frontend/src/assets/icon.png

@@ -7,11 +7,11 @@ const test = new TestApi();
 const RestTest = () => {
   const [result, setResult] = useState(null);
   useEffect(() => {
-    test.ping().then(r => setResult(r));
+    test.ping().then(r => setResult(r), () => setResult({ data: "API error"}));
   }, []);
 
 
-  return result && <p>Backend answered: { result.data } </p>
+  return result ? <p>Backend answered: { result.data } </p> : <p>Backend did not answer</p>
 }
 
 export default RestTest;

application-templates/webapp/frontend/src/components/RestTest.tsx

@@ -20,10 +20,13 @@ module.exports = env => {
 
 
   const devServer = {
-    contentBase: path.join(__dirname, 'dist'),
+    static: [{
+      directory: path.resolve(__dirname, 'dist'),
+      publicPath: '/',
+    }],
     compress: true,
+    https: env.DOMAIN.includes("https"),
     port: Number(env.devPort),
-    disableHostCheck: true,
     historyApiFallback: true,
     proxy: {
       '/api/': {

application-templates/webapp/frontend/webpack.config.dev.js

@@ -1,11 +1,11 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 const copyPaths = [
-  { from: path.resolve(__dirname, "src/assets"), to: 'assets' },
+  { from: path.resolve(__dirname, "src/assets"), to: "assets" },
 ];
 
 module.exports = function webpacking(envVariables) {
@@ -14,36 +14,43 @@ module.exports = function webpacking(envVariables) {
     env = {};
   }
   if (!env.mode) {
-    env.mode = 'production';
+    env.mode = "production";
   }
 
-
-  console.log('####################');
-  console.log('####################');
-  console.log('BUILD bundle with parameters:');
-  console.log( env);
-  console.log('####################');
-  console.log('####################');
+  console.log("####################");
+  console.log("####################");
+  console.log("BUILD bundle with parameters:");
+  console.log(env);
+  console.log("####################");
+  console.log("####################");
 
   const { mode } = env;
-  const devtool = env.mode === 'source-map';
-
+  const devtool = "source-map";
 
   const output = {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].[contenthash].js'
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].[contenthash].js",
+    publicPath: "/"
   };
 
   const module = {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader'
+        loader: "babel-loader",
       },
       {
-        test: /\.ts|tsx?$/,
-        loader: "awesome-typescript-loader"
+        test: /\.ts(x?)$/,
+        include: path.resolve(__dirname, 'src'),
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+            },
+          }
+        ]
       },
       {
         test: /\.(css)$/,
@@ -53,7 +60,8 @@ module.exports = function webpacking(envVariables) {
           },
           {
             loader: "css-loader",
-          }],
+          },
+        ],
       },
       {
         test: /\.less$/,
@@ -76,27 +84,33 @@ module.exports = function webpacking(envVariables) {
       },
       {
         test: /\.(png|jpg|gif|eot|woff|woff2|svg|ttf)$/,
-        loader: 'file-loader'
+        use: [
+          "file-loader",
+          {
+            loader: "image-webpack-loader",
+            options: {
+              bypassOnDebug: true, // webpack@1.x
+              disable: true, // webpack@2.x and newer
+            },
+          },
+        ],
       },
-
-    ]
+    ],
   };
 
   const resolve = {
-    extensions: ['*', '.js', '.json', '.ts', '.tsx', '.jsx'],
-    symlinks: false
+    extensions: ["*", ".js", ".json", ".ts", ".tsx", ".jsx"],
+    symlinks: false,
   };
 
- 
-
   const plugins = [
     new CleanWebpackPlugin(),
     new CopyWebpackPlugin({ patterns: copyPaths }),
     new CompressionPlugin(),
     new HtmlWebpackPlugin({
-      template: 'src/index.ejs',
-      favicon: path.join(__dirname, 'src/assets/icon.png')
-    })
+      template: "src/index.ejs",
+      favicon: path.join(__dirname, "src/assets/icon.png"),
+    }),
   ];
 
   return {
@@ -105,6 +119,6 @@ module.exports = function webpacking(envVariables) {
     output,
     module,
     resolve,
-    plugins
+    plugins,
   };
 };

application-templates/webapp/frontend/webpack.config.js

@@ -7,11 +7,11 @@ ENV APP_DIR=/app
 
 WORKDIR ${APP_DIR}
 COPY frontend/package.json ${APP_DIR}
-COPY frontend/package-lock.json ${APP_DIR}
-RUN npm ci
+COPY frontend/yarn.lock ${APP_DIR}
+RUN yarn install --frozen-lockfile --timeout 60000
 
 COPY frontend ${APP_DIR}
-RUN npm run build
+RUN yarn build
 
 #####
 FROM $CLOUDHARNESS_FLASK