React markup service is a executable that will run an api to request markup for react components.
MIT License
Currently only supports node 6+
React markup service is a executable that will run an api to request markup for react components.
Server side rendering React components sometimes can be tricky when your backend architecture is something other than NodeJS. Luckily there is a few solutions for this, like react-stdio, but sometimes this can be slow as well. Spawning external processes and starting up a node process can be a bottle neck. This instead of spawning an external process each time we need new markup we just starts up a server that serves an api for the markup. react-markup-service
allows you to do this as close or far away from the application as you like.
npm install react-markup-service
The service needs to run in the root of your project. The project can be any structure, it just needs to have react components somewhere in the file directory.
Installing the package gives you access to the react-markup-service
executable. The only option currently is --hooks
which points towards your hooks file.
react-markup-service --hooks='./path-to/foo'
The way to configure the service is to write a hooks file. This allows you to hook into the functionality of the service.
// example hook file
module.exports = {
beforeServiceStarts(done) { done(); },
afterServiceHasStarted() {},
onServiceRequest(x, y, next) { next(); },
onError(err) { throw err; },
decorateComponent(x) { return x; },
}
beforeServiceStarts is a great way to precompile your components or load up any configuration needed for you components to render. The beforeServiceStarts
method will be passed a done
function to be called when the method is done. By passing options to the done function you can configure the service.
const options = {};
...
beforeServiceStarts(done) {
exec('npm run compile', () => {
done(options);
});
}
...
options
option key | description | type | defaults |
---|---|---|---|
port | the port that the service will listen on | number | 5000 |
server | a server object, currently this is expecting a express server with middleware capabilities. | object | express() |
apiBase | the base for the api to be set at, eg. /api/ would put the render endpoint at /api/render
|
string | '' |
router | a router object, currently this is a express.Router object wanted | object | express.Router() |
compiledDir | the path to the root of the compiled javascript, this will allow you to shorten your paths to components when making a post to the api. | string | './compiled' |
afterServiceHasStarted
hook is a way you could signal other apps to let them know the service is ready to use.
...
afterServiceHasStarted() {
// service is ready
}
...
onServiceRequest
is a piece of middleware. It will allow you to setup custom logging, or authenticate request to the service.
...
onServiceRequest(req, res, next) {
next();
}
...
decorateComponent
allows you to render out your component, with things like a react-redux
Provider.
...
decorateComponent(Component, props) {
return React.createElement(Provider, {store: configStore(props)},
React.createElement(Component)
);
}
...
the api consist of mainly on endpoint /render
, render is a POST
endpoint, and wants a json object as the post body. The post body is the props
of the request. You also need to set a component
key in the body.
curl -X POST -d '{"component": "./foo-component.js"}' http://localhost:5000/render
There is also an alive router, may be tmp, to check if the service is alive.
curl http://localhost:5000/alive
We use eslint please follow it. and plz run npm test
!