React4XP Demo
Contents
What?
You will run an XP server with a sample dataset, then deploy a R4XP front-end on top of it
| Want to learn what is really happening? Head on to the first chapter of the tutorial instead. |
1 - Setup Enonic
-
Sign up for a free Enonic account: on https://www.enonic.com/sign-up
-
After logging in to your account, create a new solution from
Solutions → Create → Next.js Demo. This will install all required Enonic apps and setup the routes needed. -
From your new solution, click
Environments- Notice the URL to theAPIingress, you will need it later.
4 - Activate preview
With the front-end running, it is time to enable preview in Content Studio.
The fastest way to try it out goes as follows:
-
Launch Enonic XP admin from the solution dashboard.
-
Open Content Studio from the top right
XP menu → Content Studio. -
Choose the
Headless Movie DBproject, then click the root item in the tree structure/hmdband clickEdit.
-
Add the
Next.XPapp to the list of applications on the site. It will override the default preview for the content within the site.
-
Now, instruct Next.XP where to find the frontend server:
Go to Applications tab in Enonic Cloud and select Next.XP app:
PressEdit…button in the app context menu and add the URL and secret of the Vercel app you deployed in step 3:
We are overriding default preview configuration for all sites using the Next.XP app. Use a different keyword than defaultto define multiple front-ends. -
After saving and going back to Content Studio, the preview should update to show your front-end.
How does it work?
The Front-end app steps into the Site Engine pipeline and replaces HMDB’s standard preview.
Congratulations, you now have a React site powered by Enonic! 🚀
