1.3 Local UI by running on local machine or local server

This topic provides information on Local UI by running on local machine or local server.

Building un-built UI (required in case of customizations)
  1. For this version, since the UI is built with webpack, the built UI cannot be modified from with the mobile workspace as it is minified code. Hence, either bank can hoist the UI is two ways:
    • Use local machine as local server and host the UI on local development machine and connect the application using localhost.
    • OR host the UI on local development server and point the application to that server URL
  2. UI is same for internet and mobile, same build process of internet to be followed.

    Bank can follow the UI build steps from “Oracle Banking Digital Experience User Interface Guide”.

  3. Additionally, building UI for mobile, Open scripts->webpack->webpack.dev.js and add below line in devServer object:

    As below

            headers: 
{                    
"Access-Control-Allow-Origin":"*"        
},       
SAMPLE: devServer: 
{               
static: path.join(__dirname,"../../dist"),         
compress: true,        
 port: 4000,         
hot: false,               
client: false,         
headers: 
{                   
"Access-Control-Allow-Origin":"*"
},
  4. Also, in webpack.dev.js comment out below lines inside “entry” key.
    entry: {//  main:
          "framework/js/configurations/require-config.js",// Runtime code for hot module replacement//hot: 
'webpack/hot/dev-server.js',// Dev server client for web socket transport, hot and live reloadlogic//client:
          'webpack-dev-server/client/index.js?hot=true&live-//reload=true',     
},
  5. Once the UI is built, run below command to start a local server on the development machine using below command:
    • npm run start
      Description of mnanrnd2-1.png follows
      Description of the illustration mnanrnd2-1.png

    • Once this server starts, below is the window which appears. This indicates local server is started.
      Description of mnanrnd2-2.png follows
      Description of the illustration mnanrnd2-2.png

    • Point the key_server_url to http://localhost:4000 and run the application on simulator. To run on device, the internet proxy should allow localhost domain to accept incoming requests.

      If it is blocked, UI should be built and “npm start” command should be executed on a development server machine which is accessible in the network. They key_server_url will then point to that local server URL instead of localhost

      Note:

      Proper SSL & proper domain needs to be configure to run this on android as androd won’t support for http url.
  6. If banks want to debug UI the update “devtool” configuration. Refer Webpack documentation https://webpack.js.org/configuration/devtool/ for more details.

Parent topic: OBDX Servicing Application