Packaged mobile app — Noderyx Documentation

01

Which path to choose

Most projects want native widgets. Choose the packaged build when you need a CSS feature the native translation does not cover—gradients, blur, complex animation—and accept a WebView starting up.

Rendering native:init draws platform widgets; mobile:init renders Cool.css in a WebView.

Startup Native starts immediately; the packaged build waits for the WebView.

Lists Virtualized FlatList versus the DOM.

Styling The translated subset versus all of Cool.css.

NOTE

Both read the same .noderframe files, so moving between them costs nothing.

02

Requirements

The packaged build uses Capacitor, so it needs the same platform toolchains as any native project.

Android: Android Studio with an SDK platform, plus a device in USB debugging mode or an emulator.
iOS: macOS with Xcode and CocoaPods. Windows and Linux can generate the project but cannot compile or sign it.

03

Create the projects

One command builds the web bundle, installs Capacitor and the plugins the Noderyx bridge uses, and generates the native projects.

TERMINAL

npm run mobile:init
npx noderyx mobile:init android   # one platform only

04

Everyday commands

Build, sync, open, and run—each is a separate step so you can automate exactly the part you need.

TERMINAL

npx noderyx build:mobile        # compile views into the bundle
npx noderyx mobile:sync         # rebuild and copy into the native projects
npx noderyx mobile:run android  # build, sync, and launch
npx noderyx mobile:open ios     # open in Xcode

NOTE

build:mobile accepts --app-id, --app-name, --entry, --views, --out, and --api-url to override configuration for one run.

05

Configuration

The mobile block controls identity, sources, output, and the render data every page receives.

noderyx.config.js

mobile: {
  appId: "com.example.myapp",
  appName: "My App",
  views: "resources/views",
  public: "public",
  entry: "home",
  out: "platforms/mobile",
  apiUrl: process.env.MOBILE_API_URL ?? null,
  data: { siteName: "My App" },
  pages: { "dashboards/admin": { title: "Admin" } },
  exclude: ["generated"],
  splashDuration: 1200
}

06

The API URL matters

A packaged app has no server of its own. Its pages are files inside the app, so a fetch to /api/users would resolve against the app shell and fail. Setting apiUrl rewrites server routes to absolute URLs.

JAVASCRIPT

const users = await Noderyx.native.api("/api/users");
await Noderyx.native.api("/api/users", { method: "POST", body: { email } });

NOTE

During development, point it at your machine on the local network—for example http://192.168.1.10:3000.

07

Clean routes

Write extension-free links in every view. Noderyx maps the same paths across the server, the packaged navigator, browser history, and device back navigation, and handles tap transitions, focus, and reduced-motion preferences.

NODERFRAME

a href="/profile" "Profile"
a href="/settings/account" "Account settings"

NOTE

Never add .html to a link.

08

Generated payloads

The bundle keeps compiled pages as .mnoderframe payloads—machine-readable build artefacts under the output directory, hidden in VS Code by default. Write the readable source in resources/views and rebuild.

TERMINAL

npm run build:mobile

NOTE

Do not write or edit .mnoderframe files; the entry and offline fallback are payloads too, so the generated collection contains no .html documents.

09

Allow the app's origin

A packaged build runs from capacitor://localhost or https://localhost, so every API call is cross-origin. CORS is off until you list those origins explicitly.

.env

CORS_ORIGINS=capacitor://localhost,https://localhost

NOTE

Allowlisted origins are added to connect-src automatically.