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

Compare commits

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

10 Commits
2f882ae8cd ... fbccf3d9e1

Author SHA1 Message Date
agatha
fbccf3d9e1 remove test route 2024-04-12 20:46:08 -04:00
agatha
c5d7d4b275 express wildcard 2024-04-12 20:44:25 -04:00
agatha
fb64977d06 implement react-router 2024-04-12 20:43:08 -04:00
agatha
d7e9854e70 remove unused imports 2024-04-12 20:10:19 -04:00
agatha
db8e8bfd61 add renderer helper 2024-04-12 20:09:51 -04:00
agatha
510f1c81dd use webpack-node-externals in server build 2024-04-12 20:04:31 -04:00
agatha
6f3b1e5b3f consolidate dev scripts with npm-run-all 2024-04-12 19:58:26 -04:00
agatha
f424937b17 refactor for common webpack config 2024-04-12 19:55:40 -04:00
agatha
85a131cd74 exclude public build 2024-04-12 19:55:23 -04:00
agatha
6d981c6fdf convert to ES2015 imports 2024-04-12 19:17:44 -04:00
10 changed files with 100 additions and 34 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

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

4
package.json
View File

@ -4,8 +4,10 @@
"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-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
"author": "",
"license": "ISC",

11
src/client/Routes.js Normal file
View File

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

11
src/client/index.js Normal file
View File

@ -0,0 +1,11 @@
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 Normal file
View File

@ -0,0 +1,23 @@
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,13 +1,11 @@
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;
import express from 'express';
import renderer from './helpers/renderer';
const app = express();
app.get('/', (req, res) => {
const content = renderToString(<Home />);
res.send(content);
app.use(express.static('public'));
app.get('*', (req, res) => {
res.send(renderer(req));
});
app.listen(3000, () => {

18
webpack.base.js Normal file
View File

@ -0,0 +1,18 @@
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 Normal file
View File

@ -0,0 +1,13 @@
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,33 +1,17 @@
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternals = require('webpack-node-externals');
module.exports = {
// Tell webpack that we're building a bundle for Node.js, rather than for the browser
const config = {
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')
},
// 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'] }}]
]
}
}
]
}
};
externals: [webpackNodeExternals()]
};
module.exports = merge(baseConfig, config);