react-node-ssr
v1.2.2
Published
## Overview Simple library for rendering React components on server side in Node.js with customizable posibilities, instead of using template engines
Downloads
7
Maintainers
steevehookReadme
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
Install dependencies:
yarn add react react-dom react-node-ssryarn 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:
title(t: string)- Set HTML page titlelang(l: string)- Set HTML page languagemeta(m: object)- Set HTML page meta datascript(s: object)- Add external script inside HTML pagelink(l: object)- Add external link inside HTML pagestyle(s: object)- Add inline critical style inside HTML pagerender(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