Nitro Powered Motorcycles

    react-node-ssr

    1.2.2 • Public • Published

    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

    Install

    npm i react-node-ssr

    DownloadsWeekly Downloads

    18

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    203 kB

    Total Files

    23

    Last publish

    Collaborators

    • steevehook