Test application across devices and share

Aim: Verify your application’s responsiveness across device types and share it with stakeholders or testers without requiring a deployment.

Previous steps

  1. Set up Naia Build workspace

  2. Plan your app via prompt

  3. Scaffold your app

  4. Connect data sources and APIs

  5. Iterate on the UI with Smart Inspect

  6. Switch to App Designer for low-code fine-tuning

  7. Debug your app

Procedure

  1. Use the Device Preview switcher.

    In the live app editor header, select Device Preview. Switch between desktop, tablet, and mobile viewports. The live preview resizes to reflect the selected device form factor. Visually inspect each viewport for layout (for example, overlapping components, truncated text, or incorrectly sized elements).

  2. Prompt for responsive fixes.

    If you identify a layout problem on a specific device viewport, use Smart Inspect (see xref:iterate-ui.adoc) to select the affected component, then prompt Naia Build: This component does not render correctly on mobile. Adjust its layout to stack vertically on small screens. Combine the visual component context with the chat prompt for precise results.

  3. Switch between runtime themes.

    In the live app editor header, select Toggle Theme to switch between dark and light mode. Test your application in both themes. Confirm that text remains legible, contrast is sufficient, and brand colors are applied correctly in both modes.

  4. Generate a QR code for sharing.

    In the live app editor header, select QR Code Sharing.

    A QR code is generated for your application. Share this code with colleagues, testers, or stakeholders. Anyone scanning the code with a mobile device and access to Neptune DXP platform will be directed straight to your application, enabling on-device testing without any deployment steps.

    QR code sharing requires the recipient to be a registered Neptune DXP platform user, unless your administrator has enabled anonymous (public) access for this application. Confirm access settings in the application settings before sharing externally (for anonymous access: Settings → General → Enable Anonymous Access to App, for role-based access: Setting → Roles).
    Test the QR code on a real device, not just by previewing it on screen. Runtime behavior on an actual mobile device, especially for offline, camera, barcode scanning, or signature pad feature, may differ from the desktop preview.

Result

  • You have verified the application across device viewports and runtime themes.

  • A QR code is available for immediate distribution to testers or stakeholders, enabling on-device testing without a formal deployment.

Next steps

Related topics