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
32
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