Boilerplate — Sankhya HTML5 Component (React + Vite)

A minimal, batteries‑included starter to build and ship Sankhya ERP HTML5 components using React 19 and Vite 7 — with JSP scaffold, stable asset filenames, alias support, Tailwind (optional), and a ZIP bundle ready for import in Sankhya.

---

Highlights

• React 19 + Vite 7 with TypeScript
• Stable asset names for Sankhya (e.g. assets/app.js, assets/index.css)
• Alias @ → src for clean imports (Vite + TS configured)
• JSP scaffold that loads the built app inside Sankhya as HTML5 component
• Relative assets (base: "./") to support ${BASE_FOLDER} paths
• Optional Tailwind via @tailwindcss/vite
• Auto ZIP after build (dist/sankhya-component.zip) using vite-plugin-zip-pack

Getting Started

pnpm install
pnpm dev

Open http://localhost:5173.

Main entry points:

• src/main.tsx — mounts the app
• src/app/app.tsx — demo UI
• index.html — html demo view

Build for Sankhya

pnpm build

This produces:

• dist/index.jsp — page to be served by Sankhya
• dist/assets/app.js — bundled JS (ESM)
• dist/assets/index.css — styles
• dist/assets/*.svg — logos and images (not inlined)
• dist/sankhya-component.zip — ready to import in Sankhya

Copy the entire dist/ (or only the ZIP) to your HTML5 component folder in Sankhya.

Project Structure

src/
  app/app.tsx        # Demo component
  assets/*           # Logos and images
  global.css         # Global styles (Tailwind ready)
  main.tsx           # App entry
  services/sankhya/  # Sankhya service layer (API, Database, Page utils)
public/
  index.jsp          # JSP scaffold used in Sankhya
vite.config.ts       # Build config (stable outputs, base "./", zip pack)

Documentation

• Sankhya Service Layer Documentation — Complete guide to the service layer, including API reference, usage examples, and React Context integration.

NPM Scripts

• pnpm dev — start Vite dev server
• pnpm build — typecheck + production build + ZIP
• pnpm preview — preview production build

Sankhya Notes

• Assets use relative URLs (base: "./") so ${BASE_FOLDER} works in JSP.
• Small images are not inlined (assetsInlineLimit: 0) so they exist as physical files in dist/assets.
• If your Sankhya environment doesn’t support <script type="module">, add @vitejs/plugin-legacy and load the legacy bundle in index.jsp.

FAQ

Logos aren’t loading inside Sankhya

• Ensure you’re using the built files from dist/ (not the dev server URLs).
• Check that your component path resolves ${BASE_FOLDER}/assets/* correctly.

How do I change the output names?

• See vite.config.ts → build.rollupOptions.output.

Contributing

PRs are welcome! Please lint and keep changes focused.

License

MIT © 2025

---

Built with ☕ by M.S.