express-react-middleware
A middleware able to render react components in your server with node.js as views, it is also able to render routes in an array of routes in react-router.
Why?
Have you ever saw that whenever you're making a new project or when an existing project have to be updated you must to follow and do a lot of steps to achieve the desired outcome in the server when you want to apply SSR? Well, this middleware avoid having to remember all those steps even react-router.
What are the target projects?
- For existing projects.
- For new projects.
- Projects who want to have better control of what components needs to be rendered in a specific resource.
- Projects who want to update their old configurations.
Pre-requisites
- A html file to use as template.
- The html file must include a div or any element with an id attribute to mount the component.
- The components path or a file with all the routes. (see react-router v4 docs)
Installation
npm install --save express-react-middleware
or
yarn add express-react-middleware
Usage
There are 2 ways to use it in and is using a routes config file or by resolving the components.
template
The template is just an html file with a basic markup like this:
Default template, this doesn't render any component
This is an example of how to require a template (synchronous, recommended way):
const root = let template = { try return ; catch err // If the template file *.html is not found then it throws an error instead of continuing the flow. throw err; };
options
name | type | optional | required | sync render | async render | description |
---|---|---|---|---|---|---|
templateHTML | string | x | √ | √ | √ | The instance of the html file |
mountId | object | x | √ | √ | √ | The id of the element where the component or components will be rendered |
componentsPath | string | √ | (√/x) | √ | √ | Here you have to pass the absolute path to locate the components. (required if routes option is not set) If routes option is present this option is ignored. |
routes | array | √ | (√/x) | √ | √ | the routes file used in react-router to match and render the components. (required if componentsPath is not set) |
Example of how the options should be written:
const root = let options = templateHTML: template mountId: "root" componentsPath: ; // or with a file with the routes used in react-router: // ... let options = templateHTML: template mountId: "root" routes: collection: routes /*extractComponent: boolean, default false*/ ;
Use it in your app, router or elsewhere you want:
// ... app;
Render:
When the middleware has already been set you will find a new function property with the name render in the request object.
Arguments:
The req.render
could take some arguments:
name | type | optional | used in sync render | used in async render |
---|---|---|---|---|
component | string | √ | √ | √ |
props | object | √ | √ | √ |
callback | function | √ | x | √ |
Returns:
When you have used the req.render
function it will return an object with almost 6 properties:
name | type | description |
---|---|---|
html | string | value containing the template html with the component rendered, the initial state and props. |
context | object | used in redirections or to set customs status code to the response. |
component | object | The component found. |
props | object | The properties that you passed before the render process |
template | string | The original template value without any modification. |
changes | object | Contains almost all the changes occurred |
Synchronous:
app;
Asynchronous:
app
Response:
app;
Tests:
npm run test
👍
Examples:
See examples folder