1010 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1111 */
1212
13+ require ( '@babel/register' ) ( {
14+ extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' ] ,
15+ presets : [
16+ "@babel/preset-env" ,
17+ "@babel/preset-react" ,
18+ "@babel/preset-typescript" ,
19+ ] ,
20+ plugins : [
21+ [ "@babel/plugin-transform-runtime" ,
22+ {
23+ "regenerator" : true
24+ }
25+ ]
26+ ]
27+ } )
28+ import 'isomorphic-fetch' ;
29+
30+ import CopyWebpackPlugin from 'copy-webpack-plugin' ;
1331import express from 'express' ;
14- import path from 'path' ;
32+ import { createProxyMiddleware } from 'http-proxy-middleware' ;
33+ import { Resolver } from 'found-relay' ;
34+ import { getFarceResult } from 'found/server' ;
35+ import ReactDOMServer from 'react-dom/server' ;
36+ import RelayServerSSR from 'react-relay-network-modern-ssr/lib/server' ;
37+ import serialize from 'serialize-javascript' ;
1538import webpack from 'webpack' ;
16- import WebpackDevServer from 'webpack-dev-server' ;
39+ import webpackMiddleware from 'webpack-dev-middleware' ;
40+ import path from 'path' ;
1741import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin' ;
1842
43+ const { createRelayEnvironment } = require ( './ts/createRelayEnvironment' )
44+ const { historyMiddlewares, routeConfig } = require ( './ts/router' )
45+
1946const APP_PORT = 3000 ;
2047const GRAPHQL_PORT = 5000 ;
2148
22- // Serve the Relay app
23- const compiler = webpack ( {
24- entry : [ 'whatwg-fetch' , path . resolve ( __dirname , 'ts' , 'app.tsx' ) ] ,
49+ const app = express ( ) ;
50+
51+ const webpackConfig = {
52+ mode : 'development' ,
53+
54+ entry : [ 'isomorphic-fetch' , path . resolve ( __dirname , 'ts' , 'client.tsx' ) ] ,
2555 resolve : {
2656 extensions : [ '.ts' , '.tsx' , '.js' ] ,
2757 } ,
@@ -37,19 +67,87 @@ const compiler = webpack({
3767 } ,
3868 ] ,
3969 } ,
70+ output : { filename : 'app.js' , path : '/' } ,
4071 plugins : [
4172 new ForkTsCheckerWebpackPlugin ( ) ,
73+ new CopyWebpackPlugin ( {
74+ patterns : [
75+ 'public/learn.json' ,
76+ 'node_modules/todomvc-common/base.css' ,
77+ 'node_modules/todomvc-app-css/index.css' ,
78+ ] ,
79+ } ) ,
4280 ] ,
43- output : { filename : 'app.js' , path : '/' } ,
44- } ) ;
45- const app = new WebpackDevServer ( compiler , {
46- contentBase : '/public/' ,
47- proxy : { '/graphql' : `http://localhost:${ GRAPHQL_PORT } } ,
48- publicPath : '/js/' ,
49- stats : { colors : true } ,
81+
82+ devtool : 'cheap-module-source-map' ,
83+ } ;
84+
85+ app . use (
86+ webpackMiddleware ( webpack ( webpackConfig ) , {
87+ stats : { colors : true } ,
88+ } ) ,
89+ ) ;
90+
91+ const options = {
92+ target : `http://localhost:${ GRAPHQL_PORT } ,
93+ changeOrigin : true , // needed for virtual hosted sites
94+ ws : true , // proxy websockets
95+ pathRewrite : {
96+ } ,
97+ router : function ( req ) {
98+ return {
99+ protocol : 'http:' ,
100+ host : 'localhost' ,
101+ port : GRAPHQL_PORT ,
102+ }
103+ } ,
104+ } ;
105+ app . use ( '/graphql' , createProxyMiddleware ( '/graphql' , options ) )
106+
107+ app . use ( async ( req , res ) => {
108+ const relaySsr = new RelayServerSSR ( ) ;
109+
110+ const { redirect, status, element } = await getFarceResult ( {
111+ url : req . url ,
112+ historyMiddlewares,
113+ routeConfig,
114+ resolver : new Resolver (
115+ createRelayEnvironment ( relaySsr , `http://localhost:${ GRAPHQL_PORT } ) ,
116+ ) ,
117+ } ) ;
118+
119+ if ( redirect ) {
120+ res . redirect ( 302 , redirect . url ) ;
121+ return ;
122+ }
123+
124+ const appHtml = ReactDOMServer . renderToString ( element ) ;
125+ const relayData = await relaySsr . getCache ( ) ;
126+
127+ res . status ( status ) . send ( `
128+ <!DOCTYPE html>
129+ <html>
130+
131+ <head>
132+ <meta charset="utf-8">
133+ <title>Relay • TodoMVC</title>
134+ <link rel="stylesheet" href="base.css">
135+ <link rel="stylesheet" href="index.css">
136+ </head>
137+
138+ <body>
139+ <div id="root">${ appHtml }
140+
141+ <script>
142+ window.__RELAY_PAYLOADS__ = ${ serialize ( relayData , { isJSON : true } ) }
143+ </script>
144+ <script src="/app.js"></script>
145+ </body>
146+
147+ </html>
148+ ` ) ;
50149} ) ;
51- // Serve static resources
52- app . use ( '/' , express . static ( path . resolve ( __dirname , 'public' ) ) ) ;
150+
53151app . listen ( APP_PORT , ( ) => {
54- console . log ( `App is now running on http://localhost: ${ APP_PORT } ) ;
152+ console . log ( `listening on port ${ APP_PORT } ) ; // eslint-disable-line no-console
55153} ) ;
0 commit comments