fix(SSR): Fixed SSR routes

Fixed routing for server sde rendering

.env.example

@@ -1,2 +1,2 @@
-BASE_PATH="."
-PORT=8080
+BASE_PATH=""
+PORT=3000

config/webpack.dev.ts

@@ -82,6 +82,7 @@ export const config: webpack.Configuration = strategy(
         new DotenvPlugin({
             sample: '.env.example',
             path: '.env',
+            allowEmptyValues: true,
         }),
     ],
     devServer: {

config/webpack.prod.ts

@@ -85,6 +85,7 @@ export const config: webpack.Configuration = strategy(
         new DotenvPlugin({
             sample: '.env.example',
             path: `.env.${process.env.NODE_ENV}`,
+            allowEmptyValues: true,
         }),
     ],
 });

config/webpack.server.ts

@@ -1,5 +1,6 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
+import * as DotenvPlugin from 'webpack-dotenv-plugin';
 
 export const config: webpack.Configuration = {
     entry: {
@@ -50,4 +51,13 @@ export const config: webpack.Configuration = {
             },
         ],
     },
+
+    plugins: [
+        new webpack.EnvironmentPlugin(['NODE_ENV']),
+        new DotenvPlugin({
+            sample: '.env.example',
+            path: `.env.${process.env.NODE_ENV}`,
+            allowEmptyValues: true,
+        }),
+    ],
 };

package.json

@@ -40,6 +40,7 @@
         "@types/enzyme-to-json": "1.5.0",
         "@types/express": "4.11.0",
         "@types/extract-text-webpack-plugin": "3.0.0",
+        "@types/get-port": "^3.2.0",
         "@types/history": "4.6.2",
         "@types/html-webpack-plugin": "2.30.1",
         "@types/jest": "21.1.8",
@@ -86,12 +87,14 @@
         "express": "4.16.2",
         "extract-text-webpack-plugin": "3.0.2",
         "file-loader": "1.1.5",
+        "get-port": "3.2.0",
         "history": "4.7.2",
         "html-webpack-plugin": "2.30.1",
         "http-status-enum": "1.0.2",
         "husky": "0.14.3",
         "identity-obj-proxy": "3.0.0",
         "jest": "21.2.1",
+        "json-d-ts": "1.0.1",
         "node-sass": "4.7.2",
         "optimize-css-assets-webpack-plugin": "3.2.0",
         "raf": "3.4.0",

src/client/containers/AppContainer.tsx

@@ -4,8 +4,6 @@ import { connect, MapDispatchToProps } from 'react-redux';
 import * as uniqId from 'uniqid';
 
 import { CheckBox, IItem } from '../components/checkbox/CheckBoxComponent';
-import * as CheckboxItemsJson from '../components/checkbox/tests/__mocks__/CheckboxItems.json';
-import * as CheckboxSelectedItemsJson from '../components/checkbox/tests/__mocks__/CheckboxSelectedItems.json';
 import { addCheckbox } from '../modules/checkbox/actions';
 import { IRootState } from '../core/reducers';
 
@@ -29,12 +27,12 @@ class App extends React.Component<IAppProps, IAppState> {
         addAction: addCheckbox,
     };
 
-    selectedItems = new Map(CheckboxSelectedItemsJson);
+    selectedItems = new Map();
 
     constructor(props: IAppProps) {
         super(props);
 
-        this.state = { items: CheckboxItemsJson };
+        this.state = { items: [] };
     }
 
     handleClick = (item: IItem, checked: boolean) => {
@@ -58,8 +56,6 @@ class App extends React.Component<IAppProps, IAppState> {
     };
 
     render() {
-        // const { match: { url } } = this.props;
-        // console.log(this.props);
         return (
             <div>
                 <button onClick={this.handleAdd}>Add more</button>

src/client/core/initialState.tsx

@@ -0,0 +1,6 @@
+export const initialState = {
+    checkBoxItems: [
+        { id: '1', label: '1', value: '1' },
+        { id: '2', label: '2', value: '2' },
+    ],
+};

src/client/core/routes.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Switch } from 'react-router-dom';
+import { Route } from 'react-router4-with-layouts';
+
+import { HomePage } from '../pages/home/HomePage';
+import { DemoPage } from '../pages/demo/DemoPage';
+import { LoginPage } from '../pages/login/LoginPage';
+import { DefaultLayout } from '../layouts/default/DefaultLayout';
+import { EmptyLayout } from '../layouts/empty/EmptyLayout';
+
+export const CoreRoutes = () => (
+    <Switch>
+        <Route path="/" component={HomePage} exact={true} layout={DefaultLayout} />
+        <Route path="/demo" component={DemoPage} layout={DefaultLayout} />
+        <Route path="/login" component={LoginPage} layout={EmptyLayout} />
+    </Switch>
+);

src/client/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
+    <base href="/" />
 </head>
 <body>
     <div id="app">

src/client/index.tsx

@@ -2,47 +2,33 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { AppContainer } from 'react-hot-loader';
-import { Switch, BrowserRouter as Router } from 'react-router-dom';
-import { Route } from 'react-router4-with-layouts';
+import { BrowserRouter } from 'react-router-dom';
 
 import { configureStore } from './core/store';
-import { DefaultLayout } from './layouts/default/DefaultLayout';
-import { HomePage } from './pages/home/HomePage';
-import { LoginPage } from './pages/login/LoginPage';
-import { EmptyLayout } from './layouts/empty/EmptyLayout';
-import { DemoPage } from './pages/demo/DemoPage';
+import { CoreRoutes } from './core/routes';
+import { initialState } from './core/initialState';
 
-const store = configureStore();
+const store = configureStore(initialState);
 
-ReactDOM.render(
-    <AppContainer>
-        <Provider store={store}>
-            <Router basename={`${process.env.BASE_PATH}`}>
-                <Switch>
-                    <Route path="/" component={HomePage} exact={true} layout={DefaultLayout} />
-                    <Route path="/demo" component={DemoPage} layout={DefaultLayout} />
-                    <Route path="/login" component={LoginPage} layout={EmptyLayout} />
-                </Switch>
-            </Router>
-        </Provider>
-    </AppContainer>,
-    document.getElementById('app')  as HTMLElement,
-);
+function reactRender(App: any) {
+    ReactDOM.hydrate(
+        <AppContainer>
+            <Provider store={store}>
+                <BrowserRouter basename={process.env.BASE_PATH ? process.env.BASE_PATH : ''}>
+                    <App />
+                </BrowserRouter>
+            </Provider>
+        </AppContainer>,
+        document.getElementById('app')  as HTMLElement,
+    );
+}
+
+reactRender(CoreRoutes);
 
 if (module.hot) {
-    module.hot.accept('./layouts/DefaultLayout', () => {
-        const NextApp = require('./layouts/default/DefaultLayout').default;
-        ReactDOM.render(
-            <AppContainer>
-                <Provider store={store}>
-                    <Router basename={`${process.env.BASE_PATH}`}>
-                        <Switch>
-                            <Route path="/" component={NextApp} layout={DefaultLayout} />
-                        </Switch>
-                    </Router>
-                </Provider>
-            </AppContainer>,
-            document.getElementById('app')  as HTMLElement,
-        );
+    module.hot.accept('./core/routes', () => {
+        const NextApp = require('./core/routes').default;
+
+        reactRender(NextApp);
     });
 }

src/client/pages/demo/DemoPage.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import * as styles from './DemoPage.scss';
 import AppContainer from '../../containers/AppContainer';
-import { addCheckbox } from '../../modules/checkbox/actions';
 
 export interface IDemoPageProps {
 }
@@ -19,7 +18,7 @@ export class DemoPage extends React.Component<IDemoPageProps, IDemoPageState> {
         return (
             <main className={styles.page}>
                 Component name: DemoPage
-                <AppContainer addAction={addCheckbox} items={[{ id: '', label: '', value: '' }]} />
+                <AppContainer />
             </main>
         );
     }

src/client/pages/demo/tests/__snapshots__/DemoPage.test.tsx.snap

@@ -5,17 +5,6 @@ exports[`DemoPage.js matches snapshot 1`] = `
   className="page"
 >
   Component name: DemoPage
-  <Connect(App)
-    addAction={[Function]}
-    items={
-      Array [
-        Object {
-          "id": "",
-          "label": "",
-          "value": "",
-        },
-      ]
-    }
-  />
+  <Connect(App) />
 </main>
 `;

src/server/index.tsx

@@ -4,26 +4,16 @@ import * as React from 'react';
 import HttpStatus from 'http-status-enum';
 import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
-import { StaticRouter, Switch } from 'react-router-dom';
-import { Route } from 'react-router4-with-layouts';
-// import { routerMiddleware } from 'react-router-redux';
-// import createHistory from 'history/createMemoryHistory';
-// import { createStore, applyMiddleware } from 'redux';
-// import { createEpicMiddleware } from 'redux-observable';
+import { StaticRouter } from 'react-router-dom';
+import * as getPort from 'get-port';
 
-// import reducer, { epics, State } from './redux/reducer';
-// import AppContainer from './modules/AppContainer';
-import { DefaultLayout } from '../client/layouts/default/DefaultLayout';
-import { EmptyLayout } from '../client/layouts/empty/EmptyLayout';
-import { LoginPage } from '../client/pages/login/LoginPage';
-import { DemoPage } from '../client/pages/demo/DemoPage';
-import { HomePage } from '../client/pages/home/HomePage';
 import { configureStore } from '../client/core/store';
 import { IItem } from '../client/components/checkbox/CheckBoxComponent';
+import { CoreRoutes } from '../client/core/routes';
+import { initialState } from '../client/core/initialState';
 
-const normalizePort = (val: number | string): number | string | boolean => {
-    const nPort: number = typeof val === 'string' ? parseInt(val, 10) : val;
-    return isNaN(nPort) ? val : nPort >= 0 ? nPort : false;
+const normalizePort = (val: number | string): number => {
+    return typeof val === 'string' ? parseInt(val, 10) : val;
 };
 
 const renderHtml = (html: string, preLoadedState: IItem[]) => (
@@ -49,8 +39,8 @@ const renderHtml = (html: string, preLoadedState: IItem[]) => (
     `
 );
 
-const defaultPort = 8080;
-const port = normalizePort(process.env.PORT || defaultPort);
+// const defaultPort = 8080;
+const port = normalizePort(process.env.PORT || 8080);
 const app = express();
 
 app.use('/js', express.static(path.join('dist', 'js'), { redirect: false }));
@@ -61,18 +51,17 @@ app.use((req: express.Request, res: express.Response) => {
         routerMiddleware(createHistory()),
         createEpicMiddleware(epics),
     ));*/
-    console.log(req);
-    const store = configureStore();
 
+    const store = configureStore(initialState);
     const context: { url?: string } = {};
     const html = renderToString(
-<Provider store={store}>
-            <StaticRouter basename={`${process.env.BASE_PATH}`}>
-                <Switch>
-                    <Route path="/" component={HomePage} exact={true} layout={DefaultLayout} />
-                    <Route path="/demo" component={DemoPage} layout={DefaultLayout} />
-                    <Route path="/login" component={LoginPage} layout={EmptyLayout} />
-                </Switch>
+        <Provider store={store}>
+            <StaticRouter
+                basename={process.env.BASE_PATH ? process.env.BASE_PATH : ''}
+                location={req.url}
+                context={context}
+            >
+                <CoreRoutes />
             </StaticRouter>
         </Provider>,
     );
@@ -83,4 +72,7 @@ app.use((req: express.Request, res: express.Response) => {
     }
 });
 
-app.listen(port, () => console.log(`App is listening on ${port}`));
+getPort({ port }).then((rPort) => {
+    // tslint:disable-next-line:no-console
+    app.listen(rPort, () => console.log(`App is listening on http://localhost:${rPort}`));
+});

tsconfig.json

@@ -44,5 +44,8 @@
     "include": [
         "src/client/**/*",
         "typings/**/*"
+    ],
+    "files": [
+        "./typings/typings.d.ts"
     ]
 }