Client-side JS Router w/Page Object

Router w/Static HTML Integration Tutorial

How it works:

• Generate a JSON object for each page
• Include the jsharmony-cms-sdk-clientjs script on a catchall page to enable:
  • Loading the CMS content as a JSON object, and rendering it to the page
  • Page URLs based out of the root of the site
  • Custom Redirects defined in CMS
  • Single-Page / SPA Integration

Overview:

The Router integration method:

• Serves static content (images, files, and JSON page data) out of a public content folder
• Uses a client-side script to load the content and render CMS pages and redirects

Integration:

1. In the jsHarmony CMS, on the Sites tab, create a new Site
   
   
2. 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.
   
   
3. In the Site Settings, add a Deployment Target:
   1. Configure the Deployment Target to publish to a folder in the client-side JS application
   2. Set the URL Prefix to the path prefix for the CMS Content files
   3. Set the "Override Page URL Prefix" to the path prefix for the CMS Page URLs, if different from the CMS Content path
      
      
4. Generate the Integration Code:
   1. In the Deployment Target, click on the "Integration Code" tab
   2. Select the Environment "Client-side JavaScript - Router" to get the Integration Code
      
      
5. Download the jsHarmonyCmsClient.min.js library into your project. Alternatively download from the jsharmony-cms-sdk-clientjs GitHub page or NPM
   
   
6. Add a "catchall" page to the web server, to load the CMS Router when no existing page is found.
   * If integrating with an existing client-side JS router, skip steps 6-7 and instead use the advanced SDK methods to connect to your existing router

   //Node.js Server Example (add to end of routes):
   app.get('*', function(req, res){ res.sendFile(__dirname + '/default_page.html'); });

   # Apache Server mod_rewrite Example
   RewriteRule ^(.*)$ default_page.html [L,QSA]

7. Add the Integration Code from step 4 into the catchall page:
   * Be sure to update the path to jsHarmonyCmsClient.min.js to where the file was saved in step 5
   

   <script type="text/javascript" src="path/to/jsHarmonyCmsClient.min.js"></script>
   <script type="text/javascript">
   var cmsClient = new jsHarmonyCmsClient({
       redirect_listing_path: "jshcms_redirects.json",
       access_keys: ["*****ACCESS_KEY*****"]
   });
   cmsClient.Router();
   </script>

8. Add the catchall Page to the CMS Site Page Templates
   1. In the CMS Site Settings, select the "Page Templates" tab
   2. Add a Remote Page Template, entering a Name, Title, and the full URL to the catchall page, ex. https://example.com/default_page.html
   3. Edit the Config for the new Page Template by clicking the pencil icon, and enter the following to export to JSON on publish:

      {
        "templates": { "publish": "format:json" }
      }

9. Build out page template using HTML and the CMS Page Template tags and attributes to define the CMS editable content areas in the catchall page.  A simple example template is shown below:
   * Preview the template by clicking "Dev Mode" in the Site Page Templates tab.

   <h1 cms-title cms>Page Title</h1>
   <div cms-content-editor="page.content.body">Page Content</div>

10. Add CMS content and publish to the Deployment Target, generating JSON files in the subfolder of the client-side JS application