Taro-Shadcn-MobX-ts

Taro project scaffold based on TypeScript, React, MobX and Shadcn UI for Taro, powered by VPT

Demo

This scaffold provides three example pages:

1. pages/home: a MobX counter
2. pages/component: a dual-thumb range slider and cascading area selector
3. pages/interface: an infinite-scrolling GitHub repository list powered by mobx-restful

Run pnpm dev-h5 to preview them in a browser.

Technology stack

• Language: TypeScript v6
• Component engine: React v19
• State management: MobX v6 + MobX-RESTful
• Component suite: Shadcn UI for Taro + Tailwind CSS v4
• Build toolchain: Vite v8 + VPT
• CI / CD: GitHub Actions + WeChat miniprogram-ci

Extra components

1. Scroll List
2. Range Field
3. Area Select

Best practice

1. Install GitHub apps in your organization or account:

   1. Probot settings: set up Issue labels & Pull Request rules
   2. PR badge: set up Online VS Code editor entries in Pull Request description

2. Click the Use this template button on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above

3. Click the Open in GitHub Codespaces button on the top of ReadMe file, then an online VS Code development environment will be started immediately

4. Set WMA_ID and WMA_UPLOAD_KEY as Repository secrets, then every commit pushed to main can build and upload the WeChat Mini Program

5. Recommend adding a Notification step in GitHub Actions for your Team IM app

6. Remind the PMs & users of your product to submit Feature/Enhancement requests or Bug reports with Issue forms instead of IM messages or Mobile Phone calls

7. Collect all these issues into Project kanbans, then create Pull requests & add closes #issue_number into its description for automation

Development

Install dependencies

Node.js 24.11.0 or later and pnpm 12.15.0 are required.

npm i pnpm@12.15.0 -g
pnpm i

Start Dev-server

pnpm dev-h5
# or
pnpm dev-wx

Mini-app Debug

The WeChat build is generated in dist/wx/. Import the project root into WeChat DevTools after starting the development server.

VPT uses native DOM rendering on WeChat when the SDK supports it, with automatic template-rendering fallback otherwise. H5 continues to use browser rendering. The app and page configurations enable glass-easel, as required by WeChat DOM rendering. React Compiler is enabled for both targets; SWC retains Stage-3 decorator support for MobX classes. These options are configured in vite.config.ts.

Windows

winget install Tencent.WeixinDevTools

macOS

brew install --cask wechatwebdevtools

Deployment

pnpm build-h5
# or
pnpm build-wx

Production files are generated in dist/h5/ or dist/wx/. The GitHub Actions workflow uploads the WeChat build when its required repository secrets are set.

Cloudflare Pages

Set the following environment variables for both Production and Preview builds:

• PNPM_VERSION=12.15.0
• NODE_VERSION=24.11.0 (or a newer version satisfying package.json)

Use pnpm build-h5 as the build command and dist/h5 as the output directory. Keep automatic dependency installation enabled.

The lockfile is generated with PNPM 12. Older Pages defaults such as PNPM 10.11.1 can reject its overrides configuration with ERR_PNPM_LOCKFILE_CONFIG_MISMATCH. Use the pinned PNPM version rather than disabling frozen-lockfile checks or regenerating the lockfile with an older PNPM version. See the Pages build image documentation.

Reference

1. https://wechat-miniprogram.github.io/miniprogram-compat/