Package Exports

express-tsx-views

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (express-tsx-views) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Server-side JSX/TSX rendering for your express or NestJS application

Description

With this template engine, TSX files can be rendered server-side by your Express application. Unlike other JSX express renderers, this one does not rely on JSX files being transpiled by babel at runtime. Instead, TSX files are processed once by the tsc compiler.

For this to work, the templates are imported dynamically during rendering. And for this you have to provide a default export in your main TSX files. (Embeddable TSX components don't have to use a default export).

Highlights

Fast, since the JSX/TSX files do not have to be transpiled on-the-fly with every request
Works with compiled files (.js / node) and uncompiled files (.tsx / ts-node, ts-jest, ...)

Usage
- Express
- NestJS
License

Usage

$ npm install --save express-tsx-views

You have to set the jsx setting in your TypeScript configuration tsconfig.json to the value react:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

This template engine can be used in express and NestJS applications. The function setupReactViews() is provided, with which the engine is made available to the application.

import { setupReactViews } from 'express-tsx-views'

const options = {
  viewsDirectory: path.resolve(__dirname, '../views'),
}

setupReactViews(app, options)

The following options may be passed:

Option	Type	Description	Default
`viewsDirectory`	`string`	The directory where your views (`.tsx` files) are stored. Must be specified.	-
`doctype`	`string`	Doctype to be used.	`<!DOCTYPE html>\n`
`prettify`	`boolean`	If activated, the generated HTML string is formatted using prettier.	`false`

Express

Example express app (See also example/app.ts in this project):

import express from 'express'
import { resolve } from 'path'
import { setupReactViews } from 'express-tsx-views'
import { Props } from './views/my-view'

export const app = express()

setupReactViews(app, {
  viewsDirectory: resolve(__dirname, 'views'),
  prettify: true,  // Prettify HTML output
})

app.get('/my-route', (req, res, next) => {
  const data: Props = { title: 'Test', lang: 'de' }
  res.render('my-view', data)
})

app.listen(8080)

views/my-view.tsx:

import React, { Component } from 'react'
import MyComponent from './my-component'
import { MyLayout } from './my-layout'

export interface Props {
  title: string
  lang: string
}

// Important -- use the `default` export
export default class MyView extends Component<Props> {
  render() {
    return (
      <div>Hello from React! Title: {this.props.title}</div>
    )
  }
}

NestJS

express-tsx-views can also be used in NestJS. For this purpose the template engine must be made available in your main.ts:

import { setupReactViews } from 'express-tsx-views'

async function bootstrap() {
  // ...
  setupReactViews(app.getHttpAdapter().getInstance(), {
    viewsDirectory: resolve(__dirname, '../views'),
  })
}
// ...

Example controller:

import { Props } from './views/my-view'

@Get('/my-route')
@Render('my-view')
getMyRoute(): Props {
  return { title: "Hello from NestJS", lang: "de" }
}

License

express-tsx-views is distributed under the MIT license. See LICENSE for details.

express-tsx-views