Docs Developer Site

Enonic XP 6 - Your first Enonic Application

Contents

A step-by-step tutorial for building your first application on the Enonic platform

This documentation relates to Enonic XP 6 - visit the getting started guide for XP 7 to use the latest version
Ready…​Set…​Code!

In order to complete this tutorial, the Enonic development environment must be installed on your computer: https://developer.enonic.com/enonic-101/install-developer-environment

Setting up your project

With the development set up, you are ready to create a project structure for the application. To be efficient, we will use an script to initialize our project from a template:

  1. Go to the Vanilla Starter Kit on Enonic Market

  2. Click the Clone button.

  3. Follow the instructions run the init-project command. Use the name my.first.app

  4. Verify project files. The command will now have generated a project file structure:

build.gradle (1)
gradle.properties (2)
src/
 main/
  resources/ (3)
   assets/ (4)
   application.svg (5)
   application.xml (6)
1 Contains metadata on the maker of the app and more
2 Specifies the name and version of the app and more
3 The main directory where code is placed
4 This is where we place css, images and javascript files to be served directly
5 Replace this icon to get a different icon for your app
6 Optionally change the description of your app here
The other files and folders in the project structure are not relevant for this tutorial.

Building and Deploying

Now that we have a project, its time to build and deploy the app to the development environment.

  1. Change directory to your newly created project folder

  2. Run the build script. The app file will be placed in the build/libs/ folder.

    ./gradlew build

  3. Deploy the app. This command will be placed

    ./gradlew deploy

  4. Verify that the app is installed and started from the Applications tool.

My First app started

Adding a root controller

Its time to contribute some code in the form of a simple "Hello App" controller. By placing a Javascript file called main.js in the resources/ folder of our project, we instantly have a root controller for our web application:

  1. Create a new file called src/main/resources/main.js in your project.

  2. Add some code to the main.js file and save:

    exports.get = function() {
    return {
        body: 'Hello App',
    };
}

  3. Build and deploy your application once more. NB! The deploy command will both build and deploy the app

    ./gradlew deploy

  4. Test the webapp. It should be available on http://localhost:8080/app/my.first.app You can also find the link from the admin Applications UI. If everything went well, it will look somethink like the screenshot below:

Output from main.js controller
Congratulations on building your first Enonic App!
— The Enonic Team

Contents