UI5.WebComponents.WebpackTemplate 1.0.4

UI5 Web Components Webpack Template

Production-ready full-stack starter template for developers who want to build modern web applications with UI5 Web Components (<ui5-button>, <ui5-input>, <ui5-shellbar>, <ui5-card>), and optionally use ASP.NET Core MVC with built-in authentication and authorization.

Features

Frontend (Webpack 5):

• UI5 Web Components with 200+ ready-to-use components
• Declarative HTML binding for data and i18n
• Hot module reloading for fast development
• Production-optimized builds with source maps
• Multi-language support (i18n)

Backend (Optional - ASP.NET Core MVC):

• ASP.NET Core 10 MVC framework
• Razor views with UI5 components
• Built-in authentication & authorization with Identity framework
• Login/Register/Profile scaffolding with UI5 styling
• Role-based access control (Admin, User, Moderator)
• SQLite database (configurable for SQL Server, PostgreSQL, etc.)
• Secure password policies and account lockout

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.

Authentication & Backend Integration

This template includes optional backend support with authentication scaffolding:

Using ASP.NET Core MVC Backend:

1. Run with: dotnet run (frontend + backend together)
2. Visit: http://localhost:5000 with default HTTPS redirect
3. Login/Register pages automatically included
4. Profile management with tabbed interface
5. Role-based authorization for controllers

Frontend-Only Development:

1. Run with: npm start (Webpack dev server only)
2. Access: http://localhost:8080
3. Proxy backend API with API_PROXY_TARGET environment variable

For detailed setup and authentication configuration, see MVC_INTEGRATION.md.

References

• This Template: MVC_INTEGRATION.md | INSTALL_FROM_NUGET.md
• UI5 Web Components: https://sap.github.io/ui5-webcomponents/
• UI5 Components Gallery: https://ui5.github.io/webcomponents/
• ASP.NET Core: https://learn.microsoft.com/en-us/aspnet/core/
• ASP.NET Core Identity: https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity
• Razor Views: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor
• Webpack: https://webpack.js.org/
• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript