diff --git a/package.json b/package.json
index 5293e35..57c1e52 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
"main": "index.js",
"scripts": {
"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",
diff --git a/src/client/components/Home.js b/src/client/components/Home.js
index 8ef7869..ce66671 100644
--- a/src/client/components/Home.js
+++ b/src/client/components/Home.js
@@ -1,7 +1,12 @@
import React from "react"; // ES2015 module syntax
const Home = () => {
- return
Home component
;
+ return (
+
+
Home component
+
+
+ );
};
export default Home;
\ No newline at end of file
diff --git a/src/client/index.js b/src/client/index.js
new file mode 100644
index 0000000..3e553ee
--- /dev/null
+++ b/src/client/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from 'react-dom';
+
+import Home from './components/Home';
+
+ReactDOM.hydrate(, document.querySelector('#root'));
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 05d58f7..8102981 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,10 +5,20 @@ import Home from './client/components/Home'
const app = express();
+app.use(express.static('public'));
app.get('/', (req, res) => {
const content = renderToString();
-
- res.send(content);
+ const html = `
+
+
+
+
+ ${content}
+
+
+
+ `;
+ res.send(html);
});
app.listen(3000, () => {
diff --git a/webpack.base.js b/webpack.base.js
new file mode 100644
index 0000000..76d9b7d
--- /dev/null
+++ b/webpack.base.js
@@ -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'] }}]
+ ]
+ }
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/webpack.client.js b/webpack.client.js
new file mode 100644
index 0000000..6449504
--- /dev/null
+++ b/webpack.client.js
@@ -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);
\ No newline at end of file
diff --git a/webpack.server.js b/webpack.server.js
index 135be34..605207f 100644
--- a/webpack.server.js
+++ b/webpack.server.js
@@ -1,33 +1,14 @@
const path = require('path');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.base.js')
-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'] }}]
- ]
- }
- }
- ]
}
-};
\ No newline at end of file
+};
+
+module.exports = merge(baseConfig, config);
\ No newline at end of file