agatha/react-ssr-boilerplate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: agatha:fbccf3d9e16c2003c2631d827b806ac41f73d918
Branches Tags
agatha:master
agatha:redux
agatha:base
..
compare: agatha:2f882ae8cdadabc809bcd39b42e1de68803d3d45
Branches Tags
agatha:master
agatha:redux
agatha:base

No commits in common. "fbccf3d9e16c2003c2631d827b806ac41f73d918" and "2f882ae8cdadabc809bcd39b42e1de68803d3d45" have entirely different histories.
fbccf3d9e1 ... 2f882ae8cd

10 changed files with 34 additions and 100 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,3 @@
node_modules
build
public/bundle.js
package-lock.json

4
package.json
View File

@ -4,10 +4,8 @@
"description": "Server side rendering project",
"main": "index.js",
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
"dev:build:server": "webpack --config webpack.server.js --watch"
},
"author": "",
"license": "ISC",

11
src/client/Routes.js
View File

@ -1,11 +0,0 @@
import React from "react";
import { Route } from "react-router-dom";
import Home from "./components/Home";
export default () => {
return (
<div>
<Route exact path="/" component={Home} />
</div>
) ;
};

7
src/client/components/Home.js
View File

@ -1,12 +1,7 @@
import React from "react"; // ES2015 module syntax
const Home = () => {
return (
<div>
<div>Home component</div>
<button onClick={() => console.log('button clicked')}>Button</button>
</div>
);
return <div>Home component</div>;
};
export default Home;

11
src/client/index.js
View File

@ -1,11 +0,0 @@
import React from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
ReactDOM.hydrate(
<BrowserRouter>
<Routes />
</BrowserRouter>,
document.querySelector('#root')
);

23
src/helpers/renderer.js
View File

@ -1,23 +0,0 @@
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import Routes from "../client/Routes";
export default (req) => {
const content = renderToString(
<StaticRouter location={req.path} context={{}}>
<Routes />
</StaticRouter>
);
return `
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="root">${content}</div>
<script src="bundle.js"></script>
</body>
</html>
`
};

14
src/index.js
View File

@ -1,11 +1,13 @@
import express from 'express';
import renderer from './helpers/renderer';
const express = require('express'); // CommonJS module syntax
const React = require('react');
const renderToString = require('react-dom/server').renderToString;
const Home = require('./client/components/Home').default;
const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
res.send(renderer(req));
app.get('/', (req, res) => {
const content = renderToString(<Home />);
res.send(content);
});
app.listen(3000, () => {

18
webpack.base.js
View File

@ -1,18 +0,0 @@
module.exports = {
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] }}]
]
}
}
]
}
}

13
webpack.client.js
View File

@ -1,13 +0,0 @@
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const config = {
entry: './src/client/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
};
module.exports = merge(baseConfig, config);

32
webpack.server.js
View File

@ -1,17 +1,33 @@
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternals = require('webpack-node-externals');
const config = {
module.exports = {
// Tell webpack that we're building a bundle for Node.js, rather than for the browser
target: 'node',
// Tell webpack the root file of our server application
entry: './src/index.js',
// Tell webpack where to put the output file that is generated
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
externals: [webpackNodeExternals()]
};
module.exports = merge(baseConfig, config);
// Tell webpack to run babel on every file it runs through
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] }}]
]
}
}
]
}
};