Web: Files: init Files build and loading (Moved out from CRA)

This commit is contained in:
Alexey Safronov 2020-12-07 10:49:07 +03:00
parent 70aa6c023d
commit 71b6e9f27d
15 changed files with 343 additions and 95 deletions

View File

@ -6,7 +6,8 @@
"packages/asc-web-common",
"web/ASC.Web.Login",
"web/ASC.Web.Client",
"products/ASC.People/Client"
"products/ASC.People/Client",
"products/ASC.Files/Client"
],
"useWorkspaces": true
}

View File

@ -6,7 +6,8 @@
"packages/asc-web-common",
"web/ASC.Web.Login",
"web/ASC.Web.Client",
"products/ASC.People/Client"
"products/ASC.People/Client",
"products/ASC.Files/Client"
],
"scripts": {
"wipe": "rm -fr node_modules yarn.lock web/**/node_modules products/**/node_modules",

View File

@ -0,0 +1,15 @@
FROM node:12
WORKDIR /usr/src/app
COPY package.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build
EXPOSE 5008
CMD [ "yarn", "build:start" ]

View File

@ -1,71 +1,76 @@
{
"name": "@appserver/files",
"version": "0.1.0",
"private": true,
"homepage": "/products/files",
"dependencies": {
"@welldone-software/why-did-you-render": "^4.2.5",
"connected-react-router": "6.6.1",
"copy-to-clipboard": "^3.2.0",
"history": "4.10.1",
"i18next": "19.0.3",
"i18next-browser-languagedetector": "4.0.1",
"i18next-xhr-backend": "3.2.2",
"lodash": "4.17.19",
"lodash-es": "4.17.15",
"merge": "^1.2.1",
"node-sass": "^4.13.0",
"oidc-client": "^1.10.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-content-loader": "^5.1.1",
"react-device-detect": "^1.11.14",
"react-dom": "^16.12.0",
"react-i18next": "11.3.0",
"react-redux": "7.1.3",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"redux": "4.0.5",
"redux-thunk": "2.3.0",
"reselect": "^4.0.0",
"styled-components": "^5.0.0"
"private": "true",
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=5008 npx serve",
"start": "webpack-dev-server --mode development",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t files",
"docker:run": "docker run -p 5008:5008 files"
},
"devDependencies": {
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^6.0.3",
"customize-cra": "^1.0.0",
"prettier": "2.1.2",
"react-app-rewired": "^2.1.6",
"react-scripts": "3.4.3",
"@babel/core": "7.9.6",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "7.9.4",
"@svgr/webpack": "^5.5.0",
"babel-loader": "8.1.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "4.5.0",
"i18next": "^19.8.4",
"json-loader": "^0.5.7",
"react-i18next": "^11.7.3",
"source-map-loader": "^1.1.2",
"style-loader": "1.2.1",
"webpack": "5.0.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@redux-dynostore/core": "^3.1.1",
"@redux-dynostore/react-redux": "^3.1.1",
"attr-accept": "^2.2.2",
"axios": "^0.21.0",
"email-addresses": "^3.1.0",
"i18next-xhr-backend": "^3.2.2",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"rc-tree": "^4.0.0-beta.2",
"re-resizable": "^6.9.0",
"react": "^16.14.0",
"react-autosize-textarea": "^7.1.0",
"react-content-loader": "^5.1.4",
"react-custom-scrollbars": "^4.2.1",
"react-device-detect": "^1.14.0",
"react-dom": "^16.14.0",
"react-dropzone": "^11.2.4",
"react-onclickoutside": "^6.9.0",
"react-redux": "^7.2.2",
"react-resize-detector": "^5.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-string-format": "^0.1.0",
"react-svg": "^11.1.2",
"react-text-mask": "^5.4.3",
"react-toastify": "^6.1.0",
"react-tooltip": "^4.2.11",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.5",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"rimraf": "3.0.2",
"webpack-bundle-analyzer": "^3.8.0",
"workbox-build": "^5.1.3"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"analyse": "node analyse.js",
"start": "react-app-rewired start",
"build": "rimraf ./build && react-app-rewired build && npm run build-sw && npm run clean-cra-sw",
"build-sw": "node ./src/sw-build.js",
"clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js",
"test": "cross-env CI=true react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"resize-image": "^0.1.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"sjcl": "^1.0.8",
"styled-components": "^5.2.1"
}
}

View File

@ -0,0 +1,22 @@
import React, { useEffect } from "react";
import { useStore } from "react-redux";
import dynamic from "@redux-dynostore/react-redux";
import { attachReducer } from "@redux-dynostore/core";
//import rootReducer from "./store/rootReducer";
//import portalReducer from "./store/portal/reducers";
const FilesContent = (props) => {
const store = useStore();
// useEffect(() => {
// console.log("Store object", store);
// store.reducerManager.add("portal", portalReducer);
// return store.reducerManager.remove("portal");
// }, []);
return <div>FILES PAGE</div>;
};
export default FilesContent;
//export default dynamic("portal", attachReducer(portalReducer))(FilesContent);

View File

@ -0,0 +1,13 @@
import { Provider } from "react-redux";
import store from "studio/store";
import Frame from "studio/frame";
import "./custom.scss";
const FilesPage = () => (
<Provider store={store}>
<Frame page="files" />
</Provider>
);
ReactDOM.render(<FilesPage />, document.getElementById("app"));

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Files</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

View File

@ -1,29 +1,31 @@
import("./FilesPage");
//import "./wdyr";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
// import React from "react";
// import ReactDOM from "react-dom";
// import { Provider } from "react-redux";
import store from "./store/store";
import "./custom.scss";
import App from "./App";
// import store from "./store/store";
// import "./custom.scss";
// import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { ErrorBoundary, utils } from "@appserver/common";
const { redirectToDefaultPage } = utils;
// import * as serviceWorker from "./serviceWorker";
// import { ErrorBoundary, utils } from "@appserver/common";
// const { redirectToDefaultPage } = utils;
redirectToDefaultPage();
// redirectToDefaultPage();
ReactDOM.render(
<Provider store={store}>
<ErrorBoundary>
<App />
</ErrorBoundary>
</Provider>,
document.getElementById("root")
);
// ReactDOM.render(
// <Provider store={store}>
// <ErrorBoundary>
// <App />
// </ErrorBoundary>
// </Provider>,
// document.getElementById("root")
// );
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();
// // If you want your app to work offline and load faster, you can change
// // unregister() to register() below. Note this comes with some pitfalls.
// // Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.register();

View File

@ -0,0 +1,102 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
output: {
publicPath: "http://localhost:5008/",
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: [".jsx", ".js", ".json"],
fallback: {
crypto: false,
},
},
devServer: {
port: 5008,
contentBase: path.join(__dirname, "public"),
},
module: {
rules: [
{
test: /\.m?js/,
type: "javascript/auto",
resolve: {
fullySpecified: false,
},
},
{
test: /\.react.svg$/,
use: ["@svgr/webpack"],
},
{ test: /\.json$/, loader: "json-loader" },
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", "@babel/preset-env"],
plugins: [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
],
},
},
"source-map-loader",
],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "files",
filename: "remoteEntry.js",
remotes: {
studio: "studio@http://localhost:5001/remoteEntry.js",
files: "files@http://localhost:5008/remoteEntry.js",
},
exposes: {
"./page": "./src/FilesContent.jsx",
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
],
};

View File

@ -10,6 +10,6 @@ COPY . .
RUN yarn build
EXPOSE 8080
EXPOSE 5002
CMD [ "yarn", "build:start" ]

View File

@ -35,6 +35,8 @@
"@babel/runtime": "^7.12.5",
"@redux-dynostore/core": "^3.1.1",
"@redux-dynostore/react-redux": "^3.1.1",
"@redux-dynostore/react-redux-subspace": "^3.1.1",
"@redux-dynostore/redux-subspace": "^3.1.1",
"attr-accept": "^2.2.2",
"axios": "^0.21.0",
"email-addresses": "^3.1.0",

View File

@ -7,12 +7,10 @@ import portalReducer from "./store/portal/reducers";
const PeopleContent = (props) => {
const store = useStore();
// useEffect(() => {
// console.log("Store object", store);
// store.reducerManager.add("portal", portalReducer);
// return store.reducerManager.remove("portal");
// }, []);
useEffect(() => {
console.log("Store object", store);
return store.detachReducers(["portal"]);
}, []);
return <div>PEOPLE PAGE</div>;
};

View File

@ -21,6 +21,7 @@ const {
const Home = React.lazy(() => import("studio/home"));
const Login = React.lazy(() => import("login/page"));
const People = React.lazy(() => import("people/page"));
const Files = React.lazy(() => import("files/page"));
const HomeRoute = () => (
<React.Suspense fallback={null}>
@ -46,6 +47,14 @@ const PeopleRoute = () => (
</React.Suspense>
);
const FilesRoute = () => (
<React.Suspense fallback={null}>
<ErrorBoundary>
<Files />
</ErrorBoundary>
</React.Suspense>
);
const Frame = ({ items = [], page = "home", ...rest }) => {
useEffect(() => {
//utils.removeTempContent();
@ -88,6 +97,10 @@ const Frame = ({ items = [], page = "home", ...rest }) => {
path={["/products/people", "/products/people/filter"]}
component={PeopleRoute}
/>
<PrivateRoute
path={["/products/files", "/products/files/filter"]}
component={FilesRoute}
/>
<PublicRoute
exact
path={[

View File

@ -80,6 +80,7 @@ module.exports = {
remotes: {
studio: "studio@http://localhost:5001/remoteEntry.js",
people: "people@http://localhost:5002/remoteEntry.js",
files: "files@http://localhost:5008/remoteEntry.js",
login: "login@http://localhost:5020/remoteEntry.js",
},
exposes: {

View File

@ -1896,6 +1896,13 @@
resolved "https://registry.yarnpkg.com/@redux-dynostore/core/-/core-3.1.1.tgz#50fad2ea470d26e4d1525532dbfe3e9eb252ccea"
integrity sha512-7tenoqwDr2DQ4L1i9PyAWhs2SZmmrIhq7bBeFXys3D52bxMx6uJ1hMlyyqT/D7VH+6+LifsdVFcnkR3kB8VDUA==
"@redux-dynostore/react-redux-subspace@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@redux-dynostore/react-redux-subspace/-/react-redux-subspace-3.1.1.tgz#a6186bc0ce0a6ea23658dd85a9030d6f11d0317e"
integrity sha512-BxUeP5e9nRQ0aCcF5qvCJyT7yGltru7hG0Jr/XStOEffKhEIGya7xX8xBa0RdruumXS3EXrNP+xsQtz3UfUZdw==
dependencies:
react-redux-subspace "^6.1.0"
"@redux-dynostore/react-redux@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@redux-dynostore/react-redux/-/react-redux-3.1.1.tgz#e469e49ccfefb3a49bb1a8167c6b08dd7e86497d"
@ -1905,6 +1912,14 @@
hoist-non-react-statics "^3.3.0"
recompose "^0.30.0"
"@redux-dynostore/redux-subspace@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@redux-dynostore/redux-subspace/-/redux-subspace-3.1.1.tgz#5976d101435a5ff6dcf6cd571cfedbd3bd377b2d"
integrity sha512-GvzV1DJ3/V6w2Nzycy5EqtGUPrwk6xJB295gYSIQAxXWRf6dU0YJnQwEazJgiPf4d64PY0Fp8htf2qaUFw7fYg==
dependencies:
"@redux-dynostore/core" "^3.1.1"
redux-subspace "^6.1.0"
"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
version "5.4.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@ -2049,6 +2064,14 @@
"@types/minimatch" "*"
"@types/node" "*"
"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/html-minifier-terser@^5.0.0":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@ -2104,11 +2127,34 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
"@types/prop-types@*":
version "15.7.3"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
"@types/q@^1.5.1":
version "1.5.4"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
"@types/react-redux@^7.1.1":
version "7.1.11"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.11.tgz#a18e8ab3651e8e8cc94798934927937c66021217"
integrity sha512-OjaFlmqy0CRbYKBoaWF84dub3impqnLJUrz4u8PRjDzaa4n1A2cVmjMV81shwXyAD5x767efhA8STFGJz/r1Zg==
dependencies:
"@types/hoist-non-react-statics" "^3.3.0"
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react@*", "@types/react@^17.0.0":
version "17.0.0"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
dependencies:
"@types/prop-types" "*"
csstype "^3.0.2"
"@types/source-list-map@*":
version "0.1.2"
resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@ -7585,6 +7631,17 @@ react-onclickoutside@^6.9.0:
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
react-redux-subspace@^6.1.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/react-redux-subspace/-/react-redux-subspace-6.2.0.tgz#13a5dbb9c1c89802592ffa31e4e8ab01c2e98732"
integrity sha512-rQWLuopllXsLudS7jaW+eU6OHb9CXs4qD8Tyw1L8PMxOi1aDc5L/ho7xE4eyJwjP/ufAlZZk043CMjM4wCeneA==
dependencies:
"@types/react" "^17.0.0"
"@types/react-redux" "^7.1.1"
hoist-non-react-statics "^3.3.0"
prop-types "^15.7.2"
redux-subspace "^6.2.0"
react-redux@^7.2.2:
version "7.2.2"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
@ -7894,12 +7951,17 @@ redux-devtools-extension@^2.13.8:
resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
redux-subspace@^6.1.0, redux-subspace@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/redux-subspace/-/redux-subspace-6.2.0.tgz#cb39919bfaa00f807f19d206a1dd3f2d277468ac"
integrity sha512-Hi4Pmg7BUcIbw6xB+w2GeG+BS6EXTG/sk15Xs5jYKk2txXJstsGgD57Zn38HzomPslqTiLTHw3MA/rjhbmFV4Q==
redux-thunk@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
redux@^4.0.5:
redux@^4.0.0, redux@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==