Setting up your project
Setting up your 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.properties 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.properties (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.properties: 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.|
To build and deploy the starter app, first run an NPM install from your shell, in the project folder:
|The react4xp gradle build in the next step imports some extra configuration from node_modules/react4xp/ . So this NPM install step only needs to be run the first time you set up the app (or whenever you’ve cleaned or changed relevant parts of node_modules / the NPM setup).|
Then, run the actual build process:
enonic project deploy
Accept starting the sandbox.
To verify that your app started successfully, you should find an entry similar to this in the sandbox log:
Now you’re ready to get started with the first lesson chapters.