12.01 - Directory Structure

commands.md

@@ -167,7 +167,7 @@ cd ui
 npm install url-search-params@1
 ```
 
-Chapter 11: React-Bootstrap
+## Chapter 11: React-Bootstrap
 
 ### Installation
 ```
@@ -182,3 +182,15 @@ ln -s ../node_modules/bootstrap/dist public/bootstrap
 cd ui
 npm install react-router-bootstrap@0
 ```
+
+## Chapter 12: Server Rendering
+
+### Directory Structure
+```
+cd ui
+mkdir browser
+mkdir server
+mv src/App.jsx browser
+mv uiserver.js server
+cp src/.babelrc browser
+```

ui/.eslintrc

@@ -1,9 +1,3 @@
 {
-  "extends": "airbnb-base",
-  "env": {
-    "node": true
-  },
-  "rules": {
-    "no-console": "off"
-  }
+  "extends": "airbnb",
 }

ui/browser/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "ie": "11",
+        "edge": "15",
+        "safari": "10",
+        "firefox": "50",
+        "chrome": "49"
+      }
+    }],
+    "@babel/preset-react"
+  ]
+}

ui/browser/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "browser": true
+  },
+  rules: {
+    "import/extensions": [ 'error', 'always', { ignorePackages: true } ],
+    "react/prop-types": "off"
+  }
+}

ui/src/App.jsx → ui/browser/App.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Page from './Page.jsx';
+import Page from '../src/Page.jsx';
 
 const element = (
   <Router>

ui/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "#start": "UI server. HMR is enabled in dev mode.",
-    "start": "nodemon -w uiserver.js -w .env uiserver.js",
+    "start": "nodemon -w server -w .env server/uiserver.js",
     "#lint": "Runs ESLint on all relevant files",
     "lint": "eslint . --ext js,jsx --ignore-pattern public",
     "#compile": "Generates JS bundles for production. Use with start.",

ui/server/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "node": true
+  },
+  "rules": {
+    "no-console": "off"
+  }
+}

ui/uiserver.js → ui/server/uiserver.js

@@ -15,7 +15,7 @@ if (enableHMR && (process.env.NODE_ENV !== 'production')) {
   const devMiddleware = require('webpack-dev-middleware');
   const hotMiddleware = require('webpack-hot-middleware');
 
-  const config = require('./webpack.config.js');
+  const config = require('../webpack.config.js');
   config.entry.app.push('webpack-hot-middleware/client');
   config.plugins = config.plugins || [];
   config.plugins.push(new webpack.HotModuleReplacementPlugin());

ui/src/.eslintrc

@@ -1,7 +1,7 @@
 {
-  "extends": "airbnb",
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true
   },
   rules: {
     "import/extensions": [ 'error', 'always', { ignorePackages: true } ],

ui/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   mode: 'development',
-  entry: { app: ['./src/App.jsx'] },
+  entry: { app: ['./browser/App.jsx'] },
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'public'),