Fastify-react-views NPM

fastify-react-views

This is an Fastify view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.

This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.

Inspired by express-react-views.

Usage

npm install fastify fastify-react-views

Add it to your app

// app.js

const app = require('fastify')();
const { engine } = require('fastify-react-views');

app.register(engine, {
   templateDir: 'views'
});

app.get('/', (_, res) => res.send('ok'));

app.get('/test', (_, res) => res.view('hello', {text: 'World'}));

app.listen(3333, () => console.info('listening...'));

The first argument of the view method is the name of the template file, the second is props which are passed to your react component.

Typescript

When using typescript you can describe the type of your props.

// app.ts

interface IHello {
   text: string;
}

app.get('/test', (_, res) => {
   res.view<IHello>('hello', {text: 'World'});
});

Nest.js

You can use it with Nest.js as well.
You need to register a plugin in your nest application.

// main.ts

import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { engine } from 'fastify-react-views';
import { AppModule } from './app.module';

async function bootstrap()
{
   const app = await NestFactory.create<NestFastifyApplication>(
      AppModule,
      new FastifyAdapter(),
   );

   app.register(engine, {
      templateDir: 'views',
   });

   await app.listen(3333)
      .then(() => console.info(`listening...`));

   return app;
}
bootstrap();

Now you can use a Render decorator at your controllers.

// app.controller.ts

import { Controller, Get, Render } from '@nestjs/common';

interface IHello {
   text: string;
}

@Controller()
export class AppController {

   @Get()
   public index()
   {
      return 'Ok';
   }

   @Get('test')
   @Render('hello')
   public test(): IHello
   {
      return {text: 'World'};
   }
}

Views

Under the hood, Babel is used to compile your views to code compatible with your current node version, using the react and env presets by default. Only the files in your views directory (i.e. app.register(engine, {templateDir: 'views'})) will be compiled.

Your views should be node modules that export a React component. These files can have js, jsx, ts or tsx extension.

// hello.jsx
import * as React from 'react';

function Hello(props)  {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>App</title>
      </head>
      <body>
        <h2>Hello {props.text}!</h2>
      </body>
    </html>
  );
}

module.exports = Hello;

// hello.tsx
import * as React from 'react';
import { IHello } from 'some/path';

function Hello(props: IHello)  {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>App</title>
      </head>
      <body>
        <h2>Hello {props.text}!</h2>
      </body>
    </html>
  );
}

module.exports = Hello;