- Removed old code

- Added server side rendering of styled components with babel
- Added README with setup instructions & project overview

README.md

@@ -0,0 +1,20 @@
+# Server Side Rendering Boilerplate POC
+
+This repo contains two folders, `app` and `server`:
+
+## app
+`app` contains a Next.js / Redux app with a few pages showing some different features, including:
+- server side rendering
+- server side data population with `getInitialProps`
+- use of Redux / Redux Saga with Next.js
+- styled components with SSR
+- dynamically loaded components
+- authentication with JWT
+
+To run the front end, `cd app` and then run `yarn dev`.
+
+## server
+
+`server` contains an Express app. Only `app.js` is currently in use. It allows the front end to request a JWT and authenticates user ping attempts.
+
+To run the back end. `cd server` and then run `yarn start`.

app/.babelrc

@@ -0,0 +1,6 @@
+{ 
+  "presets": ["next/babel"], 
+  "plugins": [
+      ["styled-components", { "ssr": true }]
+   ]
+}

app/package.json

@@ -24,5 +24,8 @@
     "styled-components": "^5.0.1",
     "typesafe-actions": "^5.1.0"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.10.7"
+  }
 }

app/pages/_app.js

@@ -1,24 +1,24 @@
-import App from 'next/app'
-import React from 'react'
-import { Provider } from 'react-redux'
-import withRedux from 'next-redux-wrapper'
-import withReduxSaga from 'next-redux-saga'
+import App from 'next/app';
+import React from 'react';
+import { Provider } from 'react-redux';
+import withRedux from 'next-redux-wrapper';
+import withReduxSaga from 'next-redux-saga';
 
-import { initializeStore } from '../store'
+import { initializeStore } from '../store';
 
 class MyApp extends App {
   static async getInitialProps({ Component, ctx }) {
-    let pageProps = {}
+    let pageProps = {};
 
     if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps({ ctx })
+      pageProps = await Component.getInitialProps({ ctx });
     }
 
-    return { pageProps }
+    return { pageProps };
   }
 
   render() {
-    const { Component, pageProps, store } = this.props
+    const { Component, pageProps, store } = this.props;
     return (
       <Provider store={store}>
         <Component {...pageProps} />

app/pages/_document.js

@@ -0,0 +1,28 @@
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        });
+      const initialProps = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

app/pages/about/index.js

@@ -6,40 +6,10 @@ import Head from 'next/head';
 import dynamic from "next/dynamic";
 import { actions } from '../../reducers/about/reducers';
 
-// material-ui dependencies
-import { withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-
 const TestComponent = dynamic(() => import("../../components/testComponent"), {
   loading: () => <p>Loading...</p>
 });
 
-// set up styling classes using material-ui "withStyles"
-const styles = theme => ({
-  link: {
-    marginRight: 15
-  },
-  card: {
-    margin: 20,
-  },
-  paper: {
-    ...theme.mixins.gutters(),
-    paddingTop: "20px",
-    paddingBottom: "20px",
-  },
-  formButton: {
-    marginTop: "10px",
-    width: "100%",
-  },
-  pre: {
-    background: "#ccc",
-    padding: 10,
-    marginBottom: 0,
-  },
-});
-
 const About = () => {
   const [show, setShow] = useState(false);
   const aboutStore = useSelector(state => state.aboutPage, shallowEqual);

app/pages/index/index.js

@@ -5,11 +5,9 @@ import { useDispatch, useSelector, shallowEqual, connect } from 'react-redux';
 import { actions } from '../../reducers/home/reducers'
 import NavBar from '../../components/navBar';
 import Head from 'next/head';
+import fetch from 'isomorphic-unfetch';
 
 // material-ui dependencies
-import { withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -22,6 +20,18 @@ const StyledButton = styled(Button)`
   margin-top: 10px;
   width: 100%;
 `;
+const StyledPaper = styled(Paper)`
+  padding-top: 20px;
+  padding-bottom: 20px;
+`;
+const StyledCard = styled(Card)`
+  margin: 20px;
+`;
+const StyledPre = styled.pre`
+  background: #ccc;
+  padding: 10px;
+  margin-bottom: 0;
+`;
 
 const endpoint = "http://localhost:8888";
 
@@ -34,26 +44,6 @@ const accounts = [
   { "name": "useraaaaaaaf", "privateKey": "5KaqYiQzKsXXXxVvrG8Q3ECZdQAj2hNcvCgGEubRvvq7CU3LySK", "publicKey": "EOS5btzHW33f9zbhkwjJTYsoyRzXUNstx1Da9X2nTzk8BQztxoP3H" },
   { "name": "useraaaaaaag", "privateKey": "5KFyaxQW8L6uXFB6wSgC44EsAbzC7ideyhhQ68tiYfdKQp69xKo", "publicKey": "EOS8Du668rSVDE3KkmhwKkmAyxdBd73B51FKE7SjkKe5YERBULMrw" }
 ];
-// set up styling classes using material-ui "withStyles"
-const styles = theme => ({
-  card: {
-    margin: 20,
-  },
-  paper: {
-    ...theme.mixins.gutters(),
-    paddingTop: "20px",
-    paddingBottom: "20px",
-  },
-  formButton: {
-    marginTop: "10px",
-    width: "100%",
-  },
-  pre: {
-    background: "#ccc",
-    padding: 10,
-    marginBottom: 0,
-  },
-});
 
 const Index = (props) => {
     const dispatch = useDispatch();
@@ -120,7 +110,7 @@ const Index = (props) => {
 
     // generate each note as a card
     const generateCard = (key, timestamp, user, note) => (
-      <Card className={classes.card} key={key}>
+      <StyledCard key={key}>
         <CardContent>
           <Typography variant="h4" component="h2">
             {user}
@@ -132,7 +122,7 @@ const Index = (props) => {
             {note}
           </Typography>
         </CardContent>
-      </Card>
+      </StyledCard>
     );
 
     let noteCards = !!data && data.map((row, i) =>
@@ -149,7 +139,7 @@ const Index = (props) => {
 
         {noteCards}
 
-        <Paper className={classes.paper}>
+        <StyledPaper>
           <form onSubmit={(e) => handleFormEvent(e)}>
             <TextField
               name="account"
@@ -181,12 +171,12 @@ const Index = (props) => {
               Add / Update note
             </StyledButton>
           </form>
-        </Paper>
-        <pre className={classes.pre}>
+        </StyledPaper>
+        <StyledPre>
           Below is a list of pre-created accounts information for add/update note:
           <br /><br />
           accounts = {JSON.stringify(accounts, null, 2)}
-        </pre>
+        </StyledPre>
       </div>
     )
 }
@@ -197,4 +187,4 @@ Index.getInitialProps = (props) => {
   return {};
 }
 
-export default connect()(withStyles(styles)(Index));
+export default connect()(Index);

app/pages/login/index.js

@@ -23,6 +23,7 @@ const Login = () => {
 
       <NavBar title="Login" />
 
+      <p>Click 'Get Token' to recieve a JWT, which will last 60 seconds. If you have a JWT, you can access the secret page. If not, you will be redirected to home page on clicking 'Secret Page' link.</p>
       <button onClick={() => onLoginClick()}>Get Token</button>
       <br></br>
       <br></br>

app/yarn.lock

@@ -1502,7 +1502,7 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
-"babel-plugin-styled-components@>= 1":
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.7:
   version "1.10.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
   integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==