Local development environment for VMP mini-apps: run on the workstation, inspect Host API traffic, and preview on a device through Mini Dev.
A Mini App ID is not required for local development. On a mobile device, the mini-app runs inside the VMP application (session, location, and storage come from that application). On the workstation, the session uses mock identity and coordinates.
Getting started
- Open Visual Studio Code on a mini-app project folder. The folder MUST contain
package.json. Alternatively, use Create mini-app project or Open project folder on Home.
- Mini App ID is optional for local execution. Bind an ID on Home before deployment, and when the VMP application must resolve this project.
- Open Develop. Select an execution target, then press Start. Press Stop to terminate the session. The Simulator frame, QR code, and browser window appear only while the session is active.
Execution targets
| Target |
On Start |
On Stop |
| Simulator (VS Code) |
Device frame is displayed. USER / LOCATION are supplied by the mock configuration. |
Frame is dismissed. Session terminates. |
| Phone (Mini Dev) |
QR code is issued. Open Mini Dev in the VMP application on the same Wi-Fi network and scan. Generic camera applications and web browsers MUST NOT be used. |
QR code is dismissed. Session terminates. |
| Chrome Debugger |
Google Chrome launches with DevTools. If Chrome is not installed, the session MUST NOT start; a warning and download action are presented. |
Session terminates. The Chrome window created by the extension is closed. |
| Edge Debugger |
Equivalent to Chrome Debugger, using Microsoft Edge. |
Session terminates. The Edge window created by the extension is closed. |
| Default browser |
The preview URL opens in the system default browser. |
Session terminates. The browser tab MUST be closed manually. |
Mock identity and location
The workstation has no VMP production session. Configure:
| Field |
Host API |
| userId |
USER.GET_USER_INFO |
| access token |
USER.GET_ACCESS_TOKEN (development use only; MUST NOT be treated as a production token) |
| latitude, longitude |
LOCATION.GET_CURRENT_LOCATION (default: 10.8231, 106.6297) |
Press Apply while Simulator is running to update values without restarting the session. Phone (Mini Dev) ignores this configuration and uses the live VMP session and location.
Inspector
After Start, VMP Inspector records:
| View |
Contents |
| Host API |
Invocations from the mini-app (USER.*, STORAGE.*, …) |
| Console |
console.log / warn / error from mini-app JavaScript |
| Network |
fetch and XMLHttpRequest issued by mini-app JavaScript. Document, image, and stylesheet requests are excluded. |
| Storage |
Local boxes after storage writes |
SDK package
@vietinfo/vmp-sdk is published to the public npm registry. The SDK tab
lists its versions with a plain unauthenticated request, and Install runs the
project's own npm install @vietinfo/vmp-sdk@<version>. No token, no .npmrc
line for a private registry, and no extra CA: if the version list is empty, the
tab shows the registry's own error message.
Phone (Mini Dev) requirements
- The workstation and the device MUST join the same Wi-Fi network.
- On Develop, select Phone (Mini Dev) and press Start.
- In the VMP application, open Mini Dev and scan the QR code.
- If Start cannot resolve an IPv4 address, connect the workstation to Wi-Fi and retry.
Generic camera applications and web browsers MUST NOT be used to scan the QR code.
