Router w/Static HTML Integration Tutorial
How it works:
- Generate static HTML pages in a subfolder of the site, based on static HTML templates.
- Include a Router to enable:
- Page URLs anywhere in the site
- Redirects defined in CMS
Overview:
The Router integration method:
- Serves static content (images, files) out of a public content folder
- Adds a route to the Node.js / Express.js application, to serve CMS pages and redirects
The route should be placed at the end of other application routes.
Integration:
- In the jsHarmony CMS, on the Sites tab, create a new Site
- Download the jsHarmony Redirects Component and extract into your site's SFTP folder. This contains a "jshcms_redirects" component that exports the Redirects as JSON into a file named "jshcms_redirects.json" in the root of the site. A site_config.json file is also included that sets the "redirect_listing_path" parameter to the new file.
- In the Site Settings, add a Deployment Target:
- Configure the Deployment Target to publish to a folder in the Express.js application
- Set the URL Prefix to the path prefix for the CMS Content files
- Set the "Override Page URL Prefix" to the path prefix for the CMS Page URLs, if different from the CMS Content path
- Generate the Integration Code:
- In the Deployment Target, click on the "Integration Code" tab
- Select the Environment "Node.js / Express.js - Router" 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, add the jsHarmonyCmsRouter code from the Integration Code tab in step 4
const express = require('express');
const jsHarmonyCmsRouter = require('jsharmony-cms-sdk-express').Router;
const cmsRouter = new jsHarmonyCmsRouter({
redirect_listing_path: "jshcms_redirects.json",
cms_server_urls: ["https://cms.example.com/"],
content_path: "path/to/published_files"
});
var app = express();
app.use(cmsRouter.getRouter({ generate404OnNotFound: true }));
var server = app.listen(8080);
* Be sure to update the "content_path" property to match the CMS files publish folder in your PHP application
- Create a Page Template:
- Local Page Templates can be defined in the CMS, by using the Site's SFTP
- Remote Page Templates can be defined in a subfolder of the Express.js application, and linked to the CMS in the Site Settings "Page Templates" tab.
- If using Remote Page Templates, add the CMS Editor Launcher to each remote page template. Copy the integration code from the Integration Code tab in step 4
<script type="text/javascript" class="removeOnPublish" src="/.jsHarmonyCms/jsHarmonyCmsEditor.js"></script>
<script type="text/javascript" class="removeOnPublish">
jsHarmonyCmsEditor({"access_keys":["****ACCESS_KEY*****"]});
</script>
* Be sure to add the "removeOnPublish" class to the Launcher script tags, so that it will not be included in the published pages
* The jsHarmonyCmsEditor.js file is automatically served by the jsHarmonyCmsRouter. The path can be updated in the Router config.cms_clientjs_editor_launcher_path parameter
- Add CMS content and publish to the Deployment Target, generating HTML files in the subfolder of the Express.js application