Extracted styles to make an example with css file and styled componen…

…ts on ssr.
federico-hv · Jun 12, 2020 · 9f2913a · 9f2913a
1 parent b3f33e2
commit 9f2913a
Show file tree

Hide file tree

Showing 9 changed files with 794 additions and 47 deletions.
diff --git a/common/App.js b/common/App.js
@@ -1,4 +1,14 @@
 import React, { Component } from 'react'
+import styled from 'styled-components';
+import './styles.css';
+
+const StyledBox = styled.div`
+	height: 100px;
+	background: black;
+	color: yellow;
+	font-size: 40px;
+`;
+
 
 class App extends Component {
 
@@ -26,10 +36,13 @@ class App extends Component {
 
 	render(){
 		return (
-			<div style={{ background: 'purple', color: 'white', fontSize: '30px' }}>
+			<div className="container">
 				<div>Message from the server: {this.state.message}</div>
 				<br/>
 				<button onClick={this.getMessage}>Get Message</button>
+				<StyledBox>
+					This is just a box that will bring styles from server and also hot reload its styles on every change
+				</StyledBox>
 			</div>
 		)
 	}

diff --git a/common/empty.js b/common/empty.js
diff --git a/common/styles.css b/common/styles.css
@@ -0,0 +1,5 @@
+.container {
+	background: green;
+	color: white;
+	font-size: 30px;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,16 +15,20 @@
     "koa": "^2.7.0",
     "koa-router": "^7.4.0",
     "npm-run-all": "^4.1.5",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-hot-loader": "^4.5.3",
+    "styled-components": "^5.1.1",
     "webpack-dev-server": "^3.1.14"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
+    "css-loader": "^3.5.3",
+    "mini-css-extract-plugin": "^0.9.0",
     "start-server-webpack-plugin": "^2.2.5",
+    "style-loader": "^1.2.1",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-node-externals": "^1.7.2"

diff --git a/server/routes/index.js b/server/routes/index.js
@@ -1,9 +1,9 @@
 import api from './api';
-// import hotroute from './hotroute';
+import hotroute from './hotroute';
 
 function applyRoutes(app) {
 	app.use(api.routes()).use(api.allowedMethods());
-	// app.use(hotroute.routes()).use(hotroute.allowedMethods());
+	app.use(hotroute.routes()).use(hotroute.allowedMethods());
 }
 
 export default applyRoutes;
diff --git a/server/server.js b/server/server.js
@@ -1,6 +1,7 @@
 import express from 'express'
 import React from 'react'
 import { renderToString } from 'react-dom/server'
+import { ServerStyleSheet } from 'styled-components'
 import App from '../common/App'
 import Koa from 'koa';
 import applyRoutes from './routes';
@@ -10,8 +11,10 @@ const app = new Koa();
 applyRoutes(app);
 
 app.use(ctx => {
-    let application = renderToString(<App />)
-
+    const sheet = new ServerStyleSheet()
+    const application = renderToString(sheet.collectStyles(<App />))
+    const styleTags = sheet.getStyleTags()
+
     ctx.body = `<!doctype html>
     <html class="no-js" lang="">
         <head>
@@ -21,12 +24,15 @@ app.use(ctx => {
             <meta name="description" content="">
             <meta name="viewport" 
             content="width=device-width,  initial-scale=1">
+            ${styleTags}
         </head>
         <body>
             <div id="root">${application}</div>
+            <link rel="stylesheet" href="http://localhost:3001/shit.css">
             <script src="http://localhost:3001/client.js"></script>
         </body>
     </html>`;
+    sheet.seal();
 });
 
 export default app
diff --git a/webpack.config.client.js b/webpack.config.client.js
@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 const path = require('path')
+const MiniCssExtractPlugin    = require("mini-css-extract-plugin");
 
 module.exports = {
 
@@ -13,24 +14,47 @@ module.exports = {
     ],
     target: 'web',
     module: {
-    rules: [{
-    test: /\.js?$/,
-    use: 'babel-loader',
-    include: [
-        path.join(__dirname, 'client'),
-        path.join(__dirname, 'common')
-    ]
-    }]
+        rules: [
+            {
+                test: /\.(less|css)$/,
+                use : [ 
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                          // you can specify a publicPath here
+                          // by default it uses publicPath in webpackOptions.output
+                          publicPath: 'http://localhost:3001/',
+                          hmr: true // Evaluate here if it's dev environment or not
+                        },
+                    },
+                    // 'style-loader', 
+                    'css-loader' 
+                ]
+            },
+            {
+                test: /\.js?$/,
+                use: 'babel-loader',
+                include: [
+                    path.join(__dirname, 'client'),
+                    path.join(__dirname, 'common')
+                ]
+            }
+        ]
     },
     plugins: [
-    new webpack.NamedModulesPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-            new webpack.DefinePlugin({
-                "process.env": {
-                    "BUILD_TARGET": JSON.stringify("client")
-                }
-            })
+        new MiniCssExtractPlugin({
+            filename : 'shit.css',
+            // disable  : false,
+            // allChunks: true
+        }),
+        new webpack.NamedModulesPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.DefinePlugin({
+            "process.env": {
+                "BUILD_TARGET": JSON.stringify("client")
+            }
+        })
     ],
     devServer: {
         host: 'localhost',

diff --git a/webpack.config.server.js b/webpack.config.server.js
@@ -20,13 +20,14 @@ module.exports = {
         ],
     },
     plugins: [
+        new webpack.NormalModuleReplacementPlugin(/\.(css|less)$/, './empty.js'),
         new StartServerPlugin("server.js"),
         new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.DefinePlugin({
             "process.env": { BUILD_TARGET: JSON.stringify("server") },
-        }),
+        })
     ],
     output: {
         path: path.join(__dirname, ".build"),