Version: 1.x

JSX Server-Side Rendering

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": [

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

Example with

"extends": "./tsconfig.json",
"include": [
"exclude": [

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.


import { Get, render } from '@foal/core';
import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
export class ViewController {
async index() {
const content = ReactDOMServer.renderToString(<div>Hello world!</div>);
return render('./templates/index.html', {


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
{{ content }}