+

Search Tips | Advanced Search

For up-to-date product documentation, see the IBM MobileFirst Foundation Developer Center.


Develop web applications

Use the IBM MobileFirst™ Platform Foundation web SDK to develop web applications with MobileFirst capabilities, including security features and application management.

We can develop mobile or Desktop MobileFirst web applications by using your preferred development environment and tools. To add MobileFirst features and capabilities to our client application, add the core module of the MobileFirst web SDK (ibmmfpf.js), which provides access to the JavaScript client-side API for development of web and cross-platform Cordova applications. To add MobileFirst Analytics capabilities to our application, also add the analytics module of the web SDK (ibmmfpfanalytics.js), which provides access to the JavaScript web analytics client-side API. We can also use the provided GUI and CLI tools to configure, manage, and secure your application.


Development steps

Follow the outlined procedure to develop your web application:

  1. Select your preferred development tools and topology for developing the application. Ensure that your selected topology satisfies the requirements of the same-origin policy and Google Chrome secure-origins policy.
  2. Download the sample MobileFirst starter web application (MFPStarterWeb), and use it either as the basis for our application or as a general reference for a functioning application. See Getting started with a sample MobileFirst application. The sample application already includes both the core and analytics modules of the web SDK. This step is optional.
  3. Get the MobileFirst web SDK. See Acquiring the MobileFirst web SDK.
  4. Add the required SDK files to our web application. See Add the MobileFirst SDK to web applications. We can add the files to an existing web application, or create a new application. The sample MFPStarterWeb application already includes both the core and analytics modules of the web SDK, and demonstrates how to initialize the SDK and use its APIs.
  5. Add JavaScript code to initialize the web SDK. See Initializing the MobileFirst SDK.
  6. Develop your application. Use the JavaScript SDK APIs to add the required features and functions to our application.
  7. Register your application to an instance of MobileFirst Server. See Register web applications to MobileFirst Server.
  8. Continue developing and testing your application.

    Note: To use server-side features, such as adapters and security, we must first register your application with a running instance of MobileFirst Server (see Step 7). For more information about the server and its installation, see MobileFirst Server and Set up the development environment.


Same-origin policy

You are free to host the web resources of your application on your preferred web server. However, when you select the development and production topologies, we must consider the restrictions of the same-origin-policy security model, which is designed to protect against potential security threats from unverified sources. According to this policy, a browser allows web resources (such as scripts) to interact only with resources that stem from the same origin (which is defined as a combination of URI scheme, host name, and port number). For more information about the same-origin policy, see The Web Origin Concept specification, and specifically 3. Principles of the Same-Origin Policy.

Because both your web server and MobileFirst Server need to communicate with your application, both servers must have the same web origin to satisfy the same-origin policy. Use one of the following methods to ensure a single web origin for our application:


Google Chrome secure-origins policy

In production, it is recommended that we use the HTTPS protocol (HTTP over SSL) for the network communication with your web server and MobileFirst Server. However, during the development process you might prefer to use non-secure HTTP communication. In Google Chrome, HTTP communication with a remote server (not localhost) might cause an error due to the Chrome secure-origins policy. For more information about this policy, see Prefer Secure Origins For Powerful New Features. We can overcome this error by starting Chrome with the --unsafely-treat-insecure-origin-as-secure flag set to the IP address of your HTTP server. You also need to set the --user-data-dir flag to a profile-session directory. The following example overrides the security-origins policy for IP address http://9.148.225.123:3000, and uses a /tmp/profle for the browser session profile:

Parent topic: Develop the client side of a MobileFirst application