Commit 394cde1f authored by Matija Obreza's avatar Matija Obreza
Browse files

SSR JSS

parent 71f0cc61
Pipeline #3996 passed with stages
in 2 minutes and 56 seconds
......@@ -5,6 +5,7 @@ const commonConfig = require('./webpack-base.config.js');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = webpackMerge(commonConfig, {
......@@ -17,10 +18,10 @@ module.exports = webpackMerge(commonConfig, {
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
// new webpack.LoaderOptionsPlugin({
// // minimize: true,
// // debug: false
// }),
// https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build
new webpack.DefinePlugin({
......@@ -29,7 +30,7 @@ module.exports = webpackMerge(commonConfig, {
}
}),
new webpack.optimize.UglifyJsPlugin({
new UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
......@@ -39,7 +40,7 @@ module.exports = webpackMerge(commonConfig, {
screw_ie8: true,
warnings: false
},
comments: false
comments: true
}),
......
......@@ -8,9 +8,9 @@ import rootReducer from 'reducers/index';
import thunk from 'redux-thunk';
import routes from 'ui/routes';
require('../styles/font-awesome/css/font-awesome.css');
require('../styles/bootstrap/css/bootstrap.min.css');
require('../styles/app.styles.scss');
// JSS & MUI
import {MuiThemeProvider} from 'material-ui/styles';
import theme from 'ui/theme';
declare const __PRELOADED_STATE__: any;
......@@ -21,9 +21,31 @@ const initialState = __PRELOADED_STATE__ === undefined ? {} : __PRELOADED_STATE_
const store = composeEnhancers(applyMiddleware(thunk, routerMiddleware(browserHistory)))(createStore)(rootReducer, initialState);
const appHistory = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
if (__PRELOADED_STATE__ === undefined) {
// no SSR
ReactDOM.render(
<Provider store={ store }>
<MuiThemeProvider theme={ theme }>
<Router children={ routes } history={ appHistory }/>
</MuiThemeProvider>
</Provider>,
document.getElementById('the-app'),
);
document.getElementById('the-app'),
);
} else {
// SSR
ReactDOM.hydrate(
<Provider store={ store }>
<MuiThemeProvider theme={ theme }>
<Router children={ routes } history={ appHistory } />
</MuiThemeProvider>
</Provider>,
document.getElementById('the-app'),
() => {
// We don't need the static css any more once we have launched our application.
console.log('Removing SSR-rendered styles');
// const ssStyles = document.getElementById('server-side-styles');
// ssStyles.parentNode.removeChild(ssStyles);
},
);
}
......@@ -13,3 +13,7 @@ require('roboto-fontface/css/roboto/roboto-fontface.css');
// require('flexboxgrid/dist/flexboxgrid.css');
// leaflet map
require('leaflet/dist/leaflet.css');
require('../styles/font-awesome/css/font-awesome.css');
require('../styles/bootstrap/css/bootstrap.min.css');
require('../styles/app.styles.scss');
import * as React from 'react';
import {renderToString} from 'react-dom/server';
import { renderToString } from 'react-dom/server';
import {RouterContext, match} from 'react-router';
import {createLocation} from 'history';
import {Provider} from 'react-redux';
import { createLocation } from 'history';
import { Provider } from 'react-redux';
import * as serialize from 'serialize-javascript';
import {browserHistory} from 'react-router';
import {routerMiddleware} from 'react-router-redux';
import {createStore, applyMiddleware} from 'redux';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from 'reducers';
// import { create as createJss } from 'jss';
// import jssPreset from 'jss-preset-default';
import { JssProvider, SheetsRegistry } from 'react-jss';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { MuiThemeProvider } from 'material-ui/styles';
import theme from 'ui/theme';
import routes from 'ui/routes';
import fetchComponentData from './fetchComponentData';
import checkAuthToken from './checkAuthToken';
......@@ -38,19 +45,29 @@ const prerenderer = (html) => (req, res) => {
// todo
}
function renderView() {
// const jss = createJss(jssPreset());
const sheets = new SheetsRegistry();
const generateClassName = createGenerateClassName();
const InitialView = (
<Provider store={ store }>
<Provider store={ store }>
<JssProvider generateClassName={ generateClassName } registry={ sheets }>
<MuiThemeProvider theme={ theme } sheetsManager={ new Map() }>
<RouterContext { ...renderProps } />
</ Provider >
</MuiThemeProvider>
</JssProvider>
</ Provider >
);
const componentHTML = renderToString(InitialView);
console.log('serverCSS:', sheets.toString());
console.log('componentHTML:', componentHTML);
const initialState = store.getState();
console.log('initialState:', initialState);
return html.replace('SERVER_RENDERED_HTML', componentHTML)
.replace('SERVER_RENDERED_CSS', sheets.toString())
.replace('SERVER_RENDERED_STATE', serialize(initialState, {isJSON: true}))
.replace('__SERVER_RENDER_TIME__', `${Date.now() - startTime}ms`);
}
......
......@@ -17,6 +17,8 @@
<script>
__PRELOADED_STATE__ = SERVER_RENDERED_STATE;
</script>
<style type="text/css" id="server-side-styles">
SERVER_RENDERED_CSS
</style>
</body>
</html>
......@@ -2,7 +2,6 @@ import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as cookies from 'es-cookie';
import {MuiThemeProvider} from 'material-ui/styles';
import {checkTokenRequest, logoutRequest, loginAppRequest, loginUser} from 'actions/login';
import {clearCookies, saveCookies} from 'utilities';
......@@ -10,7 +9,6 @@ import {ROLE_CLIENT} from 'constants/userRoles';
import {serverInfoRequest} from 'actions/serverInfo';
import {setAppMounted} from 'actions/appMounted';
import theme from './theme';
import Header from './layout/Header';
import Footer from './layout/Footer';
......@@ -74,14 +72,12 @@ class App extends React.Component<IAppProps, any> {
return (
(this.state.checked || ssr) ?
(
<MuiThemeProvider theme={ theme }>
<div>
<Header login={ login } logoutRequest={ logoutRequest }
router={ router } loginAppRequest={ loginAppRequest } />
{ children }
<Footer serverInfo={ serverInfo } serverInfoRequest={ serverInfoRequest } />
</div>
</MuiThemeProvider>
<div>
<Header login={ login } logoutRequest={ logoutRequest }
router={ router } loginAppRequest={ loginAppRequest } />
{ children }
<Footer serverInfo={ serverInfo } serverInfoRequest={ serverInfoRequest } />
</div>
)
: null
);
......
......@@ -13,7 +13,7 @@ import { loadDataset } from 'actions/dataset';
interface IDatasetDetailProps extends React.ClassAttributes<any> {
classes: any;
params: any;
uuid: string;
dataset: Dataset;
loadDataset: (uuid: string) => Promise<Dataset>;
}
......@@ -51,17 +51,22 @@ const styles = (theme) => ({
class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
protected static needs = [({ params: { uuid } }) => loadDataset(uuid)];
protected static needs = [({ uuid }) => loadDataset(uuid)];
public componentDidMount() {
const { dataset, loadDataset, params: { uuid } } = this.props;
const { dataset, loadDataset, uuid } = this.props;
if (!dataset) {
loadDataset(uuid);
}
}
public render() {
const { classes, dataset } = this.props;
const { classes, uuid, dataset } = this.props;
if (dataset && dataset.uuid !== uuid) {
return null;
}
return (
<div className={ classes.root }>
<Grid container spacing={ 0 }>
......@@ -96,6 +101,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
const mapStateToProps = (state, ownProps) => ({
dataset: state.datasets.currentDataset,
uuid: ownProps.params.uuid,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment