react-node-ssr

## Overview Simple library for rendering React components on server side in Node.js with customizable posibilities, instead of using template engines

Usage no npm install needed!

<script type="module">
  import reactNodeSsr from 'https://cdn.skypack.dev/react-node-ssr';
</script>

README

React Node SSR

Overview

Simple library for rendering React components on server side in Node.js with customizable posibilities, instead of using template engines

Size: 1.9 KB

build status dependency status Coverage via Codecov JavaScript Style Guide

PRs Welcome

React Node SSR

Install dependencies:

  1. yarn add react react-dom react-node-ssr
  2. yarn add babel-cli babel-preset-react babel-preset-env nodemon -D

Make sure you have babel configured in .babelrc:

{
    "presets": [
        "react",
        "env"
    ]
}

Add a serve or start script in package.json

{
    "scripts": {
        "serve": "nodemon --exec babel-node --presets react,env ./examples/server.js"
    }
}

Basic example to follow along:

Welcome.jsx

import React from 'react';

class Welcome extends React.Component {
    render() {
        return (
            <div>
                <h1>Welcome Howdy!</h1>
            </div>
        );
    }
}

export default Welcome;

server.js

import express from 'express';
import React from 'react';
import ReactNodeSSR from 'react-node-ssr';
import Welcome from './Welcome';

const app = express();

app.get('/', (req, res) => {
    const html = ReactNodeSSR
    .title('Page Title')
    .meta({charset: 'UTF-8'})
    .meta({name: 'viewport', content: 'width=device-width, initial-scale=1.0'})
    .meta({'http-equiv': 'X-UA-Compatible','content': 'ie=edge'})
    .lang('en')
    .style({rules: 'body {background: red}'})
    .link({rel: 'stylesheet', href: '/style1.css'})
    .link({rel: 'icon', type: 'image/png', href: 'favicon.png'})
    .script({src: '/srcipt1.js', defer: 'defer'})
    .render(<Welcome/>);
    
    res.send(html);
});

app.listen(3000, () => console.log('Up and running!'));

generated HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page Title</title>
<link rel="stylesheet" href="/style1.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<style>body {background: red}</style>
<div data-reactroot=""><h1>Welcome Howdy!</h1></div>
<script src="/srcipt1.js" defer="defer"></script>
</body>
</html>

Docs:

  1. title(t: string) - Set HTML page title
  2. lang(l: string) - Set HTML page language
  3. meta(m: object) - Set HTML page meta data
  4. script(s: object) - Add external script inside HTML page
  5. link(l: object) - Add external link inside HTML page
  6. style(s: object) - Add inline critical style inside HTML page
  7. render(c: React.Component) - React component to render in HTML template

Have fun!

Upcoming:

  • Express like middleware
  • More possibilities for customizing the html template
  • Integrations with template engines
  • Integration with webpack builds
  • Possibility to import css in js or css modules or scss files directly into React components
  • Redux like store for HTML template
  • Add possibility to attach handlers in statically generated HTML from server using React
  • Email templates crafting with the help of React