❤
npm
Sign UpSign In

fastify-react-views
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

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;

or

// 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;

License

Licensed under MIT.

Readme

Keywords

Package Sidebar

Install

npm i fastify-react-views

Repository

github.com/muturgan/fastify-react-views

Homepage

github.com/muturgan/fastify-react-views#readme

Weekly Downloads

1

Version

1.0.8

License

MIT

Unpacked Size

12.2 kB

Total Files

10

Last publish

Collaborators

  • a.sakharov
Try on RunKit
Report malware