Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

How to Setup your Apps to Target Locally on a Device

May 26, 2017
Mikel Sanchez
Related topics:
Developer Tools
Related products:
Red Hat build of Node.js

Share:

    This blog post is Part 1 in a series of three blog posts, explaining how to prepare the app for debugging (setup) and how to debug on iOS and Android.

    • How to setup your apps to target locally on device (Part 1)
    • How to debug your mobile app on iOS (Part 2)
    • How to debug your mobile app on Android (Part 3)

    How to debug your app locally on a device is going to be the first chapter and explained below.

    HOW TO SETUP YOUR APPS TO TARGET LOCALLY ON DEVICE

    As a developer, I test my code locally to observe its behavior and that helps me debug issues. This example uses the RHMAP WFM Demo Project template because it provides a Client App that uses authentication out of the box, providing an added complexity that would hinder local debugging. This blog post assumes the WFM project is configured as described in the documentation. While this post uses a WFM project as an example, you can use the techniques described in this post for any Client and Cloud Apps, not just WFM projects.

    As a full-stack developer, you want to observe both the back-end and front-end app. However, the Client App is difficult to debug because, as soon as the app initializes, it makes several calls to the server. This post explains how to setup your apps to target locally.

    The goal is to test the app in the browser using a grunt file Gruntfile.js
     with several tasks:

    • Run Client App on a browser with server cloud backend:
    grunt
    • Run Client App on a browser with local cloud backend:
    grunt serve:local --url=http://localhost:8001

    For the Cloud App we can use the same grunt file:

    • Run cloud app locally:
    grunt

    Note on running your cloud app locally:
    The in Gruntfile.js the Cloud App has environment variables that you set up for your project.

    The most important one is FH_SERVICE_MAP where you need to list the MBaaS services where the cloud app connects. The services can be running locally or remotely:

    options : {},
         // environment variables - see https://github.com/jsoverson/grunt-env for more information
         local: {
           ...
           /*
            * This is mapping to authentication service, when running raincatcher-demo-auth locally it will map to it
            * allowing cenv : {
     orrect authentication.
            */
           FH_SERVICE_MAP: function() {
             /*
              * Define the mappings for your services here - for local development.
              * You must provide a mapping for each service you wish to access
              * This can be a mapping to a locally running instance of the service (for local development)
              * or a remote instance.
              */
             var serviceMap = {
               'yxs2qd3aicaumfr3xyc3rgmb5': 'https://localhost:8012'
             };
             return JSON.stringify(serviceMap);
           }
         }
       },

    You must provide a mapping for each service you want to access using FH_SERVICE_MAP.

    This is a mapping to a locally running instance of the service or a remote instance.

    Now, you can set up your environment to debug our code to see what is happening in the app.

    • Bypass box initialization
    • Bypass auth service (if needed)
    • Setup the mobile app

    BYPASS BOX INIT

    The Client App calls fh.init during initialization using the following path:

    /box/srv/1.1/app/init

    expecting a json as a response, for example:

    {
      hosts: {
        url: ‘http://<cloud network IP>:8001’
      },
      init: {
        trackId: ‘awbt345cas3v3ng5****sa1'’
      }
    }

    The SDK expects the trackId attribute under the init key in the response from the cloud for a box-srv-app-init call, even if you are developing locally.

    The original response returns more parameters but this is all you require to develop locally.

    You need to bypass this call, modify the app.js file on cloud app and add the new route:

    app.use('/box/srv/1.1/app/init', function(req, res) {
      res.json({
        hosts: {
          url: 'http://<cloud network IP>:8001'.
        },
        init: {
          trackId: ‘awbt345cas3v3ng5****sa1'
        }
      });
    });

    BYPASS AUTH

    If your app calls to an Auth Service, you must bypass this call.

    When you debug your local app, you will see that a call is being made to, modify the app.js file on cloud app and add the new route:

    /box/srv/1.1/admin/authpolicy/auth
    app.post('/box/srv/1.1/admin/authpolicy/auth', function(req, res) {
      var user = req.body.params.userId;
      var pass = req.body.params.password;
      if (user === "test" && pass === "test") {
        res.json({
          authResponse : {
            email : “redhat@redhat.com",
            id: "b2a4c64e-c815-4cc1-b5bf-cb13****d",
            name: "Redhat",
            phone:"0123*****90",
            status:"Active",
            username:”redhat@redhat.com"
          },
          sessionToken:"kwgQl1Pu0k_4ACLUcghqULCUWPsTDB1M",
          Status:"ok",
          userId:”redhat@redhat.com"
        });
      } else {
         res.status(401).json({'status': 'unauthorized','message': 
    'unauthorized'});
      }
    });

    When you simulate the cloud POST call to /box/srv/1.1/admin/authpolicy/auth  if the retrieved userId and password params are equal to test//test we return a json response for local development.

    NOTE: If your app uses session token validation, make sure that the token session is valid. If not, you'll get an unauthorized response from DB calls, you can bypass the session token validation by commenting out the session validation checks.

    SETUP THE MOBILE APP:

    To run the app on a device we need to follow 3 simple steps:

    1. Change fhconfig.json

    Modify the host property of the fhconfig.json in the www directory of the Client App so it points to your locally hosted Cloud App:

    {
      "appid": "fqvk6******atqew72rsa",
      "appkey": "95af9a42ee********3ba23a1bfe58c8",
      "apptitle": "APP mobile",
      "connectiontag": "1.0.1",
      "host": "http://<cloud network IP>:8001",
      "projectid": "fqvk6hompypukfkxaaaaatwu"
    }

    The host property has to be the machine’s public ip. ”Localhost” is not used in this property because localhost will be the client device.

    2. Build Mobile App

    Run grunt serve:local to generate the new www folder. Our mobile app has a Gruntfile.js to generate the vendor and bundle files.

    3. Build Cordova App

    If you want to build the app for iOS or Android and test on the device, run the following commands cordova platform add ios or cordova platform add android.

    This will generate an Android or iOS project if the platform has been already added just run cordova build ios or cordova build android.


    Click here to download the Red Hat Mobile Application Platform.

    Last updated: February 26, 2024

    Recent Posts

    • How to run a fraud detection AI model on RHEL CVMs

    • How we use software provenance at Red Hat

    • Alternatives to creating bootc images from scratch

    • How to update OpenStack Services on OpenShift

    • How to integrate vLLM inference into your macOS and iOS apps

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue