Developing web applications

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

Overview

You can develop mobile or Desktop MobileFirst web applications by using your preferred development environment and tools. To add MobileFirst features and capabilities to your 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 your application, also add the analytics module of the web SDK (ibmmfpfanalytics.js), which provides access to the JavaScript web analytics client-side API. You 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 your 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 your web application. See Adding the MobileFirst SDK to web applications. You 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 your application.
  7. Register your application to an instance of MobileFirst Server. See Registering web applications to MobileFirst Server.
  8. Continue developing and testing your application.
    Note: To use server-side features, such as adapters and security, you 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 Setting 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, you 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 your application:
Shared application server
Host your web resources on the same WebSphere® Application Server as your MobileFirst Server runtime.
To implement this method, create a Maven webapp project (using the maven-archetype-webapp archetype), and build a web application archive (.war file) that contains your application's web resources. For information about creating Maven webapp projects, see Creating a webapp. Then, add your Maven web application to the WebSphere Application Server that hosts your MobileFirst Server, by editing the application server's configuration file (server.xml). For detailed step-by-step instructions, see Using WebSphere Liberty profile to serve the web application resources.
Reverse proxy
Set up a reverse proxy between your client application and its servers, and implement the proxy to redirect application requests to MobileFirst Server. The proxy acts as a single origin for all interaction with the application's web browser.
The sample MobileFirst starter web application (MFPStarterWeb) includes a reverse-proxy Node.js server that you can install with the Node Package Manager (npm), as outlined in the sample's README.md file.
For detailed information on how to create a custom Node.js server that acts as a single origin for your MobileFirst web application, see Using Node.js.

Google Chrome secure-origins policy

In production, it is recommended that you 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. You 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:
--args --unsafely-treat-insecure-origin-as-secure=http://9.148.225.123:3000 --user-data-dir=/tmp/profile
Parent topic: Developing the client side of a MobileFirst application