Kind of doable

Dockerfile

@@ -0,0 +1,28 @@
+FROM ubuntu:18.04
+
+RUN apt-get update
+RUN apt-get install -y curl
+
+RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
+
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+
+RUN apt-get update
+RUN apt-get install -y nodejs yarn
+
+# Node
+RUN apt-get install -y nodejs
+
+# application
+RUN mkdir /opt/client
+
+COPY ./dist ./opt/api
+COPY ./package.json /opt/api
+COPY ./yarn.lock /opt/api
+
+RUN (cd /opt/api; yarn)
+
+WORKDIR /opt/api
+
+CMD node index.js

package.json

@@ -5,11 +5,13 @@
   "license": "private",
   "private": true,
   "scripts": {
-    "build": "webpack --config ./webpack.config.ts",
+    "client-build": "webpack --config ./webpack.config.ts",
+    "ssr-build": "tsc",
     "start": "NODE_ENV=development webpack-dev-server --config ./webpack.config.ts --hot --progress",
-    "ssr": "ts-node SSR/index.tsx"
+    "ssr": "API_URL=http://alpha.quepasaalpujarra.com/graphql ts-node src/SSR/index.ts"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.15",
     "@emotion/styled": "^10.0.12",
     "@types/mustache": "^0.8.32",
     "@types/react-router-dom": "^4.3.3",
@@ -19,6 +21,7 @@
     "apollo-link-http": "^1.5.14",
     "apollo-link-logger": "^1.2.3",
     "date-fns": "^1.29.0",
+    "emotion": "^10.0.14",
     "emotion-server": "^10.0.14",
     "express": "^4.17.1",
     "formik": "^1.4.1",

src/App/App.tsx

@@ -1,18 +1,18 @@
+import { css, Global } from "@emotion/core"
+import styled from "@emotion/styled"
 import * as React from "react"
+import { RouteComponentProps } from "react-router"
 import { Redirect, Route, Switch } from "react-router-dom"
 import Calendar from "../Calendar/Calendar"
 import CreateEvent from "../Event/CreateEvent"
 import EditEvent from "../Event/EditEvent"
-import { RouteComponentProps } from "react-router"
-import Header from "./Header/Header"
-import Login from "./Auth/Login"
-import styled from "@emotion/styled"
-import Footer from "./Footer"
 import InitializeSession from "./Auth/InitializeSession"
-import Signup from "./Auth/Signup"
+import Login from "./Auth/Login"
 import Signout from "./Auth/Signout"
+import Signup from "./Auth/Signup"
+import Footer from "./Footer"
+import Header from "./Header/Header"
 import OccurrenceDetails from "./Occurrence/OccurrenceDetails"
-import { Global, css } from "@emotion/core"
 
 const App = () => (
   <Root>

src/App/Providers.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
-import {AppContextProvider} from "./Context/AppContext"
-import {BrowserRouter as Router} from "react-router-dom"
-import {ApolloProvider} from "react-apollo"
-import {HttpLink} from "apollo-link-http"
-import {ApolloClient} from "apollo-client"
 import {InMemoryCache} from "apollo-cache-inmemory"
-import fetch from 'node-fetch'
+import {ApolloClient} from "apollo-client"
+import {HttpLink} from "apollo-link-http"
+import fetch from "node-fetch"
+import * as React from "react"
+import {ApolloProvider} from "react-apollo"
+import {BrowserRouter as Router} from "react-router-dom"
+import {AppContextProvider} from "./Context/AppContext"
 
 interface Props {
   children: React.ReactChild | React.ReactChildren
@@ -13,13 +13,13 @@ interface Props {
 
 const httpLink = new HttpLink({
   uri: "/graphql",
-  fetch
+  fetch,
 })
 
 const graphqlClient = new ApolloClient({
   connectToDevTools: true,
   link: httpLink,
-  cache: new InMemoryCache().restore(window.__APOLLO_DATA__)
+  cache: new InMemoryCache().restore((window as any).__APOLLO_DATA__),
 }) as ApolloClient<any>
 
 const Providers = (props: Props) => (
@@ -32,5 +32,4 @@ const Providers = (props: Props) => (
   </ApolloProvider>
 )
 
-
 export default Providers

src/SSR/SSRApp.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import App from "../App/App"
+import Providers from "../App/Providers"
+
+const container = document.getElementById("app")
+ReactDOM.hydrate(
+  <Providers>
+    <App />
+  </Providers>,
+  container,
+)

src/SSR/SSRProviders.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
-import {AppContextProvider} from "../App/Context/AppContext"
-import {ApolloProvider} from "react-apollo"
-import {ApolloClient} from "apollo-client"
 import {InMemoryCache} from "apollo-cache-inmemory"
-import { StaticRouter } from 'react-router'
+import {ApolloClient} from "apollo-client"
+import * as React from "react"
+import {ApolloProvider} from "react-apollo"
+import { StaticRouter } from "react-router"
+import {AppContextProvider} from "../App/Context/AppContext"
 
 interface Props {
   children: React.ReactChild | React.ReactChildren
@@ -21,5 +21,4 @@ const SSRProviders = (props: Props) => (
   </ApolloProvider>
 )
 
-
 export default SSRProviders

src/SSR/handler.tsx

@@ -1,27 +1,27 @@
-import { Request, Response } from "express-serve-static-core"
-import * as ReactDOMServer from "react-dom/server"
-import { renderStylesToString } from "emotion-server"
-import App from "../App/App"
-import * as React from "react"
-import SSRProviders from "./SSRProviders"
-import * as fs from "fs"
-import * as path from "path"
-import * as Mustache from "mustache"
-import { ApolloClient } from "apollo-client"
 import { InMemoryCache } from "apollo-cache-inmemory"
-import { HttpLink } from "apollo-link-http"
-import fetch from "node-fetch"
-import { getDataFromTree } from "react-apollo"
-import apolloLogger from "apollo-link-logger"
+import { ApolloClient } from "apollo-client"
 import { ApolloLink } from "apollo-link"
+import { HttpLink } from "apollo-link-http"
+import apolloLogger from "apollo-link-logger"
+import { renderStylesToString } from "emotion-server"
+import { Request, Response } from "express-serve-static-core"
+import * as fs from "fs"
+import * as Mustache from "mustache"
+import fetch from "node-fetch"
+import * as path from "path"
+import * as React from "react"
+import { getDataFromTree } from "react-apollo"
+import * as ReactDOMServer from "react-dom/server"
+import App from "../App/App"
+import SSRProviders from "./SSRProviders"
 export const httpSSRHandler = async (req: Request, res: Response) => {
   res.status(200)
   const httpLink = new HttpLink({
-    uri: "http://localhost:4000/graphql",
+    uri: process.env.API_URL || "http://localhost:4000/graphql",
     fetch,
     headers: {
-      cookie: req.header("Cookie")
-    }
+      cookie: req.header("Cookie"),
+    },
   })
 
   const link = ApolloLink.from([apolloLogger, httpLink])
@@ -46,12 +46,12 @@ export const httpSSRHandler = async (req: Request, res: Response) => {
 
   const template = fs.readFileSync(
     path.join(__dirname, "./index.html.mustache"),
-    "utf-8"
+    "utf-8",
   )
 
   const result = Mustache.render(template, {
     appBody,
-    apolloData: JSON.stringify(initialState)
+    apolloData: JSON.stringify(initialState),
   })
   res.send(result)
 }

src/SSR/index.ts

@@ -1,9 +1,9 @@
-import * as express from 'express'
-import { httpSSRHandler } from './handler'
+import * as express from "express"
+import { httpSSRHandler } from "./handler"
 
 const port = 5000
 console.log(`Starting SSR on port ${port}...`)
 const app = express()
-app.get('/*', httpSSRHandler)
+app.get("/*", httpSSRHandler)
 app.listen(port)
-console.log('Successfully started')
+console.log("Successfully started")

tsconfig.json

@@ -4,6 +4,7 @@
     "sourceMap": true,
     "jsx": "react",
     "module": "commonjs",
+    "outDir": "lib/",
     "lib": [
       "dom",
       "es7",
@@ -11,6 +12,6 @@
     ]
   },
   "exclude": [
-    ".*/__tests__/.*", "node_modules"
+    ".*/__tests__/.*", "node_modules", "dist", "lib"
   ]
 }

webpack.config.js

@@ -1,25 +0,0 @@
-const path = require('path')
-const nodeExternals = require('webpack-node-externals');
-
-
-module.exports = {
-  entry: './src/index.ts',
-  target: 'node',
-  module: {
-    rules: [
-      {
-        test: /\.ts?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.ts']
-  },
-  output: {
-    filename: 'index.js', // <-- Important
-    libraryTarget: 'this' // <-- Important
-  },
-  externals: [nodeExternals()]
-};

webpack.config.ts

@@ -1,35 +1,35 @@
-import * as webpack from 'webpack'
+import * as express from "express"
+import * as HtmlWebpackPlugin from "html-webpack-plugin"
 import * as path from "path"
-import * as HtmlWebpackPlugin from 'html-webpack-plugin'
-import * as express from 'express'
+import * as webpack from "webpack"
 import * as WebpackDevServer from "webpack-dev-server"
-import {httpSSRHandler} from "./SSR/handler"
+import {httpSSRHandler} from "./src/SSR/handler"
 
 const config: webpack.Configuration = {
-  entry: './App/index.tsx',
+  entry: "./src/App/index.tsx",
   resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"]
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   devServer: {
     historyApiFallback: true,
     hot: true,
     before: (app: express.Application, server: WebpackDevServer) => {
-      //todo: improve the regex
+      // todo: improve the regex
       app.get(/^((?!\.\w+).)*$/, httpSSRHandler)
     },
     proxy: {
-      '/graphql': {
+      "/graphql": {
         redirect: false,
         changeOrigin: true,
         target: `http://localhost:4000`,
       },
-      '/api': {
+      "/api": {
         redirect: false,
         changeOrigin: true,
         target: `http://localhost:4000`,
-      }
+      },
 
-    }
+    },
   },
   module: {
     rules: [
@@ -41,22 +41,22 @@ const config: webpack.Configuration = {
           options: {
             presets: [
               "@babel/typescript",
-              "@babel/react"
+              "@babel/react",
             ],
-            plugins: [].filter(Boolean)
-          }
-        }
-      }    ]
+            plugins: [].filter(Boolean),
+          },
+        },
+      }    ],
   },
-  devtool: '@source-map',
+  devtool: "@source-map",
   output: {
-    path: path.resolve(__dirname, './dist'),
-    filename: 'bundle.js',
-    publicPath: '/'
+    path: path.resolve(__dirname, "./dist"),
+    filename: "bundle.js",
+    publicPath: "/",
   },
   plugins: [new HtmlWebpackPlugin({
     title: "blabla",
-  })]
+  })],
 
 }