How to host server side rendering application which developed in react js. Now I want to deployed in IIS. So, how can I achieve this.
anyone suggest any example.
Please help me.
2 Answers
You still need to have node.js on your server. IIS will just proxy your app.
There is different ways how to achieve that:
- With IISNode project:
Instructions you can find here: http://www.amazedsaint.com/2011/09/creating-10-minute-todo-listing-app-on.html
- With ARR(Application Request Routing) module for IIS:
Instructions you can find here: https://adamtuttle.codes/blog/2015/add-node-to-existing-iis-server/
1 Comment
Michael Ribbons
Great answer. Option 2 allows us to run a react dev server with all the benefits like live reloading, but under a custom domain eg not localhost.
- Install IIS node:
- Install URL rewrite module.
Create Web.config with following declarations in
<configuration>/<system.webServer>:<handlers> <add name="iisnode" path="server.js" verb="*" modules="iisnode" /> </handlers> <rewrite> <rules> <rule name="Server-side rendering" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> </conditions> <action type="Rewrite" url="server.js" /> </rule> </rules>
You can optionally exclude node_modules so they are not served by IIS:
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
Create node.js server, for example with express.js:
import express from 'express'
const app = express()
app.get('*', (req, res) => { /render app here/ });
app.listen(process.env.PORT);
Remember to bind to process.env.PORT as it is passed to your server by the IIS!
Render your app server side, for example like this:
const App = ({message}) => <div>Hello {message}</div>const template = ...
(StackOverflow eats my tags embedded in js... so copy that and use string interpolation)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="app">${body}</div>
</body>
<script async src="/bundle.js"></script>
</html>import { renderToString } from 'react-dom/server'
const renderedComponent = renderToString(<App message={`from ${req.url}`} /> )
const html = template(renderedComponent)
res.send(html)
- Configure your build tool and router.
You can create two separate build targets for the Webpack - one for the client and one for the server. You should also handle in-app routing but that depends on what library you are using.
