{"data":{"site":{"siteMetadata":{"title":"Serge van den Oever's weblog","author":"Serge van den Oever"}},"markdownRemark":{"id":"bbee1e63-0e99-55bb-aad5-89723567e61f","html":"

In a previous post I described how to use TypeScript in\nbuilding JSS components. In this post I use the results of this connected hello-jss-typescript\nJSS app to build a custom Node express web server that consumes the layout service to render\npages. This process is described by Sitecore in the documentation Headless SSR via sitecore-jss-proxy.\nI took the sample node-headless-ssr-proxy and worked from there.

\n

I placed the code in a folder hello-jss-typescript-node next to the folder hello-jss-typescript\nas described in my post Developing React components in Typescript with Sitecore JSS 9.1.

\n

The example provides an Express web server that I modified slightly for easy\nexperimentation. It is great that all configuration is done through environment variables, but for development it is easier to use another\napproach. I added dotenv using npm install dotenv and added at the\ntop of index.js the code:

\n
if (process.env.NODE_ENV !== 'production') {\n  require('dotenv').config()\n}
\n

This enables us to add a file .env in the root to manage the required\nenvironment variables:

\n
SITECORE_JSS_APP_NAME=hello-jss-typescript\nSITECORE_JSS_SERVER_BUNDLE=../hello-jss-typescript/build/server.bundle.js\nSITECORE_API_HOST=http://hello-jss-typescript.dev.local\nSITECORE_LAYOUT_SERVICE_ROUTE=http://hello-jss-typescript.dev.local/sitecore/api/layout/render/jss\nSITECORE_API_KEY{57231674-4CC9-48AA-AFF0-190DB9D68FE1}\nSITECORE_PATH_REWRITE_EXCLUDE_ROUTES=\nSITECORE_ENABLE_DEBUG=true
\n

I also modified the index.js file slightly to work together with the\nhello-jss-typescript project:

\n
if (process.env.NODE_ENV !== 'production') {\n  require('dotenv').config()\n}\n\nconst express = require('express');\nconst compression = require('compression');\nconst scProxy = require('@sitecore-jss/sitecore-jss-proxy').default;\nconst config = require('./config');\n\nconst server = express();\nconst port = process.env.PORT || 3000;\n\n// enable gzip compression for appropriate file types\nserver.use(compression());\n\n// turn off x-powered-by http header\nserver.settings['x-powered-by'] = false;\n\n// Serve static app assets from local /dist folder\nserver.use(\n  '/dist/hello-jss-typescript/',\n  express.static('../hello-jss-typescript/build', {\n    fallthrough: false, // force 404 for unknown assets under /disthello-jss-typescript/\n  })\n);\n\n// For any other requests, we render app routes server-side and return them\nserver.use('*', scProxy(config.serverBundle.renderView, config, config.serverBundle.parseRouteUrl));\n\nserver.listen(port, () => {\n  console.log(`server listening on port ${port}!`);\n});
\n

Execute npm start and voila, the site is running on http://localhost:3000, completely separate from the Sitecore server.

\n

Note that the .vscode folder contains a launch.json configured to debug the Node code in Visual Studio Code.

\n

The complete example can be found at https://github.com/macaw-interactive/hello-jss-sitecore-node.

","timeToRead":2,"frontmatter":{"title":"Render Sitecore 9.1 JSS site using separate node server","date":"February 07, 2019","spoiler":"Use a custom Node based server to render Sitecore 9.1 JSS pages."},"fields":{"slug":"/sitecore_jss_typescript_node/"}}},"pageContext":{"slug":"/sitecore_jss_typescript_node/","previous":{"fields":{"slug":"/sitecore_jss_typescript/"},"frontmatter":{"title":"Developing React components in Typescript with Sitecore JSS 9.1"}},"next":{"fields":{"slug":"/sitecore_jss_umbrella/"},"frontmatter":{"title":"Umbrella for Sitecore JSS"}}}}