Test repxory2

Dockerfile

@@ -12,3 +12,4 @@ WORKDIR /app
 COPY --from=builder /app .
 EXPOSE 3000
 CMD ["yarn", "start"]
+

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.2'
 
 services:
   frontend:
-    user: 1000:1000
+#    user: 1000:1000
     build:
       context: .
       dockerfile: Dockerfile

package.json

@@ -6,10 +6,10 @@
     "license": "MIT",
     "scripts": {
         "dev": "node index.js",
-        "build": "NODE_ENV=production NEXT_TELEMETRY_DISABLED=1 next build",
-        "export": "yarn build && next export -o .dist",
+        "build": "next build",
+        "export": "npm build && next export -o .dist",
         "export:start": "serve .dist -p 8080",
-        "start": "cross-env NODE_ENV=production node src/server",
+        "start": "cross-env NODE_ENV=production BABEL_DISABLE_CACHE=1 node index.js",
         "storybook": "NODE_ENV=storybook start-storybook -p 6006 -c ./test/storybook",
         "storybook:build": "build-storybook",
         "bootstrap:build": "node-sass ./src/resources/assets/styles/dist/bootstrap.scss ./src/resources/assets/styles/dist/bootstrap.css",
@@ -33,23 +33,23 @@
     },
     "lint-staged": {
         "*.js": [
-            "yarn lint:js --fix",
+            "npm lint:js --fix",
             "git add --force"
         ]
     },
     "husky": {
         "hooks": {
             "commit-msg": "validate-commit-msg",
-            "pre-commit": "yarn lint:staged"
+            "pre-commit": "npm lint:staged"
         }
     },
     "dependencies": {
         "@babel/core": "^7.7.7",
         "@babel/node": "^7.7.7",
         "@babel/preset-env": "7.7.6",
         "@babel/register": "7.7.4",
-        "@zeit/next-css": "^1.0.1",
-        "@zeit/next-sass": "^1.0.1",
+        "@zeit/next-css": "0.2.1-canary.4",
+        "@zeit/next-sass": "0.2.1-canary.4",
         "apisauce": "1.1.1",
         "axios": "^0.19.1",
         "babel-loader": "8.0.6",
@@ -69,17 +69,19 @@
         "es6-promise": "^4.2.8",
         "express": "4.17.1",
         "formik": "2.0.7",
+        "html-webpack-plugin": "3.2.0",
         "js-cookie": "2.2.1",
         "jwt-decode": "2.2.0",
         "lodash": "^4.17.15",
+        "mini-css-extract-plugin": "0.9.0",
         "next": "9.2.1",
         "next-compose-plugins": "^2.2.0",
         "next-fonts": "^0.19.0",
         "next-i18next": "4.0.0",
         "next-redux-saga": "4.1.2",
         "next-redux-wrapper": "^3.0.0",
         "next-routes": "^1.4.2",
-        "node-sass": "4.13.0",
+        "node-sass": "^4.13.1",
         "prop-types": "^15.7.2",
         "react": "16.12.0",
         "react-dom": "16.12.0",
@@ -90,42 +92,6 @@
         "seamless-immutable": "7.1.4",
         "seamless-immutable-mergers": "^7.1.0",
         "styled-components": "4.4.1",
-        "webpack": "^4.41.2",
         "yup": "^0.27.0"
-    },
-    "devDependencies": {
-        "@storybook/addon-actions": "^5.2.8",
-        "@storybook/addon-links": "^5.2.8",
-        "@storybook/addon-viewport": "^5.2.8",
-        "@storybook/addons": "^5.2.8",
-        "@storybook/react": "^5.2.8",
-        "babel-eslint": "10.0.3",
-        "bootstrap": "4.4.1",
-        "cz-conventional-changelog": "3.0.2",
-        "cz-customizable": "6.2.0",
-        "enzyme": "^3.10.0",
-        "enzyme-adapter-react-16": "^1.15.1",
-        "eslint": "6.7.2",
-        "eslint-config-airbnb": "18.0.1",
-        "eslint-config-airbnb-base": "14.0.0",
-        "eslint-import-resolver-webpack": "0.12.1",
-        "eslint-plugin-flowtype": "4.5.2",
-        "eslint-plugin-import": "2.19.1",
-        "eslint-plugin-jsx-a11y": "6.2.3",
-        "eslint-plugin-react": "7.17.0",
-        "eslint-plugin-react-hooks": "^2.3.0",
-        "eslint-plugin-redux-saga": "1.1.3",
-        "flow-bin": "0.113.0",
-        "http-proxy-middleware": "^0.20.0",
-        "husky": "3.1.0",
-        "jest-cli": "25.0.0",
-        "jest-styled-components": "6.3.4",
-        "lint-staged": "9.5.0",
-        "pre-commit": "1.2.2",
-        "react-test-renderer": "^16.12.0",
-        "serve": "^11.2.0",
-        "standard-version": "7.1.0",
-        "storybook-addon-i18n": "5.1.13",
-        "validate-commit-msg": "2.14.0"
     }
 }

src/config/site.js

@@ -1,6 +1,4 @@
-import {asset} from '@utils/uri';
-
-export default [
+module.exports = [
     {
         siteCode: 'default',
         siteName: 'IMNEXT-JS',
@@ -21,7 +19,7 @@ export default [
         },
         templateCode: 'default',
         image: {
-            loginLogo: asset('site/default/images/login-logo.png'),
+            loginLogo: 'site/default/images/login-logo.png',
         },
         theme: {
             pwaStartUpBackground: '#0e0f13',

src/pages/example/contact.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {withTranslation} from '@library/i18next/configureI18Next';
 import Layout from '@layouts/example';
-import Container from '@container/example/Contact';
+import Container from '@container/Example/Contact';
 
 type Props = {
     t: (localeKey: string) => string,

src/pages/example/index.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {withTranslation} from '@library/i18next/configureI18Next';
 import Layout from '@layouts/example';
-import Container from '@container/example/Home';
+import Container from '@container/Example/Home';
 import StartupAction from '@library/redux/store/Startup/Reducer';
 
 type Props = {

src/pages/example/news/detail.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {withTranslation} from '@library/i18next/configureI18Next';
 import Layout from '@layouts/example';
-import Container from '@container/example/News/Detail';
+import Container from '@container/Example/News/Detail';
 
 type Props = {
     t: (localeKey: string) => string,

src/pages/example/news/index.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {withTranslation} from '@library/i18next/configureI18Next';
 import Layout from '@layouts/example';
-import Container from '@container/example/News/List';
+import Container from '@container/Example/News/List';
 
 type Props = {
     t: (localeKey: string) => string,

src/pages/example/profile.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {withTranslation} from '@library/i18next/configureI18Next';
 import Layout from '@layouts/example';
-import Container from '@container/example/Profile';
+import Container from '@container/Example/Profile';
 
 type Props = {
     t: (localeKey: string) => string,

src/resources/components/atoms/A2/A.js

@@ -0,0 +1,47 @@
+// @flow
+
+import React, {Children} from 'react';
+import {useRouter} from 'next/router';
+import Link from 'next/link';
+// import Link from '@library/nextRoute';
+import getConfig from 'next/config';
+
+const {publicRuntimeConfig: {assetPrefix}} = getConfig();
+
+type Props = {
+    activeClassName: string,
+    children: React.ReactNode,
+    href: string,
+};
+
+const addPreFixPath = (path, preFixPath = '') => {
+    let newPath = `${preFixPath}/${path}`;
+    do {
+        newPath = newPath.replace('//', '/');
+    } while (newPath.indexOf('//') >= 0);
+    return newPath;
+};
+
+const A = (props: Props) => {
+    const {children, activeClassName, href, ...otherProps} = props;
+    const {pathname} = useRouter();
+    const child = Children.only(<a>{children}</a>);
+    const childClassName = child.props.className || '';
+
+    const className = pathname === otherProps.href
+        ? `${childClassName} ${activeClassName}`.trim()
+        : childClassName;
+
+    otherProps.as = addPreFixPath(href, `/${assetPrefix}`);
+    otherProps.href = addPreFixPath(href, '/[siteCode]');
+
+    return (
+        <Link {...otherProps}>
+            {React.cloneElement(child, {
+                className: className || null,
+            })}
+        </Link>
+    );
+};
+
+export default A;

src/resources/components/atoms/A2/index.js

@@ -0,0 +1,3 @@
+import A from './A';
+
+export default A;

src/resources/layouts/example.js

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import get from 'lodash/get';
 import {i18n, withTranslation} from '@library/i18next/configureI18Next';
 import {useRouter} from 'next/router';
-import A from '@components/atoms/A';
+import A from '@components/atoms/A2';
 import screen from '@themes/Screen';
 import {asset} from '@utils/uri';
 
@@ -36,11 +36,11 @@ const Layout = (props: Props) => {
 
     const menu = [
         {
-            route: 'example', pathname: '/example', text: t('example:menu.home'), isHome: true,
+            route: 'example', href: '/example', text: t('example:menu.home'), isHome: true,
         },
-        {route: 'example-news', pathname: '/example/news', text: t('example:menu.news')},
-        {route: 'example-contact', pathname: '/example/contact', text: t('example:menu.contact')},
-        {route: 'example-profile', pathname: '/example/profile', text: t('example:menu.profile')},
+        {route: 'example-news', href: '/example/news', text: t('example:menu.news')},
+        {route: 'example-contact', href: '/example/contact', text: t('example:menu.contact')},
+        {route: 'example-profile', href: '/example/profile', text: t('example:menu.profile')},
     ];
 
     return (
@@ -50,7 +50,7 @@ const Layout = (props: Props) => {
                     <div className="row align-items-center">
                         {/* LOGO */}
                         <div className="col col-md-2">
-                            <A route="home">
+                            <A href="/example/contact">
                                 <Logo>IMNEXT.js</Logo>
                             </A>
                         </div>
@@ -66,10 +66,10 @@ const Layout = (props: Props) => {
                                                     active: (pathname === row.pathname)
                                                         || (get(row, 'isHome', false) === false && pathname.indexOf(row.href) === 0),
                                                 })}
-                                                key={row.route}
+                                                key={row.href}
                                             >
-                                                <A route={row.route}>
-                                                    <a>{row.text}</a>
+                                                <A href={row.href}>
+                                                    {row.text}
                                                 </A>
                                             </NavItem>
                                         ))}
@@ -131,7 +131,7 @@ Layout.getInitialProps = async () => ({
     namespacesRequired: ['example'],
 });
 
-export default withTranslation()(Layout);
+export default withTranslation('example')(Layout);
 
 const Footer = styled.footer`
     background-image: url(${asset('images/example/footer-bg.jpg')});
@@ -221,7 +221,7 @@ const Button = styled.button`
     }
 `;
 
-const Logo = styled.a`
+const Logo = styled.span`
     font-size: 20px;
     font-weight: 700;
 `;

src/server/index.js

@@ -1,28 +1,39 @@
 import express from 'express';
-import next from 'next';
+import nextCreate from 'next';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import nextI18NextMiddleware from 'next-i18next/middleware';
 import nextI18next from '../library/i18next/configureI18Next';
-import {getRequestHandler} from '../library/nextRoute';
+// import {getRequestHandler} from '../library/nextRoute';
 import siteGlobalMiddleware from './middleware/siteGlobalMiddleware';
-import reverseProxyMiddleware from './middleware/reverseProxyMiddleware';
+// import reverseProxyMiddleware from './middleware/reverseProxyMiddleware';
 import mockApi from './mockApi';
 
 const port = process.env.PORT || 3000;
 const isDevMode = process.env.NODE_ENV !== 'production';
-const app = next({dev: isDevMode});
-const handle = getRequestHandler(app);
-const proxyMiddlewareApiBaseUrl = process.env.PROXY_MIDDLEWARE_API_BASE_URL;
+const app = nextCreate({dev: isDevMode});
+const handle = app.getRequestHandler();
+// const reverseProxyMiddleware = require('./middleware/reverseProxyMiddleware');
+// const proxyMiddlewareApiBaseUrl = process.env.PROXY_MIDDLEWARE_API_BASE_URL;
 
 (async () => {
     await app.prepare();
     const server = express();
 
     // Develop mode use reProxy api
-    if (isDevMode && proxyMiddlewareApiBaseUrl) {
-        server.use(reverseProxyMiddleware);
-    }
+    // if (isDevMode && proxyMiddlewareApiBaseUrl) {
+    //     server.use(reverseProxyMiddleware);
+    // }
+
+    // Develop mode use reProxy api
+    // if (isDevMode) {
+    //     const proxyMiddlewareApiBaseUrl = process.env.PROXY_MIDDLEWARE_API_BASE_URL;
+    //
+    //     if (proxyMiddlewareApiBaseUrl) {
+    //         server.use(reverseProxyMiddleware);
+    //     }
+    //
+    // }
 
     // Middleware
     server.use(bodyParser.json());
@@ -33,6 +44,26 @@ const proxyMiddlewareApiBaseUrl = process.env.PROXY_MIDDLEWARE_API_BASE_URL;
     // Mock Backend Api
     server.use('/mockApi', mockApi);
 
+    // server.get('*', (req, res, next) => {
+    //     console.log('req.originalUrl', req.originalUrl);
+    //     req.url = isDevMode ? req.originalUrl
+    //         : req.originalUrl.replace('/ap-main', '');
+    //         // : `/ap-main/${req.originalUrl}`;
+    //
+    //     handle(req, res);
+    // });
+
+    server.use((err, _, res, __) => {
+        res.sendStatus(500);
+    });
+
+    const subRoute = '/ap-main';
+    app.setAssetPrefix(subRoute);
+    server.use((req, _, next) => {
+        req.url = req.url.replace(subRoute, '');
+        next();
+    });
+
     server.get('*', (req, res) => handle(req, res));
 
     await server.listen(port);

src/server/middleware/reverseProxyMiddleware.js

@@ -17,6 +17,11 @@ const devProxy = {
         pathRewrite: {'^/api': '/'},
         changeOrigin: true,
     },
+    '/ap-main': {
+        target: 'http://localhost:3000/',
+        pathRewrite: {'^/ap-main': '/'},
+        changeOrigin: true,
+    },
 };
 
 Object.keys(devProxy).forEach(context => {