Skip to content

Commit

Permalink
CH-109 update frontend libraries
Browse files Browse the repository at this point in the history
  • Loading branch information
filippomc committed Jan 19, 2024
1 parent d4c03cf commit c5451ca
Show file tree
Hide file tree
Showing 17 changed files with 7,556 additions and 8,909 deletions.
5 changes: 5 additions & 0 deletions application-templates/flask-server/backend/requirements.txt
Original file line number Diff line number Diff line change
@@ -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
41 changes: 41 additions & 0 deletions application-templates/flask-server/backend/setup.py
Original file line number Diff line number Diff line change
@@ -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="[email protected]",
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__
"""
)

18 changes: 9 additions & 9 deletions application-templates/webapp/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
24 changes: 13 additions & 11 deletions application-templates/webapp/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
Binary file modified application-templates/webapp/frontend/src/assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
7 changes: 5 additions & 2 deletions application-templates/webapp/frontend/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/': {
Expand Down
80 changes: 47 additions & 33 deletions application-templates/webapp/frontend/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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)$/,
Expand All @@ -53,7 +60,8 @@ module.exports = function webpacking(envVariables) {
},
{
loader: "css-loader",
}],
},
],
},
{
test: /\.less$/,
Expand All @@ -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, // [email protected]
disable: true, // [email protected] 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 {
Expand All @@ -105,6 +119,6 @@ module.exports = function webpacking(envVariables) {
output,
module,
resolve,
plugins
plugins,
};
};
6 changes: 3 additions & 3 deletions applications/samples/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit c5451ca

Please sign in to comment.