Apps

Kinvey Studio uses apps to organize code and resources on your local hard drive. You should create a new Kinvey Studio app for each separate project that you have.

Most app resources are stored on your local file system, allowing easy integration with your source control system of choice. Exception include data and server-side code stored in your app's Kinvey backend.

App Structure

Each Kinvey Studio app consists of modules. Modules allows you to logically group and organize your code.

Each new application that you create includes a single module called Application. It contains foundational views and settings such as the app layout, the front and login pages, and so on.

The System module cannot be deleted.

You are not allowed to add views to the System module. You need to create at least one more module and add to it.

Starting a Kinvey Studio App

  1. On the Kinvey Studio main screen, click the plus sign in the upper-left corner.
  2. In App Name, give your app a descriptive name.
  3. In Location, select a new location for your app files on your local file system if you are not happy with the default.
  4. In Description, give the app an optional extended description.
  5. From Kinvey Backend, select the type of backend you want:

    • Create a Sample Kinvey Backend App—creates a new app with a single Development environment in your Kinvey account and populates it with sample data representing a basic automobile app.

      This option is good for getting started with Kinvey Studio or for quickly testing various scenarios.

    • Create a Blank Kinvey Backend App—creates a new app with a single Development environment in your Kinvey account without any data in it.

      You have the option to create the app within an Organization for collaboration purposes.

    • Use Existing Kinvey Backend App—allows you to select a backend app and environment that have been created previously.

  6. Finally, click Create App to generate the app files in the selected folder.

See Data Services to learn how to control what the Kinvey Studio app sees of the backend data.

Progressive Web Apps

After creating an app, you can enable Progressive Web App (PWA) support. This action adds the following resources to your project:

  • Web manifest to the <head> section of index.html:

      <link rel="manifest" href="manifest.webmanifest">
  • Web worker by importing ServiceWorkerModule and registering it in app.module.ts

Enable Progressive Web Apps Support

  1. Open your app in Kinvey Studio.
  2. In the left-side navigation, click the Settings tab
  3. Under Advanced, click Enable Progressive Web App (PWA) Support.
  4. Click Save.

Configure Web Worker

The file responsible for configuring the service worker is ngsw-config.json which you should not edit directly. Instead, use artifacts/ngsw-config.json to extend the root file.

Extend Web Manifest

The way to extend the web manifest is to edit the artifacts/manifest.webmanifest file. A common reason to do so is adding icons.

Managing Icons

Kinvey Studio provides default icons under /src/assets/icons. There are two ways to customize the icons:

  • Replace default icons: You can replace the file contents as you want as long as you keep the file names.
  • Add icons: Copy new icon files to the folder and then edit the web manifest to include them.

Hosting

PWA only works if the app is built for Release using the Build for deployment command and served through HTTPS. In case you are using Kinvey Web Hosting through the Publish on cloud hosting command, you need to enable public access before you can test or use a PWA as the preview URL is always HTTP.

Opening the Application Folder

  1. On the Kinvey Studio main screen, hover the application card and click the gear icon.
  2. In the menu that appears, click Reveal.

The folder on your local computer that contains the project files opens in your default file manager.

Deleting Applications

  1. On the Kinvey Studio main screen, hover the application card and click the gear icon.
  2. In the menu that appears, click Remove and then confirm the deletion.

Deleting the Kinvey Studio application removes all application files from the local machine but leaves any application resources on the Kinvey backend intact. If you want to free up resources on the backend as well, go to Kinvey Console and delete them.

Exporting Applications

  1. On the Kinvey Studio main screen, hover the application card and click the gear icon.
  2. In the menu that appears, click Export.
  3. Select a location in which to export the application.

A zip archive containing all the current files from the application folder is saved in the selected location. Note that this archive does not contain any backend data or code.

Importing Applications

  1. On the Kinvey Studio main screen, click Open App.
  2. Browse to the directory where you have extracted a zip archive containing a previously exported Kinvey Studio application and select it.

Duplicating an Application

  1. On the Kinvey Studio main screen, hover the application card and click the gear icon.
  2. In the menu that appears, click Duplicate.
  3. In the Duplicate App dialog box, change the application attributes that you want, such as the Name.
  4. Click Duplicate App.

App Migration on Kinvey Studio Update

Kinvey Studio creates a large amount of metadata as you develop your app. It uses this metadata to generate a working app for the platforms that you target.

As Kinvey Studio adds new features, improvements, and fixes through software updates, it may introduce backwards incompatible changes to the app metadata schema. In such cases, Kinvey Studio will ask you to migrate the apps to the new schema. If you fail to do so, you will not be able to open the apps with the installed version of Kinvey Studio.

To migrate an app:

  1. Ensure that you have the latest state of your app committed to source control.
  2. Click the app in Kinvey Studio or click the migration link.

    The app opens and you see a success message.

Troubleshooting

Q: App marked as "Unavailable" on the Kinvey Studio home screen

If the app tile on the Kinvey Studio home screen shows an "Unavailable" label, this means that one of the following has happened:

  • Someone deleted the app files from the disk
  • Someone renamed the app folder
  • App files have become corrupted

Solution: Restore the files at the original location from your source control repository of choice.

Q: App marked as "Uncompatible" on the Kinvey Studio home screen

If the app tile on the Kinvey Studio home screen shows an "Uncompatible" label, this means that you are trying to open an app created with a version of Kinvey Studio that is newer than the one used to create the app. In many cases the version disparity creates incompatibility in the app metadata.

Solution: Upgrade Kinvey Studio to the version that was used to create the app or later.

Q: App marked as "Migration Required" on the Kinvey Studio home screen

If the app tile on the Kinvey Studio home screen shows a "Migration Required" label, this means that you have recently updated Kinvey Studio to a version that introduces changes in the app metadata schema.

Solution: Migrate the app or downgrade to the previous version if you don't want to migrate. Contact Kinvey Support for a download link to non-latest versions.

Q: App misbehaves or shows errors after migration

If you hit problems with an app after you do an app migration, you can revert to working set up using these steps:

  1. Quit Kinvey Studio.
  2. Restore the app files from source control to a working state.

    If needed, delete the app files from the disk before checking them out of source control.

  3. Downgrade Kinvey Studio to a the version that you were using before the last update.

    Contact Kinvey Support for a download link to non-latest versions.

  4. Start Kinvey Studio and continue working with the app.

    In case the app is not visible, use Open App to reopen it.

Related Resources