Previewing the web resources of your application

improve this page | report issue


This tutorial covers the following topics.

In the next tutorials, you learn how to preview the application in specific mobile environments.

Adding an environment to the MobileFirst project

To add an environment:


From a terminal window, navigate to the application's folder and run the following CLI command: mfp add environment. An interactive menu will be displayed.


  1. Click the MobileFirst icon in the menubar and select MobileFirst Environment.
  2. Select the application to which you would like to add an environment and select one or more environments.
  3. Click Finish. A new folder with the environmen name is added to the project structure. missing_alt

Reviewing the folder structure

missing_alt The screen shot to the right depicts the iPhone environment, but the explanation below applies to any mobile environment (iPhone, iPad, Android, BlackBerry, Windows Phone 8, Windows 8).

The mobile environment includes the following folders:

  • CSS – The properties that are specified in this folder override the CSS files from the common folder.
  • Images – You can add environment-specific images in this folder. If images with the same file names exist in the common folder, they are overwritten in the application.
  • JavaScript – Contains JavaScript that can extend, and override if required, JavaScript from the common folder.
  • The native folder contains automatically generated native project code.
    Files in the native\www folder are regenerated each time the application is built. Any changes that are made to these files are lost.

  • The nativeResources folder contains resources that are used by the native code.

Previewing the web resources

After the application is built and deployed in MobileFirst Studio, it can be previewed in the Mobile Browser Simulator (MBS).

  1. Right-click the project and select Open MobileFirst Console, or browse to the MobileFirst Console. Typically the URL is http://localhost:10080/worklightconsole.
  2. Click Applications to see the list of applications in your project.
  3. Click the application name, HelloWorld, to see the list of environments.
    • To preview the web resources of an environment, click the Preview button that is below the environment name.
    • To preview the common resources, click the Preview button that is in Common Ressources.


    You can use the Mobile Browser Simulator to emulate Cordova or preview your application with different device skins.
    Limitation about Mobile Browser Simulator: To preview an application that contains security tests that rely on the device (such as autoprovisioning or authenticity), you must temporarily change the security tests so that they do not use the device identification.

Last modified on December 02, 2015