Docs Developer Site
Developer Docs React4xp Refactored Demo

React4XP Demo

Contents

Spin up your own React4XP personal demo in the cloud, or on your local machine.

What?

A complete demo instance with sample content and React4XP front-end.

Choose from the alternatives below:

r4xp demo

To learn the details behind how this front-end was built, head on to the first chapter of the tutorial instead.

Alternative 1 - Enonic Cloud

Follow these steps to get the demo up and running on our Free plan:

  1. Sign up for Enonic cloud

    Verify your e-mail and create the account

  2. Create a new solution

    Use the template called Headless Movie DB, and complete the setup.

  3. Link the front-end to your content

    Once the solution is ready, launch XP admin and open Content Studio. Edit the Headless Movie DB site, add the React4XP Demo application and press Save

    You should how see the new front-end in Content Studio.

  4. Publish the changes

Optionally expose the site on a public URL by following the steps below:

  1. Select Ingresses from the main menu and click Create

  2. Give it a suitable name, i.e. moviedb

  3. Set the target to /site/hmdb/master/hmdb

  4. Accept creating a new domain, and set the path to /

  5. Leave IDprovider empty and click Create on the final step

  6. Visit the Ingress link to see the live site.

If the live site is showing the default preview of Headless Movie DB, you have not published your changes to the site.

Congratulations, you just deployed a live a React site powered by Enonic! 🚀

Alterrnative 2 - Enonic SDK

Follow the steps below to build and run the demo an a local Enonic developer instance:

  1. Install Enonic CLI if you have not already done this

    npm install -g @enonic/cli

  2. Create a new sandbox by running this command in your terminal:

    enonic sandbox create r4xpdemo -t hmdb -f

  3. Create the R4XP front-end app by running this command from a new terminal window:

    enonic project create my.first.r4xp -r tutorial-react4xp -s r4xpdemo -f

  4. Build and deploy the app to your XP sandbox

    cd r4xpdemo/
enonic project deploy

  5. Link the front-end with your content

    Launch XP admin and open Content Studio. Edit the Headless Movie DB site, add the React4XP Demo application and press Save

    You should how see the demo in Content Studio.

    The live version of the site can be found on http://localhost:8080/site/hmdb/master/hmdb

Congratulations, you just built a React site powered by Enonic! 🚀

Contents

Contents

AI-powered search

Juke AI