Fix SSR Errors and implement markdown render on SSR

Author: velopert

config/webpack.config.server.js

@@ -7,6 +7,7 @@ const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
+const path = require('path');
 
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
@@ -22,7 +23,7 @@ module.exports = {
   output: {
     path: paths.ssrBuild,
     filename: 'server.js',
-    chunkFilename: 'js/[name].chuk.js',
+    chunkFilename: 'js/[name].chunk.js',
     publicPath: paths.servedPath,
   },
   module: {
@@ -133,9 +134,22 @@ module.exports = {
       .map(ext => `.${ext}`)
       .filter(ext => true || !ext.includes('ts')),
   },
-  plugins: [new webpack.DefinePlugin(env.stringified)],
+  plugins: [
+    new webpack.DefinePlugin(env.stringified),
+    new webpack.NormalModuleReplacementPlugin(
+      /codemirror/,
+      path.resolve(paths.appSrc, 'lib/replacedModule.ts'),
+    ),
+  ],
   optimization: {
     minimize: false,
   },
-  externals: [nodeExternals()],
+  externals: [
+    nodeExternals({
+      whitelist: [/codemirror/, /\.css$/],
+    }),
+  ],
+  node: {
+    __dirname: false,
+  },
 };

package.json

@@ -8,6 +8,7 @@
     "@apollo/react-ssr": "^3.1.3",
     "@apollo/react-testing": "^3.1.3",
     "@babel/core": "7.7.4",
+    "@koa/router": "^8.0.5",
     "@loadable/babel-plugin": "^5.11.0",
     "@loadable/component": "^5.11.0",
     "@loadable/server": "^5.11.0",
@@ -19,10 +20,13 @@
     "@types/date-fns": "^2.6.0",
     "@types/jest": "^24.0.0",
     "@types/koa": "^2.11.0",
+    "@types/koa-bodyparser": "^4.3.0",
     "@types/koa-static": "^4.0.1",
+    "@types/koa__router": "^8.0.2",
     "@types/loadable__component": "^5.10.0",
     "@types/loadable__server": "^5.9.1",
     "@types/node": "^12.0.0",
+    "@types/node-fetch": "^2.5.4",
     "@types/qs": "^6.9.0",
     "@types/ramda": "^0.26.38",
     "@types/react": "^16.9.0",
@@ -70,8 +74,11 @@
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
     "koa": "^2.11.0",
+    "koa-better-http-proxy": "^0.2.4",
+    "koa-bodyparser": "^4.2.1",
     "koa-static": "^5.0.0",
     "mini-css-extract-plugin": "0.8.0",
+    "node-fetch": "^2.6.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.5.0",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -126,6 +133,7 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "build:server": "node scripts/build.server.js",
+    "start:server:local": "node ./dist/server.js",
     "test": "node scripts/test.js"
   },
   "eslintConfig": {
@@ -200,7 +208,9 @@
     "presets": [
       "react-app"
     ],
-    "plugins": ["@loadable/babel-plugin"]
+    "plugins": [
+      "@loadable/babel-plugin"
+    ]
   },
   "proxy": "http://localhost:5000",
   "devDependencies": {

scripts/build.server.js

@@ -1,6 +1,7 @@
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
+process.env.REACT_APP_SSR = 'enabled';
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
@@ -17,15 +18,14 @@ const config = require('../config/webpack.config.server');
 const paths = require('../config/paths');
 
 function build() {
-  const compiler = webpack(config);
+  const compiler = webpack({ ...config });
   fs.emptyDirSync(paths.ssrBuild);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) {
         console.log(err);
         return;
       }
-      console.log(stats.toString());
     });
   });
 }

src/App.tsx

@@ -11,31 +11,31 @@ import PageTemplate from './components/base/PageTemplate';
 import VelogPageFallback from './containers/velog/VelogPageFallback';
 
 const loadableConfig = {
-  fallback: <PageTemplate />
+  fallback: <PageTemplate />,
 };
 
 const VelogPage = loadable(() => import('./pages/velog/VelogPage'), {
-  fallback: <VelogPageFallback />
+  fallback: <VelogPageFallback />,
 });
 const MainPage = loadable(
   () => import('./pages/main/MainPage'),
-  loadableConfig
+  loadableConfig,
 );
 const EmailLoginPage = loadable(
   () => import('./pages/EmailLoginPage'),
-  loadableConfig
+  loadableConfig,
 );
 const WritePage = loadable(() => import('./pages/WritePage'), loadableConfig);
 const SearchPage = loadable(() => import('./pages/SearchPage'), loadableConfig);
 const SavesPage = loadable(() => import('./pages/SavesPage'), loadableConfig);
 const TagsPage = loadable(
   () => import('./pages/tags/TagsPage'),
-  loadableConfig
+  loadableConfig,
 );
 const PolicyPage = loadable(() => import('./pages/PolicyPage'), loadableConfig);
 const SettingPage = loadable(
   () => import('./pages/SettingPage'),
-  loadableConfig
+  loadableConfig,
 );
 
 interface AppProps {}

src/components/common/MarkdownEditor.tsx

@@ -1,14 +1,11 @@
 import React, { CSSProperties, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import CodeMirror, { EditorFromTextArea, Editor } from 'codemirror';
-
-import 'codemirror/lib/codemirror.css';
 import './atom-one-light.css';
+import 'codemirror/lib/codemirror.css';
 import palette from '../../lib/styles/palette';
-
-// conditional require later on
-require('codemirror/mode/markdown/markdown');
-require('codemirror/addon/display/placeholder');
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/addon/display/placeholder';
 
 const MarkdownEditorBlock = styled.div`
   .CodeMirror {

src/components/common/MarkdownRender.tsx

@@ -8,7 +8,7 @@ import prismThemes from '../../lib/styles/prismThemes';
 import breaks from 'remark-breaks';
 import Typography from './Typography';
 import embedPlugin from '../../lib/remark/embedPlugin';
-import { loadScript } from '../../lib/utils';
+import { loadScript, ssrEnabled } from '../../lib/utils';
 import media from '../../lib/styles/media';
 
 export interface MarkdownRenderProps {
@@ -83,11 +83,22 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   codeTheme = 'atom-one-light',
   onConvertFinish,
 }) => {
-  const [html, setHtml] = useState('');
+  const initialHtml = ssrEnabled
+    ? remark()
+        .use(breaks)
+        .use(prismPlugin)
+        .use(htmlPlugin)
+        .use(embedPlugin)
+        .use(slug)
+        .processSync(markdown)
+        .toString()
+    : '';
+
+  const [html, setHtml] = useState(initialHtml);
   useEffect(() => {
     remark()
       .use(breaks)
-      .use(prismPlugin)
+      // .use(prismPlugin)
       .use(htmlPlugin)
       .use(embedPlugin)
       .use(slug)

src/containers/etc/EmailLogin.tsx

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router';
 import qs from 'qs';
 import { emailCodeLogin } from '../../lib/api/auth';
-import client from '../../lib/graphql/client';
 import { GET_CURRENT_USER, CurrentUser } from '../../lib/graphql/user';
 import storage from '../../lib/storage';
 import { RootState } from '../../modules';
 import { setUser } from '../../modules/core';
+import { useApolloClient } from '@apollo/react-hooks';
 
 const mapStateToProps = (state: RootState) => ({});
 const mapDispatchToProps = {
@@ -29,6 +29,7 @@ const { useEffect, useCallback } = React;
  */
 const EmailLogin: React.FC<EmailLoginProps> = ({ location, history }) => {
   const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+  const client = useApolloClient();
   const processLogin = useCallback(async () => {
     try {
       await emailCodeLogin(query.code);
@@ -43,7 +44,7 @@ const EmailLogin: React.FC<EmailLoginProps> = ({ location, history }) => {
       // TODO: show 401
       history.replace('/');
     }
-  }, [history, query.code]);
+  }, [client, history, query.code]);
   useEffect(() => {
     if (!query.code) {
       // TODO: show 404

src/containers/velog/ConfigLoader.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import VelogPageTemplate from '../../components/velog/VelogPageTemplate';
-import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
-import ConfigLoader from './ConfigLoader';
+import useApplyVelogConfig from './hooks/useApplyVelogConfig';
 
 export type VelogPageFallbackProps = {};
 
 function VelogPageFallback(props: VelogPageFallbackProps) {
-  const dispatch = useDispatch();
   const params = useParams<{ username: string }>();
-
-  return (
-    <VelogPageTemplate>
-      <ConfigLoader username={params.username} />
-    </VelogPageTemplate>
-  );
+  useApplyVelogConfig(params.username);
+  return <VelogPageTemplate></VelogPageTemplate>;
 }
 
 export default VelogPageFallback;