DEV Community

Cover image for [Express] React as a View Template Engine?
Shiono Yoshihide
Shiono Yoshihide

Posted on • Updated on

[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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

views/index.jsx

import React from 'react';

export default function Index({ message }) {
  return <p>{message}</p>;
}
Enter fullscreen mode Exit fullscreen mode

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`)
Enter fullscreen mode Exit fullscreen mode

GitHub logo saltyshiomix / react-ssr-jsx-starter

An example of @react-ssr/express

This repository is the example of @react-ssr/express.

Usage

# 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`)
Enter fullscreen mode Exit fullscreen mode

Related

saltyshiomix/react-ssr - React SSR as a view template engine

About @react-ssr/express

GitHub logo saltyshiomix / react-ssr

React SSR as a view template engine

Overview

  • SSR (Server Side Rendering) as a view template engine
  • Dynamic props
    • Passing the server data to the React client props
    • Suitable for
      • Admin Panels
      • Blogging
  • Developer Experience
    • Zero config of webpack and babel
    • HMR (Hot Module Replacement) both scripts and even if styles when process.env.NODE_ENV !== 'production'
    • Built-in Sass (SCSS) support

Pros and Cons

Pros

Because it is just a view template engine:

  • It doesn't need to have any APIs, all we have to do is to pass the server data to the client
  • It supports multiple engines like .hbs, .ejs and React .(ts|js)x
  • We can use passport authentication as it always is

Cons

  • It is not so performant, because it assembles the whole HTML on each request
  • It does not support client side routing

Usage

With @react-ssr/express

Install it:

$ npm install --save @react-ssr/core @react-ssr/express express react react-dom
Enter fullscreen mode Exit fullscreen mode

And add a script to your package.json like this:

Enter fullscreen mode Exit fullscreen mode

Conclusion

May the code be with you.

Thank you for all!!!

Dear,

Top comments (9)

Collapse
 
blueboy6 profile image
BlueBoy6

Great one !
however in my last tries i found some bugs.
I installed nodemon and when i modify the jsx component, the changes doesn't appear. I tried to restart the server, switch the command to node back, but nothing worked.. the only way to change something on my screen was to create a new jsx and use him in server.js.
Do you have an idea of this bug ?

Thank you !

Collapse
 
saltyshiomix profile image
Shiono Yoshihide

Thank you for your fast trying it!

I fixed the bug @react-ssr/express@0.2.4 and updated the example repo :)

Collapse
 
blueboy6 profile image
BlueBoy6

hi ! It still don't work and i don't find what is working bad.. i also tried to introduce component inside of main component but he can't find module..

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide

Sorry for the inconvenience.

I finally found that require.cache causes this bug.

I'll tackle the bugs later!

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide

Fixed @react-ssr/express@0.2.6 :)

Thank you in advance!

I'll add the feature of HMR (hot module replacement) for the better developer exprerience!

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide

Added the hot reloading feature as of @react-ssr/express@0.3.0!

Please check out updated example repository:

github.com/saltyshiomix/react-ssr-...

Collapse
 
sagarbetkar profile image
Sagar Betkar • Edited

Great Work!
I am using your @saltyshiomix / react-ssr-jsx-starter repo. I am trying to load images on my react pages but unable to do. Please help me with this. It would be a great help if you add it to your repo @saltyshiomix / react-ssr-jsx-starter .
Thank you.

Collapse
 
saltyshiomix profile image
Shiono Yoshihide

Oh, you're right!!

Thank you pointing it out :)