TypeScript Web Resource Starter Kit

This is a simple starter kit for building Microsoft Power Platform web resources with TypeScript, Vite, and Vitest.

It was inspired by the PowerAppsTypescriptSample project and is designed to help you learn the basics without extra complexity.

Repo link

What this project includes

• TypeScript support for Power Platform web resources
• A Vite build setup
• Unit tests with Vitest
• Example form logic for a Contact form

Getting started

Prerequisites

• Node.js
• npm

Install and build

1. Clone the repository
2. Run npm install
3. Run npm run build
4. Upload the generated output from the dist folder to your Power Platform environment as a web resource

Useful commands

• npm install
• npm run build
• npm test
• npm run test:watch
• npm run test:ui
• npm run dev

Project structure

power-platform-typescript-webresource-starter-kit/
├── src/
│   ├── contact.ts
│   ├── contactform.ts
│   ├── enums.ts
│   ├── formcommon.ts
│   └── index.ts
├── tests/
│   ├── contactform.test.ts
│   └── README.md
├── package.json
├── tsconfig.json
├── vite.config.js
├── vite.config.ts
└── README.md

Testing

Tests are included and can be run locally or in CI pipelines.

To run the tests:

npm test

Notes

This repository intentionally keeps things straightforward and manual. That makes it a good place to learn the fundamentals of TypeScript, web resources, and automated testing before adding more tooling.

If you want to set up the same project from scratch, the basic steps are:

npm init -y
npm install --save-dev typescript vitest @vitest/ui @types/node @types/xrm
npx tsc --init
npm run build

The views and opinions expressed in this blog are my own and do not reflect the views or opinions of the company I work for.