This is a sample Crafter CMS blueprint that demonstrates a multi-domain setup on Crafter CMS with a NodeJS server-side rendered React application which is later hydrated browser-side.
It demonstrates fetching data/content from Crafter CMS both on the server-side and client-side (browser) and the interaction between SSR/hydration. In addition to data fetching, it demonstrates integrating Crafter CMS In-Context Editing into your React/SPA application.
It uses Redux to help with the app state and hydration.
- Download, build and start Crafter CMS.
- While the build is running, use this time to go to your
/etc/hosts
file and addauthoring.sample.com
andpreview.sample.com
to your loopback alias entries. This will allow showcasing how things could work on a real deployment with different domain names. - On Crafter CMS, use the "Create site dialog" > "Remote Git Repository" option to create your site based on this repo. Name it headless-ssr-store. Note that right after creating the site, you may see a 404 on Preview since your Express app is not running yet.
- Run the express server by going into {siteRoot}/sources/react-ssr and running
npm install
followed bynpm run start
. Then, go topreview.sample.com:3000
to see the Express app. This URL will only work if you previously and successfully configured your/etc/hosts
file, of course. - Navigate/reload to Preview on Crafter CMS and you should see the site.
Once you've completed the setup and have the site up and running, you can see a initial render with the catalog products. These are fetched server side and then hydrated by ReactDOM once the page loads.
If you click the pagination links, you see the second page coming without page refreshing. The page data is fetched asynchronously by React using the GraphQL endpoint in Crafter CMS.
Content fetching is shown in two ways:
- GraphQL, both server-side and client-side - see
sources/react-ssr/server/render.js
andsources/react-ssr/src/components/App.js
. - Content SDK - see
sources/react-ssr/src/components/App.js
. This is just shown client side but can be used in the same way server side.
ICE
If you click the pencil icon on Crafter's top toolbar (In-Context Editing), you should see pencils showing up on each product. Clicking a pencil would open that content entry for editing on the CMS.
##
# Host Database
##
127.0.0.1 localhost YourComputerName authoring.sample.com preview.sample.com
255.255.255.255 broadcasthost
::1 localhost YourComputerName authoring.sample.com preview.sample.com