UI5.WebComponents.WebpackTemplate 1.0.2

UI5 Web Components Webpack Template

Production-ready starter template for full-stack developers who want to write UI5 screens with HTML-like custom elements such as <ui5-shellbar>, <ui5-input>, <ui5-card>, and <ui5-list>.

The template is packaged as a NuGet dotnet new template and can run standalone or beside an ASP.NET Core API.

Install the Template

dotnet new install UI5.WebComponents.WebpackTemplate
dotnet new openui5-webpack -n MyCompany.Sales.Ui5 --appId mycompany.sales --title "Sales Portal"
cd MyCompany.Sales.Ui5
npm install
npm start

Commands

Project Structure

src/
  index.html                 HTML view using UI5 Web Components
  index.js                   App entry point
  app/
    api.js                   Fetch JSON API data
    binding.js               Dynamic data/i18n binding
    i18n.js                  Properties-file loader
    path.js                  Dot-path resolver
    start.js                 App startup
  i18n/
    i18n.properties          Default translations
  public/
    sample-response.json     Local demo API response
  ui5/
    register-all.js          Registers UI5 Web Components once

Write Views with UI5 HTML Tags

Edit src/index.html:

<ui5-shellbar data-i18n-prop="primaryTitle:appTitle"></ui5-shellbar>

<main data-app-root data-api="/api/view">
  <ui5-title level="H1" data-bind-text="data.title"></ui5-title>

  <ui5-input
    type="Text"
    data-bind-prop="value:data.textField"
    data-i18n-prop="placeholder:textPlaceholder">
  </ui5-input>
</main>

The developer writes UI5 custom elements. The template handles component registration, API loading, and binding.

Dynamic API Binding

This response shape is supported:

{
  "status": 200,
  "messages": [],
  "data": {
    "title": "Hello World",
    "textField": "Initial text",
    "products": [
      { "name": "Laptop", "price": 1200 },
      { "name": "Mouse", "price": 25 }
    ]
  }
}

Bind text content:

<ui5-title data-bind-text="data.title"></ui5-title>

Bind element properties:

<ui5-input data-bind-prop="value:data.textField"></ui5-input>

Bind multiple properties:

<ui5-li data-bind-prop="text:name;additionalText:price"></ui5-li>

Repeat arrays:

<ui5-list data-repeat="data.products">
  <template>
    <ui5-li data-bind-prop="text:name;additionalText:price"></ui5-li>
  </template>
</ui5-list>

The binder supports dot paths and array indexes, for example:

<span data-bind-text="data.0.products.0.name"></span>

Component Registration

All components from these UI5 Web Components packages are registered once in src/ui5/register-all.js:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-fiori/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/AllIcons.js";

The template also imports every root component module from:

@ui5/webcomponents/dist
@ui5/webcomponents-fiori/dist

That makes tags like <ui5-button>, <ui5-input>, <ui5-shellbar>, and <ui5-card> ready to use without per-view imports.

For smaller production bundles, replace register-all.js with explicit imports for only the components your app uses.

Internationalization

Put text in src/i18n/i18n.properties:

appTitle=Sales Portal
textPlaceholder=Enter text

Bind translated text:

<ui5-title data-i18n-text="appTitle"></ui5-title>

Bind translated properties:

<ui5-input data-i18n-prop="placeholder:textPlaceholder"></ui5-input>

Add locale-specific files:

src/i18n/i18n_de.properties
src/i18n/i18n_fr.properties
src/i18n/i18n_th.properties

Full-Stack Development with ASP.NET Core

Run backend and frontend separately:

cd MyApi
dotnet run

cd MyCompany.Sales.Ui5
$env:API_PROXY_TARGET = "https://localhost:7001"
npm start

The dev server proxies /api to API_PROXY_TARGET, so this works from the UI:

<main data-app-root data-api="/api/view">

For production:

$env:NET_OUTPUT_PATH = "..\MyApi\wwwroot\ui5"
npm run build:mvc

ASP.NET Core:

app.UseStaticFiles();
app.MapFallbackToFile("/ui5/{*path:nonfile}", "ui5/index.html");

Production Notes

• All UI5 Web Components are registered for developer convenience.
• Registering every component increases bundle size; trim src/ui5/register-all.js when the app stabilizes.
• Keep API URLs relative, such as /api/view, for reverse proxy and ASP.NET Core hosting.
• Keep translatable text in src/i18n/*.properties.
• src/public/* is copied to the build output.

References

• UI5 Web Components packages: https://ui5.github.io/webcomponents/docs/getting-started/components-packages/
• UI5 Web Components first steps: https://ui5.github.io/webcomponents/docs/getting-started/first-steps/
• ShellBar import reference: https://ui5.github.io/webcomponents/components/fiori/ShellBar/
• NuGet template packages: https://learn.microsoft.com/dotnet/core/tools/custom-templates