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.

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 JSX source files somewhere below react4xp/entries/ or site/.

build.gradle                    (1)
gradle.properties
settings.gradle
package.json

react4xp.config.js              (2)

src/
  main/
    resources/
      react4xp/                 (3)
        entries/
        shared/
      headless/
        guillotineApi.es6       (4)
        guillotineRequest.es6

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 react4xp npm package are installed right.
2	react4xp.config.js: Place to add extra externals 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

Run the build process:

enonic project deploy

With versions 1.1 and below of the react4xp starter, you must run npm install before this; gradle.build imports some extra react4xp-related gradle tasks from node_modules/@enonic/react4xp/. At version 1.2 and above, build.gradle in the starter is set up to auto-check and install.

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 [<name.of.your.app>] installed successfully

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

→ Hello React

Setting up your project

Contents

Create project

Project structure

Build and Deploy

Contents

Contents