Skip to content
The Entando app-builder
JavaScript CSS Other
Branch: master
Clone or download
gidesan and nicpuddu Plugin and Widget config PoC (#550)
* EN6-13 first PoC version

* EN6-13 fix form display when navigating from plugin list

* EN6-54 empty state for plugin list

* EN6-13 improve test coverage

* EN6-13 improve test coverage

* EN6-13 improve test coverage

* Merge branch 'master' into EN6-13_plugin-config-poc

# Conflicts:
#	package.json
#	src/app-init/router.js
#	src/ui/app/App.js

update 'withKeycloakDisabled' HOC + tests to support both class components and function components
Latest commit 55303a8 Aug 7, 2019

This project was bootstrapped with Create React App.

You can find the most recent version of Create React App here.


The application uses .env files to set up some environment variables.

Dev instances should be using the .env.development.local file while production instances use .env.production

Configurable properties

USE_MOCKS (boolean, default: true)

a boolean used to determine whether the API calls will be against a real Entando Core or if they are just being mocked internally.

DOMAIN (string, default: null)

a string representing the domain name of the Entando Core instance. The protocol is optional and it is possible to specify a subdirectory of the domain. Trailing slashes are not valid and it only vaildates up to 3rd level domains.

All the following would be valid values:

CLIENT_ID (string, default client_id)

string used for the client id during the OAUTH2 authentication process.

CLIENT_SECRET (string, default client_secret)

string used for the client secret during the OAUTH2 authentication process.

DIGITAL_EXCHANGE_UI_ENABLED (boolean, default: false)

a boolean used to determine whether the Digital Exchange UI should be enabled or not.

CMS_UI_ENABLED (boolean, default: false)

a boolean used to determine whether the CMS UI should be enabled or not.

Sample .env file



Clone and set up:

  • Make sure to have git, npm + node installed and up to date.
  • npm install: installs npm dependencies


  • npm run lint: runs the linter. It fails if linting rules are not matched.
  • npm run coverage: runs unit tests. It fails if an unit test fails, or if the minimum coverage threshold is not met.
  • npm run import-plugins: compiles and imports Entando plugins.
  • npm run build: compiles the project and creates the build directory.
  • npm run build-full: runs npm run lint, npm run coverage, npm run import-plugins and npm run build


  • npm start: starts the application in dev mode (local web server)


This app uses SASS to manage stylesheets.

SASS docs

The style files are located in the src/sass directory, with the following structure:

├── app
|   ├── _App.scss       // SASS file for the App component
|   └── _TopNavbar.scss // SASS file for the TopNavbar component
├── index.scss          // file containing all the SASS imports
└── index.css           // output CSS file

The .scss file names are prefixed with _ in order to avoid the SASS compiler to generate their own output CSS file. All the output CSS should be included in sass/index.scss.

The app directory is a domain directory. Domain directories are used to organize files into relevant categories (e.g. there could be also an users domain directory, containing all the style files of components related to users).

Each Component should have its own .scss file, and domain directories should reflect those used in the src/ui directory.

Internationalization (I18n)

This app uses react-intl for internationalization.

react-intl docs.

Translation files are .js files placed under src/locales directory, one for each supported language. The files are named after their language ISO 639-1 code, e.g.

└── locales
    ├── en.js
    └── it.js

API Requests

Api requests are being done using @entando/apimanager. For more information checkout the documentation on NPM.


The easiest way to create an app-builder plugin is using our sample plugin repo. There are all the informations on how to get started, and about plugin requirements.

Here are some more informations on plugins and how they work

You can’t perform that action at this time.