dewdad / ui5-react-vite

A template for business developers looking to quickly develop and prototype UI5/Fiori apps with modern technology, practices and tooling.

UI5/Fiori React Starter powered by Vite

A template for business developers looking to quickly develop and prototype UI5/Fiori apps with modern technology, practices and tooling.

Features

• ⚡️ Vite 2, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• ✅ Use Vitest for unit and components testing

• 🦾 TypeScript, of course

• Vite

• Proxy OData v4 TripPin service for demoing

• React and UI5 Web Components for React

• <img src="https://api.iconify.design/logos:swr.svg" title="" alt="Alt text" width="35"> SWR for data fetching, caching, mutations and revalidation

Inspired by the amazing Vitesse template.

Pre-packed

Plugins

• vite-plugin-pages - file system based routing
• unplugin-auto-import - Directly use react/react-router-dom API and others without importing
• usehooks-ts - collection of useful React hooks
• vite-plugin-imp - simple importing and tree-shaking for web libraries such as Lodash

Try it now

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit dewdad/ui5-react-vite my-fiori-app
cd my-fiori-app
npm i
npm run start

Features Roadmap

• Navigation Routing

  • Route as single source of truth => state by route/url-query (for sorting, filtering, etc.), avoid React state whenever possible

    • With React-Router
      • Why you should lift component state up to the URL https://youtu.be/sFTGEs2WXQ4
    • With useQueryParams hook
    • atomWithHash from "jotai/utils" package
    • With React-Location
      • Blog series about file-based routing for React with React-location
      • https://react-location.tanstack.com/

  • File based routing with vite-plugin-pages (auto-generated)

  • General Best Practices for Routing

  • Enable Launchpad Service integration by supporting semantic objects + pre-filling of fields when navigating

• Front-end tooling with Vite instead of (CRAs Webpack) for application lifecycle management

• i18n

• Authentication

  • Migrate hooks from ReactQuery to SWR

• Typescript migration !!! Do not spend time typing API types !!!

  • Use inference and type generation from API points whenever possible

• Testing **need to complete porting from CRA

  • Unit
  • E2E

• API Management

  • API proxy with Vite
  • API Mocking and Generation
    • Mock with json-server
    • Using a OData client generation for TypeScript interfaces to input to a faking mock server

• Linting **need to complete porting from CRA, fix remaining errs

• Pre-commit sanity, rename to .husky folder in root after fixing linting issues, and remove ## symbols from package.json props

• Forms

  • Formik and Yup

• Data layer

  • SAP Cloud SDK: Generate an OData client for JavaScript

• Styling customizations with UnoCSS

• State Management with Storeon, a tiny, redux-like state manager.

• SAP Product Integration

  • 🟢 Integration with Launchpad Service
  • Theme selection via Launchpad settings

• Developer Experience

  • Testing Launchpad navigation locally

• Ideas for UI Samples

  • Filterbar with Go button, filters and fuzzy search
  • Tabbed sections on the Object Page
  • Texts and Text Arrangement for data fields
  • Tabular value helps
  • Supporting draft mode

References

• Build a Single Page Application Using UI5 Web Components for React (@developers.sap.com)
• Develop a Fiori Launchpad App with Your Own Dev Tools (@developers.sap.com)