LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Example use cases
  • Overview
  • Structure of a package
  • Where can I use packages?
  • Types of package templates
  • Basic TS Package
  • PDF Report
  • JS HTML Component
  • TS HTML Component
  • React + TS HTML Component
  • FAQs
  • When are app packages built?
  • How do packages differ from TypeScript app's modules?
  • How do files within packages differ from app assets?
  1. Build your App
  2. Extend your App with Custom Code
  3. App packages

App packages overview

PreviousApp packagesNextPDF report package

Last updated 1 year ago

App packages are only supported in TypeScript apps and where the .

App packages provide a way to write and maintain reusable code throughout an application while also providing a way to run tests, generate PDFs and create custom .

Previously, developers could only bind and maintain a single source file to an <html/> component within OXIDE (by uploading it as an asset). With app packages, developers can maintain large custom HTML projects in OXIDE very easily, thereby improving developer productivity.

Example use cases

  • Custom

  • Offline PDF generation (see below)

  • Libraries with unit tests (see below)

Overview

The high level architecture of app packages is outlined below.

  1. A package is created from a template and source files can now be edited.

  2. A developer triggers a deploy which sends all the source code over to the JourneyApps build system.

  3. The JourneyApps build system starts building the app, and looks for app packages.

  4. For each app package, the JourneyApps build system will execute the build command inside each corresponding package.json > script section.

  5. dist directories and other build artifacts are created, but are hidden to the developer.

  6. The build artifacts are packaged along with the compiled application and uploaded to the update system.

  7. The JourneyApps Runtime downloads the application update along with the compiled package's build artifacts, and they are executed inside your code.

  8. Some components such as <html/> component can display build artifacts from an app package such as an index.html file.

Structure of a package

  1. packages are defined inside the /packages directory in your application's project files.

  2. A package will always contain a single package.json file with:

  3. A scripts section that contains a build command.

  4. A name that starts with @local such @local/my_package.

Where can I use packages?

The initial release of packages will only be useable from within your app (i.e. the JourneyApps Runtime), but in the near future, packages will also be useable inside CloudCode tasks. This will enable you to write code that can be shared across the app as well as in CloudCode.

Types of package templates

OXIDE includes a number of package templates. These are listen when creating a new package:

Basic TS Package

PDF Report

JS HTML Component

TS HTML Component

This template mimics the JS HTML Component template, but uses TypeScript instead of JavaScript.

React + TS HTML Component

FAQs

When are app packages built?

Upon deploying your app.

How do packages differ from TypeScript app's modules?

App modules are lightweight ways to share code between views in your app. App packages can also be used to share code, however they also provide a way to run custom build commands upon a “deploy” action, and can also generate assets that can then be used in your app.

How do files within packages differ from app assets?

Static assets which are uploaded directly to the app, are simply copied in when the app is deployed, and accessible when the app runs.

Assets that are copied into packages are not directly accessible unless they go through a compilation step. Some packages such as the ones which use the PDF template as a base, contain a webpack file which compile the assets and make them accessible to the rest of the app.

This template is useful for authoring libraries or writing code which can be run in unit tests. To give this a try, .

Use this package to easily create PDF reports that can be dynamically generated from within the app and rendered offline inside an <html> component. To learn more about this template, and to see an example on how to use it, .

Use this package to create a custom , with logic written in JavaScript. It includes a webpack configuration to build the component. It includes sample code that initializes the , to allow communication between the HTML component and the app.

Use this template to create a custom written in React and TypeScript. It includes sample code that initializes the , to allow communication between the HTML component and the app.

💻
follow this guide
follow this guide
HTML component
journey-iframe-client
HTML component
journey-iframe-client
<html/> components
<html/> components
App packages architecture
@journeyapps/runtime-build version exceeds 2.0.0