Node.js Standalone Page

Resources

Standalone Page Integration Tutorial

How it works:

Add CMS content to an existing page in the site
Generate a JSON object for that page on publish
On page view:
- Load the JSON object and render it in a server-side template

Standalone Page Limitations:

Standalone pages need to be configured one-at-a-time in the CMS

Overview:

Standalone Integration can be used to add editable CMS content areas to existing individual pages in an application. This can be used together with, or apart from, a site with a Router Integration.

Integration:

In the jsHarmony CMS, on the Sites tab, create a new Site
In the Site Settings, add a Deployment Target:
1. Configure the Deployment Target to publish to a folder in the Express.js application
2. Set the URL Prefix to the path prefix for the CMS Content files
Generate the Integration Code:
1. In the Deployment Target, click on the "Integration Code" tab
2. Select the Environment "Node.js / Express.js - Standalone" to get the Integration Code
In your Node.js / Express.js application, install the "jsharmony-cms-sdk-express" module:
```
npm install jsharmony-cms-sdk-express
```

In your Node.js / Express.js application, initialize the CMS Router using the Integration Code from step 3, and add code to load and pass the CMS content as a parameter to the standalone page render:

// Initialize the jsHarmonyCmsRouter
const jsHarmonyCmsRouter = require('jsharmony-cms-sdk-express').Router;
const cmsRouter = new jsHarmonyCmsRouter({
    cms_server_urls: ["https://cms.example.com/"],
    content_path: "path/to/published_files"
});

// Example - existing page route (be sure to use the async keyword)
app.get('/standalone_page', async function(req, res, next){
  // In your existing page route, load the page content and pass it as a parameter
  // * If your standalone page URL does not match the CMS page path, pass the CMS page path as a parameter
  var page = await cmsRouter.getStandalone(req); // or (req, '/cms_page_path');
  res.render('standalone_page.ejs', { page: page });
});

* Be sure to update the "content_path" property to match the CMS files publish folder in your PHP application

In the CMS, add the standalone page to the Sitemap:
1. On the Pages tab, add a new page
2. Set the Template to "<Standalone>"
3. Set the Template Path to the full URL of the standalone page
Add the Editor Launcher script to the top of the standalone page:
```
<%-page.editorScript%>
```
Define the editable content areas in the standalone page, using the Page Template attributes ("cms-title", "cms-content-editor").

* After this step, the standalone page should be editable from the CMS.

Render the CMS Content in the standalone page using the "page" object passed from step 5. Any of the following page properties can be used:

<html>
<head>
  <% if(page.seo.title){ %><title><%=page.seo.title%></title><% } %>
  <% if(page.seo.keywords){ %><meta name="keywords" content="<%=page.seo.keywords%>" /><% } %>
  <% if(page.seo.metadesc){ %><meta name="description" content="<%=page.seo.metadesc%>" /><% } %>
  <% if(page.seo.canonical_url){ %><link rel="canonical" href="<%=page.seo.canonical_url%>" /><% } %>
  <% if(page.css){ %><style type="text/css"><%-page.css%></style><% } %>
  <% if(page.js){ %><script type="text/javascript"><%-page.js%></script><% } %>
  <%-page.header%>
  <%-page.editorScript%>
</head>
<body>
  <h1 cms-title><%=page.title%></h1>
  <div cms-content-editor="page.content.body"><%-page.content.body%></div>
  <%-page.footer%>
</body>
</html>

If applicable, add advanced CMS features, such as a Page Template Config, Static Page Components, and onRender functions:

<!-- Page Template Config -->
<script type="text/cms-page-config">
  {
    "default_content": { "body": "Default Page Content" },
    "properties": {
      "fields": [
        { "name": "showTitle", "caption": "Show Title", "control": "checkbox", "default": "Y", "controlparams": { "value_true": "Y", "value_false": "N" } },
        { "name": "containerClass", "caption": "Container CSS Class" },
        { "name": "containerStyle", "caption": "Container CSS Style" },
      ]
    }
  }
</script>

<!-- Static Page Component -->
<div cms-component="breadcrumbs" cms-component-content="breadcrumbs"><%-page.content.breadcrumbs%></div>

<!-- onRender / showIf -->
<% if(page.properties.showTitle!='N'){ %><h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');"><%=page.title%></h1><% } %>

<!-- onRender / addClass -->
<div cms-onRender="addClass(page.properties.containerClass);" class="<%=page.properties.containerClass%>"></div>

<!-- onRender / addStyle -->
<div cms-onRender="addStyle(page.properties.containerStyle);" style="<%=page.properties.containerStyle%>"></div>

Publish to the Deployment Target, generating a JSON file in the CMS Content subfolder of the Express.js application, and test.

Phone: 630-855-7522
1235 Humbracht Cir, Unit F
Bartlett, IL 60103