fastify-react-views

Dependencies

209

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

fastify-react-views

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

1.0.8

latest

source

npm

Version published: 4 years ago

Weekly downloads: 0; decreased by-100%

Maintainers: 1

Install size: 18.4 MB

Created: 4 years ago

Weekly downloads

Readme

Source

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;

License

Licensed under MIT.

Keywords

FAQs

What is fastify-react-views?

Is fastify-react-views popular?

Is fastify-react-views well maintained?

Last updated on 04 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install