Version: 2.2.0 (latest)

JSX Server-Side Rendering

You are reading the documentation for version 2 of FoalTS. Instructions for upgrading to this version are available here. The old documentation can be found here.

If you are interested in SSR without JSX, then you might take a look at the "templating" page.

Compile JSX Files#

The TypeScript compiler supports JSX.

To enable this feature, update the tsconfig.json as follows:

{
  "compilerOptions": {
    ...
    "jsx": "react",
  },
  "include": [
    "src/**/*.ts"
    "src/**/*.tsx"
  ]
}

Then, add the file extension tsx in every tsconfig.*.json.

Example with tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "src/e2e/*.ts",
    "src/**/*.spec.ts",
    "src/e2e.ts",
    "src/test.ts"
  ]
}

Every file using JSX must now have the extension .tsx.

Example with React#

npm install react react-dom @types/react-dom

This example shows how to use JSX SSR with React. It assumes that templates directory is in the root, next to src.

view.controller.tsx

import { Get, render } from '@foal/core';
import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';

export class ViewController {

  @Get('/')
  async index() {
    const content = ReactDOMServer.renderToString(<div>Hello world!</div>);

    return render('./templates/index.html', {
      content,
    });
  }

}

./templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  {{ content }}
</body>
</html>