Create Environment Settings

Filter by IDE
Select the AppBuilder client you are currently using for development.

IDE

When you develop your app, you can create JSON files to store your environment application settings for debugging and production. In the JSON files, you can store various configuration data, such as dedicated web servers and databases for testing and distribution.

When you create the application settings file, AppBuilder adds a *.debug.json and *.release.json to your app. In your code, reference the *.debug.json or *.release.json file as *.json only. During build operations, AppBuilder automatically uses the JSON file that corresponds to the currently selected build configuration.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Procedure

In-Browser

  1. In the Project Navigator, right-click the directory in which you want to place the configuration file.
    To store the configuration file in the root, right-click the second node from the top.
  2. Select AddNew File.
  3. Select AppSettings.
  4. Provide a name for the configuration file.
    Do not forget to manually set the debug or release configuration identifier in the name. For example: appsettings.debug.json.
  5. Click OK.

The in-browser client opens the newly added debug or release file in the code editor. In your code, reference the *.debug.json or *.release.json file as *.json only.

Universal

  1. In the Project Navigator, right-click the directory in which you want to place the configuration file.
    To store the configuration file in the root, right-click the second node from the top.
  2. Select AddNew File.
  3. Select AppSettings.
  4. Provide a name for the configuration file.
    Do not forget to manually set the debug or release configuration identifier in the name. For example: appsettings.debug.json.
  5. Click OK.

The universal desktop client opens the newly added debug or release file in the code editor. In your code, reference the *.debug.json or *.release.json file as *.json only.

Windows

  1. In the Project Navigator, right-click the directory in which you want to place the configuration file.
    To store the configuration file in the root, right-click the second node from the top.
  2. Select AddNew File.
  3. Select AppSettings.
  4. Provide a name for the configuration file.
    Do not forget to manually set the debug or release configuration identifier in the name. For example: appsettings.debug.json.
  5. Click Ok.

The classic Windows desktop client opens the newly added debug or release file in the code editor. In your code, reference the *.debug.json or *.release.json file as *.json only.

Visual Studio

  1. In the Solution Explorer, right-click the directory in which you want to place the configuration file.
    To store the configuration file in the root, right-click the second node from the top.
  2. Select AddNew Item.
  3. Select AppSettings.
  4. Provide a name for the configuration file.
    Do not forget to manually set the debug or release configuration identifier in the name. For example: appsettings.debug.json.
  5. Click Ok.

The extension for Visual Studio previews the newly added debug or release file in the code editor.

CLI

  • In the root of your app, create empty *.debug.json and *.release.json files where * is a valid file name.

In your code, reference the *.debug.json or *.release.json file as *.json only.

Example

This is a fragment of a sample main.js file. On the onDeviceReady event, the app prints in the console the current debug configuration. Note, that you need to have the jQuery framework included and referenced in your app.

onDeviceReady: function() {
        app.receivedEvent('deviceready');
        navigator.splashscreen.hide();
        $.getJSON("AppSettings.json", function(json) {
            console.log("Debug Configuration: " + json.debug + ". " + json.message);
            });
    },

This is a sample AppSettings.debug.json file which sets a debug key and a message text. When you build your app in debug mode, the app prints Debug Configuration: true. Hello World! in the console.

{
    "debug": true,
    "message": "Hello World!"
}

This is a sample AppSettings.release.json file which sets a debug key and a message text. When you build your app in release mode, the app prints Debug Configuration: false. Ship it! in the console.

{
    "debug": false,
    "message": "Ship it!"
}

Next Steps

Test your app in the device simulator, in the native emulators or on a physical device.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.