[Express] React as a View Template Engine?

Updated (2019/10/29)

Thanks to kind advisors, lots of bugs are fixed and new features are added:

• v0.2.6 - [fix] the cache problem
• v0.3.0 - [new] support for hot reloading when process.env.NODE_ENV !== production
• v0.3.1 - [fix] lots of bugs
• v0.4.2 - [new] support for emotion
• v0.5.5 - [new] support for material-ui
• v0.5.6 - [new] support for styled-components
• v0.6.1 - [new] support for NestJS
• v0.7.0 - [new] ssr.config.js
• v0.8.0 - [new] dynamic Head

Intro

Have you ever thought about using React as a view template engine?

If I could use React as a real view, a view template engine of Express.

But it may be difficult because React is a component oriented library, and it must be bundled by webpack or rollup and so on...

Imagine This!

package.json

{
  "scripts": {
    "start": "node server.js"
  }
}

server.js

const app = express();

app.get('/', (req, res) => {
  const message = 'Hello World!';
  res.render('index', { message });
});

app.listen(3000, () => {
  console.log('> Ready on http://localhost:3000');
});

views/index.jsx

import React from 'react';

export default function Index({ message }) {
  return <p>{message}</p>;
}

It's wonderful, isn't it?

Simple enough to learn and use it.

Please Try This! And Tell Me Your First Impression!

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-starter.git
$ cd react-ssr-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-jsx-starter.git
$ cd react-ssr-jsx-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

About @react-ssr/express

$ npm install --save @react-ssr/core @react-ssr/express express react react-dom

Conclusion

May the code be with you.

Thank you for all!!!

Dear,