React Standalone Page

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 using a React component

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:

1. In the jsHarmony CMS, on the Sites tab, create a new Site
   * Skip steps 1-2 if you already have a jsHarmony site configured for this application
   
   
2. 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 and images will be published, for example "/content/"
      
      
3. 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
      
      
4. In your React application, install the "jsharmony-cms-sdk-react" module:

   npm install jsharmony-cms-sdk-react

5. In your React application, ensure the that content folder from step 2 exists:

   mkdir public/content

6. 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>
   );

7. In your React application, create a new component for the Standalone page, ex "SampleStandalonePage.tsx", using jsHarmony CMS Page Template attributes ("cms-title", "cms-content-editor"):

   import React from 'react';
   import { JshCmsContent } from 'jsharmony-cms-sdk-react';
   
   export const SampleStandalonePage: VFC<{}> = props => {
     return <JshCmsContent>
       <h1 cms-title="true">Page Title</h1>
       <div cms-content-editor="body">Page Content</div>
     </JshCmsContent>
   };

8. In your React Router, add a route for the new standalone page:

   import React from 'react';
   import { BrowserRouter, Routes, Route } from "react-router-dom";
   import { SampleStandalonePage} from './SampleStandalonePage.tsx';
   
   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/sample-standalone-page" element={<SampleStandalonePage />}/>
         </Routes>
       </BrowserRouter>
     );
   }
   
   
   export default App;
   

9. In order to publish multiple content areas, configure the page config in the standalone page's JshCmsPageConfig component:
   

   import React from 'react';
   import { JshCmsContent, JshCmsPageConfig } from 'jsharmony-cms-sdk-react';
   
   export const SampleStandalonePage: VFC<{}> = props => {
     return <JshCmsContent>
       <JshCmsPageConfig config={{
         content: {
           col1: { title: "Column 1" },
           col2: { title: "Column 2" }
         }
       }} />
       <h1 cms-title="true">Page Title</h1>
       <div cms-content-editor="col1">Column 1</div>
       <div cms-content-editor="col2">Column 2</div>
     </JshCmsContent>
   };

10. 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
       
       
11. Edit the page content in the CMS, and publish to the Deployment Target, generating a JSON file in the content folder of the React application.