Setting up your project


Create project

Set up the starter project locally, run the following command:

enonic project create -r starter-react4xp

Remember to create a new XP sandbox when completing the project wizard.

Don’t have the Enonic CLI? Visit the Getting started guide to install it.

Only want to inject react4xp into your own XP project? The lib-react4xp docs have a section on how to do without the starter. But it’s recommended to go through this introduction first.

Project structure

If you’re used to working with a typical XP project using webpack, the structure in your project root folder will now look familiar - the biggest news are react4xp.config.js and the folders src/main/resources/react4xp/ and src/main/resources/headless.

This is just an overview, no need to know it by heart to get started - we’ll get back to all of these in more detail. For the most impatient, the takeaway is: put your TSX/JSX source files somewhere below react4xp/entries/ or site/.
build.gradle                    (1)

react4xp.config.js              (2)

      react4xp/                 (3)
        guillotineApi.ts        (4)
1 A set of gradle config files and package.json. These define the build process and project structure, and in particular, make sure that the lib-react4xp library and @enonic/react4xp npm package are installed.
2 react4xp.config.js: Place to add extra globals and tune the most common properties of the React4xp project.
3 The react4xp/ folder is opt-in: can be ignored for now, and doesn’t need to contain anything. But when fine-tuning the build later in the tutorial, we’ll get back to why you might find it handy to have a separate place for some of your react components (in ultra-short: the entries/ folder is for react components that can be used directly by React4xp, the shared\ folder is for common components imported by, and shared between, the entries).
4 Under headless/, the starter includes two wrappers that make it easier to use the optional guillotine api for using React4xp in a headless context.

Build and Deploy

  1. Run the build process:

    enonic project deploy
  2. Start the XP sandbox (or accept when the enonic CLI asks you to).

    To verify that your app started successfully, you should find an entry similar to this in the sandbox log:

    2019-04-09 13:40:40,765 INFO …​ Application [<>] installed successfully

Dev mode

There’s also the possibility to start your sandbox in detached dev mode and keep watching for changes as you develop using the react4xp starter.

To work in dev mode, run this command from your shell:

enonic dev

If you want to see XP logs while working with react4xp, make sure to follow enonic’s cli docs dev command section.

Now you’re ready to get started with the first lesson chapters.