Docs Developer Site
DeveloperDocsReact4xpStableSetup

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 essentials -f

This will create and start a sandbox containg essential applications.

Create the app

From a new terminal window, run the following command to create the application.

enonic create my.first.r4xp -r starter-react4xp -s r4xptutorial -f

This command creates an app named my.first.r4xp. It uses the React4xp starter Github repo as a starter, and links it to the r4xptutorial sandbox.

Project structure

You will not get a typical Enonic project structure. The biggest news are react4xp.config.js and the folder src/main/resources/react4xp/.

build.gradle (1)
package.json
react4xp.config.js (2)
src/
  main/
    resources/
      react4xp/ (3)
        entries/
        shared/
      site/ (4)
1 Core build files, will contain references to lib-react4xp library and the @enonic/react4xp npm package.
2 React4xp build configuration, here you may add additional globals and tune common React4xp properties.
3 Optionally place React components in these folders. They will be covered in detail throughout the tutorial.
4 Standard site/ folder
The short takeaqay is that you can put your TSX/JSX source files in react4xp/entries/ or witin the site/ structure directly.

Start building

Assuming you did not change any of the values when creating the app, run the following commmands:

cd r4xp
enonic dev

This will build and deploy the application to your sandbox.

Look for a line like this in the sandbox log to verify that the app has started:

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.

Now you’re ready to get started with the first lesson: Hello React.

Contents

Contents