React Router w/Static HTML

Resources

Router w/Static HTML Integration Tutorial

How it works:

Generate static HTML pages in a subfolder of the site, based on static HTML templates.
Integrate with React Router to enable:
- Page URLs anywhere in the site
- Redirects defined in CMS

Overview:

The Router w/Static HTML integration method:

Serves static content (images, files) out of a public content folder
Uses React Router to resolve templates, bind links for single-page applications, and implement CMS redirects

Note: This integration method does not support React rendering within the static HTML content

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:
1. Configure the Deployment Target to publish to a public folder in the React application
2. Set the URL Prefix to the publicly accessible URL path where the CMS Content files (HTML, JSON, Images) will be published, for example "/content/"
3. Set the "Override Page URL Prefix" to the path prefix for the CMS Page URLs, if different from the CMS Content path. For example, if URLs should be root-relative, set the Page URL Prefix to "/"
Generate the Integration Code:
1. In the Deployment Target, click on the "Integration Code" tab
2. Select the Environment "React" to get the Integration Code
In your React application, install the "jsharmony-cms-sdk-react" module:
```
npm install jsharmony-cms-sdk-react
```
In your React application, ensure the that content folder from step 3 exists:
```
mkdir public/content
```
In your React application, create a folder for your CMS editor template, and generate the jsHarmonyCmsEditor.js file:
```
mkdir public/.jsHarmonyCms
npx jsharmony-cms-sdk-react editor public/.jsHarmonyCms
```

In your React application, add the code from the Integration Code tab in step 4
* Please note - the JshCms component needs to be an ancestor of all CMS content and routing components

import { JshCms } from "jsharmony-cms-sdk-react";
import React from "react";
import { createRoot } from "react-dom/client";

// Configure the CMS
const jshCmsConfig = {
    pageFilePath: "/path/to/page_files",
    redirectListingPath: "path/to/jshcms_redirects.json",
    accessKeys: [/*"ACCESS KEYS"*/]
};

const root = createRoot(document.getElementById("root")!);

root.render(
    <JshCms {...jshCmsConfig} >
        <App />
    </JshCms>
);

In your React Router, add a catchall route, typically at the end of the other application routes, to serve CMS files:

import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { JshCmsRoute } from 'jsharmony-cms-sdk-react';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<JshCmsRoute path="*" bindLinks={true} />}/>
      </Routes>
    </BrowserRouter>
  );
}


export default App;

Create a Page Template:
1. Local Page Templates can be defined in the CMS, by using the Site's SFTP
2. Remote Page Templates can be defined in a public subfolder of the React 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

For example, create a template "public/.jsHarmonyCms/default.html", and paste the following code (ensuring the your access keys are copied from the step 4 integration code):
```
<!DOCTYPE html>
<html>
<head>
  <cms-page-config>{ "title": "Default Template" }</cms-page-config>
  <script type="text/javascript" class="removeOnPublish" src="/.jsHarmonyCms/jsHarmonyCmsEditor.js"></script>
  <script type="text/javascript" class="removeOnPublish">
  jsHarmonyCmsEditor({"access_keys":["****ACCESS_KEY*****"]});
  </script>
</head>
<body>
  <h1 cms-title>Page Title</h1>
  <div cms-content-editor="body">Page Content</div>
</body>
</html>
```
* Be sure to include the "removeOnPublish" class to the Launcher script tags, so that it will not be included in the published pages

* As mentioned above, be sure to define the Remote Page Template in the CMS in the Site Settings "Page Templates" tab, ex:
Name: Default
Title: Default Template
URL: http://localhost:3000/.jsHarmonyCms/default.html
Add CMS content and publish to the Deployment Target, generating HTML files in the public subfolder of the React application

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