react-serverside/server.js at master · webdevsyd/react-serverside · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import path from 'path';
import express from 'express';
import webpack from 'webpack';
import fs from 'file-system';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { match, RouterContext } from 'react-router';
import reducers from './src/reducers';
import routes from './src/routes';

const app = express();

if(process.env.NODE_ENV === 'development') {
	const config = require('./webpack.config.dev');
	const compiler = webpack(config);
	app.use(require('webpack-dev-middleware')(compiler, {
		noInfo: true,
		publicPath: config.output.publicPath,
		stats: {
			assets: false,
			colors: true,
			version: false,
			hash: false,
			timings: false,
			chunks: false,
			chunkModules: false
		}
	}));
	app.use(require('webpack-hot-middleware')(compiler));
	app.use(express.static(path.resolve(__dirname, 'src')));
} else if(process.env.NODE_ENV === 'production') {
	// app.use(express.static(path.resolve(__dirname, 'dist')));
	app.use("/css", express.static(__dirname + '/dist/css'));
	app.use("/js", express.static(__dirname + '/dist/js'));
}

app.get('*', (req, res) => {
	if(process.env.NODE_ENV == 'development'){
		match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
			if(error) {
				res.status(500).send(error.message);
			} else if(redirectLocation) {
			res.redirect(302, redirectLocation.pathname + redirectLocation.search);
			} else if(renderProps) {
				res.status(200).send(`
					<!doctype html>
					<html>
						<head>
							<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
						</head>
						<body>
							<div id='app'></div>
							<script src='bundle.js'></script>
						</body>
					</html>
				`);
			}
		});
	}
	else if(process.env.NODE_ENV == 'production') {
		const filePath = path.resolve(__dirname,'dist', 'index.html')
		fs.readFile(filePath, 'utf8', (err, htmlData)=>{
			if (err) {
				console.error('read err', err)
				return res.status(404).end()
			}
			match({ routes, location: req.url }, (err, redirect, renderProps) => {
				if(err) {
					return res.status(404).end()
				}
				else if(redirect) {
					res.redirect(302, redirect.pathname + redirect.search)
				}
				else if(renderProps) {
					var ReactApp = renderToString(
						<Provider store={createStore(reducers)}>
							<RouterContext {...renderProps} />
						</Provider>
					);
					const RenderedApp = htmlData.replace('{{SSR}}', ReactApp);
					res.send(RenderedApp);
				}
				else {
					return res.status(404).end()
				}
			})
		})
	}
});

app.listen(3000, '0.0.0.0', (err) => {
	if(err) {
		console.error(err);
	} else {
		console.info('Listening at http://localhost:3000');
	}
});