There has been a lot of interest in the recently announced React SDK, but a number of people have had trouble getting the SDK examples to work. This step-by-step guide will walk you through the entire process.
1. Set up your CMS instance
In your CMS instance, create a new site root and ensure that you include Component Library in the process (you do not need to install the samples or rebuild). Make a note of the site root and project asset IDs, you'll need these later.
Download the Component Library patch from the React SDK project page. You will need to apply this patch using Content Xcelerator to import the patch file over the top of your new project (use the project asset ID as the target folder).
2. Set up of your local development environment
Clone the DXM SDK Examples repo from Github. This will include a folder with a relative path of React/bootstrap-blog, which I'll refer to as the example project source root. This is the React SDK example that we're going to work on.
Create a new file in the project source root called .env. Edit this file and set up values for the following environment variables:
| Key |
Description |
| CMS_INSTANCE |
DXM Instance Name. |
| CMS_USERNAME |
DXM Username with access to create Assets, Models, Templates, etc. |
| CMS_PASSWORD |
Pretty obvious. |
| CMS_API_KEY |
DXM Developer API Key - Can be obtained by contacting Crownpeak Support. |
| CMS_SITE_ROOT |
DXM Site Root Asset Id (from step 1 above) |
| CMS_PROJECT |
DXM Project Asset Id (from step 1 above) |
| CMS_WORKFLOW |
DXM Workflow Id (to be applied to created Models). Look in the 'Info' panel on an asset in your CMS instance that has the correct workflow applied to find this value. |
| CMS_SERVER |
(Optional) Allows base Crownpeak DXM URL (cms.crownpeak.com) to be overridden. |
Install the project dependencies by running 'yarn install' in the project source root from the command line or IDE.
Start the local development server by running 'yarn start' in the project source root. Check the status messages to find the localhost address that the dev server is using to check out the starting view.
3. Scaffold the CMS
The next step is to have the SDK analyse the local project and create all of the CMS elements (components, templates, models, content folders and so forth). Do this by running 'yarn crownpeak' in the project source root.
Once the command completes, you will be able to switch to the CMS and see the results of running this.
4. Create Content
In the CMS, you can create new content in the 'Blog Pages' content folder. Once you have the content created, preview the asset to see the generated in-CMS preview.
You can switch the preview to the JSON view by selecting "View JSON Feed" from the output dropdown. As you're still in preview, the browser is trying to render the JSON, which doesn't work so well. You can see the "raw" output by selecting View > Output from the navigation.
