Setting up the web development environment

improve this page | report issue


Developing and testing web applications is as easy as previewing a local HTML file in your web browser of choice.
Developers can use their IDE of choice, and any framework(s) that suits their needs.

However one thing may stand in the way of developing web applications. Web applications might encounter errors due to same-origin policy violation. Same-origin policy is a restriction imposed on web browsers. For example, if an application is hosted on the domain, it is not allowed for the same application to also access content that is available on another server, or for that matter, from the MobileFirst Server.

Web apps that are to use the Mobile Foundation web SDK should be handled in a supporting topology, for example by using a Reverse Proxy to internally redirect requests to the appropriate server while maintaining the same single origin.

The policy requirements can be satisfied by using either of the following methods:

  • Serving the web application resources’ from the same WebSphere Full/Liberty profile application server that also hosts the MobileFirst Server.
  • Using Node.js as a proxy to redirect application requests to the MobileFirst Server.

Jump to


  • Web applications are supported for the following browser versions. The version numbers indicate the earliest fully supported version of the respective browser.

    Browser Chrome Safari* Internet Explorer Firefox Android Browser
    Supported Version 43+ 8+ 10+ 38+ Android 4.3+

    * In Safari, private browsing mode is supported only for single-page applications (SPAs). Other applications might exhibit unexpected behavior.

  • The following setup instructions require either Apache Maven or Node.js installed on the developer’s workstation. For further instructions, see the installation guide.

Using WebSphere Liberty profile to serve the web application resources

In order to serve the web application’s resources, these need to be stored in a Maven webapp (a .war file).

Creating a Maven webapp archetype

  1. From a command-line window, navigate to a location of your choosing.
  2. Run the command:

    mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
    • Replace MyCompany and MyWebApp with your own values.
    • To enter the values one-by-one, remove the -DinteractiveMode=false flag.

Building the Maven webapp with the web application’s resources

  1. Place the web application’s resources (such as the HTML, CSS, JavaScript and image files) inside the generated [MyWebApp] → src → Main → webapp folder.

    From here on, consider the webapp folder as the development location for the web application.

  2. Run the command: mvn clean install to generate a .war file containing the application’s web resources.
    The generated .war file is available in the [MyWebApp] → target folder.

    Important: mvn clean install must be run each time you update a web resource.

Adding the Maven webapp to the application server

  1. Edit the server.xml file of your WebSphere application server.
    If using the MobileFirst Developer Kit, the file is located in: [MobileFirst Developer Kit] → mfp-server → user → servers → mfp folder. Add the following entry:

    <application name="MyWebApp" location="path-to/MyWebApp.war" type="war"></application>
    • Replace name and path-to/MyWebApp.war with your own values.
    • The application server is automatically restarted after saving the changes to the server.xml file.

Testing the web application

Once you are ready to test your web application, visit the URL: localhost:9080/MyWebApp. - Replace MyWebApp with your own value.

Using Node.js

Node.js can be used as a reverse proxy to tunnel requests from the web application to the MobileFirst Server.

  1. From a command-line window, navigate to your web application’s folder and run the following set of commands:

    npm init
    npm install --save express
    npm install --save request
  2. Create a new file in the node_modules folder, for example proxy.js.
  3. Add the following code to the file:

    var express = require('express');
    var http = require('http');
    var request = require('request');
    var app = express();
    var server = http.createServer(app);
    var mfpServer = "http://localhost:9080";
    var port = 9081;
    app.use('/myapp', express.static(__dirname + '/'));
    console.log('::: server.js ::: Listening on port ' + port);
    // Web server - serves the web application
    app.get('/home', function(req, res) {
         // Website you wish to allow to connect
         res.sendFile(__dirname + '/index.html');
    // Reverse proxy, pipes the requests to/from MobileFirst Server
    app.use('/mfp/*', function(req, res) {
         var url = mfpServer + req.originalUrl;
         console.log('::: server.js ::: Passing request to URL: ' + url);
    • replace the port value with your preferred one.
    • replace /myapp with your preferred path name for your web application.
    • replace /index.html with the name of your main HTML file.
    • if needed, update /mfp/* with the context root of your Mobile Foundation runtime.
  4. To start the proxy, run the command: node proxy.js.
  5. Once you are ready to test your web application, visit the URL: server-hostname:port/app-name, for example: http://localhost:9081/myapp
    • Replace server-hostname with your own value.
    • Replace port with your own value.
    • Replace app-name with your own value.

Next steps

To continue with Mobile Foundation development in Web applications, the Mobile Foundation web SDK need to be added to the Web application.

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.
Last modified on January 23, 2017