Adding the MobileFirst Foundation SDK to Web Applications
improve this page | report issueOverview
You can develop mobile or Desktop MobileFirst web applications by using your preferred development environment and tools.
In this tutorial, you learn how to add the MobileFirst web SDK to your web applicaiton, as well as how to register the web application with the MobileFirst Server
The MobileFirst web SDK is provided as a set of JavaScript files, and is available at NPM.
The SDK includes the following files:
- ibmmfpf.js - The core of the SDK.
- ibmmfpfanalytics.js - Provides support for MobileFirst Analytics.
Jump to
- Prerequisites
- Adding the MobileFirst web SDK
- Initializing the MobileFirst web SDK
- Registering the web application
- Updating the MobileFirst web SDK
- Same Origin Policy
- Secure Origins Policy
- Tutorials to follow next
Prerequisites
-
See the supported web browsers prerequisite for setting up the web development environment.
-
To run NPM commands, you must install Node.js.
Adding the MobileFirst web SDK
To add the SDK to new or existing web applications, first download it to your workstation and then add it to your web application.
Downloading the SDK
- From a command-line window, navigate to your web application’s root folder.
- Run the command:
npm install ibm-mfp-web-sdk
.
This command creates the following directory structure:
Adding the SDK
To add the Mobile Foundation Web SDK, reference it in a standard fashion in the web application.
The SDK also supports AMD, so that you can use Module Loaders such as RequireJS to load the SDK.
Standard
Reference the ibmmfpf.js file in the HEAD
element.
<head>
...
...
<script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>
Using RequireJS
HTML
<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>
JavaScript
require.config({
'paths': {
'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
}
});
require(['mfp'], function(WL) {
// application logic.
});
Important: If adding Analytics support, place the ibmmfpfanalytics.js file reference before the ibmmfpf.js file reference.
Initializing the MobileFirst web SDK
Initialize the Mobile Foundation web SDK by specifying the context root and application ID values in the main JavaScript file of your web application:
var wlInitOptions = {
mfpContextRoot : '/mfp', // "mfp" is the default context root in the Mobile Foundation
applicationId : 'com.sample.mywebapp' // Replace with your own value.
sessionMode : true //This is an optional paramter. Setting this to true ensures that MFP related data is stored in the session rather than in the local storage. If this option is set to false or not set at all, default is local storage.
};
WL.Client.init(wlInitOptions).then (
function() {
// Application logic.
});
- mfpContextRoot: The context root used by the MobileFirst Server.
- applicationId: The application package name, as defined when you register the application.
Registering the web application
You can register applications either from the MobileFirst Operations Console or from the MobileFirst CLI.
From MobileFirst Operations Console
- Open your favorite browser and load the MobileFirst Operations Console by entering the
http://localhost:9080/mfpconsole/
URL. - Click the New button next to Applications to create a new application.
- Select Web as the platform, and provide a name and identifier.
- Click Register application.
From MobileFirst CLI
From a command-line window, navigate to the root folder of the web application and run the command: mfpdev app register
.
Updating the MobileFirst web SDK
SDK releases can be found in the SDK NPM repository.
To update the MobileFirst web SDK with the latest release:
- Navigate to the root folder of the web application.
- Run the command:
npm update ibm-mfp-web-sdk
.
Same-origin policy
If web resources are hosted on a different server machine than the one that MobileFirst Server is installed on, a same-origin policy violation is triggered. The same-origin-policy security model 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.
Web apps that use the MobileFirst web SDK must be handled in a supporting topology. For example, use a reverse proxy to internally redirect requests to the appropriate server while maintaining the same single origin.
Alternatives
You can meet the policy requirements by using either of the following methods:
- Serving the web application resources, for example, from the same WebSphere Application Server Liberty profile application server that is used in the IBM MobileFirst Foundation Developer Kit.
- Using Node.js as a reverse proxy to redirect application requests to the MobileFirst Server.
Learn more in Setting up the Web development environmnt tutorial
Secure-origins policy
When you use Chrome during development, the browser might not allow an application to load if it uses both HTTP and a host that is not localhost
. The cause is the secure-origins policy that is implemented and used by default in this browser.
To overcome this, you can start the Chrome browser with the following flag:
--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
- Replace “test-to-new-user-profile/myprofile” with the location of a folder that will act as a new Chrome user profile for the flag to work.
Read more about Secure Origins in this Chormium developer document.
Tutorials to follow next
With the MobileFirst web SDK now integrated, you can now:
- Review the Using the Mobile Foundation SDK tutorials
- Review the Adapters development tutorials
- Review the Authentication and security tutorials
- Review All Tutorials
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.