Setting up the developer environment
Contents
Set up the developer environment, create, build, and deploy and application.
Install Enonic CLI
The Enonic CLI (Command Line Interface) is an essential tool for developing with Enonic.
If you have npm on your device, run this command:
npm install -g @enonic/cli
If not, here are some alternative ways to install Enonic CLI
To verify that the CLI has been installed, run enonic -v. This should output the version of your installed CLI. To see all available options, simply run enonic.
To upgrade, use enonic latest. If there are new versions you will see instructions on how to upgrade. |
Create a sandbox
We’re going to need a sandbox for this tutorial:
Create a sandbox called r4xptutorial by running this command in your terminal:
enonic sandbox create r4xptutorial -t hmdb -f
This will create and start a sandbox containig some relevant applications, including the Headless Movie DB sample dataset.
Create application
From a new terminal window, run the following command to create the application that will contain the React4XP front-end.
enonic create my.first.r4xp -r starter-react4xp -s r4xptutorial -f
|
This command creates an app named |
Project structure
You will now get a typical Enonic app file structure. Below we’re highlighting some of the most interesting files and folders:
package.json
react4xp.config.js (1)
src/
main/
resources/
react4xp/ (2)
entries/
app.tsx (3)
site/
controllers (4)
site.xml (5)| 1 | Optionally tune common React4xp properties. |
| 2 | React components must be placed within this folder |
| 3 | The React app component |
| 4 | Location of application controller files |
| 5 | Site.xml hooks React4XP into the Site Engine rendering pipeline |
Dev mode
Assuming you did not change any of the values when creating the app, run the following commmands:
cd r4xp enonic dev
This will perform an initial build, and deploy the application to the sandbox.
Once you see the following lines, the application has been built and deployed to the sandbox:
BUILD SUCCESSFUL in 1m 27s 8 actionable tasks: 7 executed, 1 up-to-date
|
In the sandbox log, this shows that app is running: 2019-04-09 13:40:40,765 INFO ... Application [my.first.r4xp] installed successfully |
Because the sandbox is running in dev mode, any changes to the code wihin your app will instantly be picked up.
In the next chapter, you’ll get familiar with basic React4XP rendering.
