Home > Web UI > Web UI Tutorials > HOWTO: Deploy Web UI Within a Nuxeo Server
Web UI

HOWTO: Deploy Web UI Within a Nuxeo Server

Updated: April 10, 2024

This documentation explains the Web UI deployment within a Nuxeo server. The Web UI marketplace installs the needed resources in $NUXEO_SERVER/nxserver/nuxeo.war/ui to run the Web UI.

Structure

$NUXEO_SERVER/nxserver/nuxeo.war/ui% tree
.
├── bower_components
│   ├── ...
├── document
│    │── ... (dynamically loaded document layout element according to document type)
│   ├── file
│   │   ├── nuxeo-file-create-layout.html
│   │   ├── nuxeo-file-edit-layout.html
│   │   ├── nuxeo-file-import-layout.html
│   │   ├── nuxeo-file-metadata-layout.html
│   │   └── nuxeo-file-view-layout.html
│   ├── folder
│   │   ├── nuxeo-folder-create-layout.html
│   │   └── nuxeo-folder-edit-layout.html
│   ├── note
│   │   ├── nuxeo-note-create-layout.html
│   │   ├── nuxeo-note-edit-layout.html
│   │   ├── nuxeo-note-import-layout.html
│   │   ├── nuxeo-note-metadata-layout.html
│   │   └── nuxeo-note-view-layout.html
├── elements.html (all structural Web UI resources vulcanized within this single file, cannot be overriden)
├── favicon.ico
├── i18n
│   ├── i18n.html
│   ├── messages-de.json
│   ├── messages-fr.json
│   ├── messages-ja.json
│   ├── messages.json
│   └── messages-pt-PT.json
├── images
│    └── ...
├── index.jsp
├── manifest.json
├── nuxeo-admin
│    └── (admin menu sub pages)
├── nuxeo-home.html
├── nuxeo-user-group-management
│    └── ...
├── search
│    └── ...
├── styles
│   ├── *-theme.html (theme resources, * is the theme name)
├── vendor
│    └── ...
├── webcomponentsjs
│   └── webcomponents-lite.min.js
└── workflow
    └── (dynamically loaded task layout element)

About the Web UI structure:

  • the index.jsp serves the Web UI.
  • the elements.html is a vulcanized file which groups the structural code of the Web UI.
  • the nuxeo-home.html is the element that renders the home dashboard of the Web UI (see the dashboard documentation to put your custom dashboard in place).
  • the document directory provides the layout elements to create, view, edit, import etc. the data of a given document type. In the above snippet, we see elements to provide layouts for documents of type File, Folder and Note. The convention is nuxeo-{documentType}-{mode}-layout.html where:
    • {documentType} is the document type i.e. Folder, Note, Note, etc.
    • {mode} is the layout mode i.e. Create, View , Edit, Import, etc. See the layout elements documentation for further details.
  • the i18n directory provides internationalization files to translate Web UI labels (See the managing translation documentation).
  • the workflow directory providers the layout elements to complete workflow tasks. See the workflow tasks documentation for further details.

How to Deploy Additional Web UI Resources

In order to extend the Web UI (outside Studio), you'll need to create your own marketplace which will deploy your own resources in $NUXEO_SERVER/nxserver/nuxeo.war/ui. In order to instruct these resources to be copied over their original counterparts, we must include the following require and install instructions in deployment-fragment.xml at resources/OSGI-INF:

<require>org.nuxeo.web.ui</require>

<install>
  <unzip from="${bundle.fileName}" to="/" prefix="web">
    <include>web/nuxeo.war/**</include>
    <exclude>web/nuxeo.war/ui/i18n/**</exclude>
  </unzip>
</install>

For more information on the deployment-fragment structure, see the Building and Deployment section of Web UI Customization Tutorial documentation.

A proper assembly.xml is also needed in order to deploy its Web UI resources. Examples of both can be found in the Nuxeo Cold Storage addon: