MUI Boilerplate Overview

Use MUI Boilerplate as the starting point for a web application integrated with WEDA. It provides WEDA frontend source that you can adapt to your own interface and workflows.

The project contains the frontend. To run it, you also need a compatible WEDA backend, an identity environment and a user account. The repository does not provide a backend, mock service, test account or hosted environment.

What You Will Accomplish

Start by running the existing application against your WEDA environment. Then adapt its views or add a feature while reusing its authentication, API access and shared UI structure.

Get the Source

• Repository: Advantech-WEDA/weda-mui.
• Release and source downloads: WEDA Frontend v1.0.0.
• Reference revision: 23acb58.

Use the v1.0.0 source release for this guide. Download and extract its source archive from the release page, or check out the v1.0.0 tag in a clone of the repository.

Note: Frontend and backend versions

WEDA Frontend and WEDA Core are versioned separately. The frontend release does not establish compatibility with WEDA Core v1.2.0. Contact the WEDA support team or partner you work with to confirm the frontend, backend and identity versions for your environment before deployment.

Once you have the source, open its project root, where package.json and .env.example are located. Run the commands below from that directory.

Prepare Your Environment

Before installing dependencies, prepare:

• Node.js: Version 22.21.1 or later, as required by the project's package.json.

• WEDA backend: The HTTPS address of a compatible environment, provided by your WEDA administrator.

• User account: An account that can sign in to that environment. Confirm the organization access needed for your work.

• Identity client: A public client registered for http://localhost:9001, using Authorization Code with PKCE. Ask your identity administrator to prepare it using the values in Authentication Integration.

  Note

  For help with identity client registration and setup, contact the WEDA support team or partner you work with.

• Backend token exchange: Confirmation from your WEDA administrator that the environment accepts the identity server's access token for WEDA token exchange.

• Local port: Port 9001 must be available. The registered callback URLs use this port, so the development server does not automatically select another one.

Run the Application Locally

1. Install dependencies:

   npm install

2. Copy .env.example to .env. In PowerShell, run:

   Copy-Item .env.example .env

   In a POSIX shell, use cp .env.example .env.

3. Set the local development values in .env:

   VITE_ORIGIN=https://weda.example.com/
   VITE_AUTH_MODE=authcode
   VITE_AUTH_CLIENT_ID=your-registered-public-client-id
   • VITE_ORIGIN: Replace the example with your WEDA backend address.
   • VITE_AUTH_MODE: Use authcode for the local development path described here.
   • VITE_AUTH_CLIENT_ID: Use the public client ID supplied by your identity administrator. This client has no secret.

4. Start the development server:

   npm run dev

5. Open http://localhost:9001 and sign in through your identity server.

Check the result: After sign-in, the application returns to the WEDA Home page at http://localhost:9001/central/weda, with your name in the header. An account without an organization is taken to Organizations instead.

The URL above uses the central tenant shown in the source instructions. Confirm the tenant path for your environment before using a different one.

If startup or sign-in fails, check the missing environment values, port and identity client settings in Authentication Integration before changing application code.

Start Customizing and Verify Your Changes

Use src/features/registries/ as the reference feature. Customize Your Application explains how to follow its page, hook and view, make a visible change, and structure a new feature.

After modifying the project, run:

npm run verify

This command runs lint, TypeScript checking and the production build. Also check your change in the browser: passing the command does not confirm that your UI displays the intended data or behavior.

For a specific check, use:

Command	Purpose
npm run lint	Check JavaScript/TypeScript import rules and SCSS style rules.
npm run typecheck	Run TypeScript checking.
npm run build	Generate the static build in dist/. Type checking is a separate command.
npm run preview	Start Vite's local preview server. It does not rewrite /{tenant}/weda paths, so application pages remain blank without the gateway routing described in Authentication Integration.

Deployment also needs Portal login, runtime configuration and gateway routing for backend requests and frontend paths. Those requirements are covered in Authentication Integration; the local development proxy is not part of the static build.

License and Support Scope

• License: The project uses the MIT License. Consult the source release's license for its terms.
• Contributions: External pull requests and code contributions are not accepted by the official source repository.
• Security reports: Follow SECURITY.md for private reporting instead of opening a public issue.

For the complete source structure and development rules, see ARCHITECTURE.md for v1.0.0.