twhid/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    minimal typescript/TSX React SSR Express example

To run locally..
ts-node needs to be installed. You'll also need to install express, react, and react-dom.

Make tsConfig.json a sibling to server.tsx
run like so $ NODE_PORT=8888 ts-node server.tsx
open http://localhost:8888/ in a browser.

notes on TS compiler options

"module": "commonjs"
import statements need to be compiled to require statements so that Node <=12 can understand them. See ts-node docs re: ESM support.
"jsx": "react"
We're running directly in Node after the TS compilation, so we need JS instead of JSX. See TS documentation re: jsx.
"esModuleInterop": true
TS compiler will error with this if it's not included: "This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag."

  
## server.tsx
import express, { Request, Response } from 'express';
import React, { FC } from 'react';
import { renderToString } from 'react-dom/server';

const app = express();

const App: FC<{}> = () => {
    return (
        <html>
            <title>Greetings</title>
            <body>
                <h1>Greetings Earth.</h1>
            </body>
        </html>
    );
};

app.get('*', (_req: Request, res: Response) => {
    // note, this is rendering on each request, which for this static app is bad.
    // It should be pre-rendered when the app starts.
    return res.send(renderToString(<App />));
});

app.listen(process.env.NODE_PORT, () => {
    // eslint-disable-next-line no-console
    console.log(`Express server app listening on port ${process.env.NODE_PORT}!`);
});

## tsConfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react",
        "esModuleInterop": true
    }
}
	import express, { Request, Response } from 'express';
	import React, { FC } from 'react';
	import { renderToString } from 'react-dom/server';

	const app = express();

	const App: FC<{}> = () => {
	return (
	<html>
	<title>Greetings</title>
	<body>
	<h1>Greetings Earth.</h1>
	</body>
	</html>
	);
	};

	app.get('*', (_req: Request, res: Response) => {
	// note, this is rendering on each request, which for this static app is bad.
	// It should be pre-rendered when the app starts.
	return res.send(renderToString(<App />));
	});

	app.listen(process.env.NODE_PORT, () => {
	// eslint-disable-next-line no-console
	console.log(`Express server app listening on port ${process.env.NODE_PORT}!`);
	});
	{
	"compilerOptions": {
	"module": "commonjs",
	"jsx": "react",
	"esModuleInterop": true
	}
	}