Create Project by hosting UI on local server machine

1.4 Create Project by hosting UI on local server machine

This topic provides information on Create Project by hosting UI on local server machine.

Building un-built UI
1. UI is built with webpack hence the built UI cannot be directly modified. Hence, bank can use unbuilt UI and make the necessary changes and host the UI is below ways:
  1. Use local machine as local server and host the UI on local development machine and connect the application using localhost.
  2. OR host the UI on local OHS 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.
  1. Bank can follow the UI build steps from “Oracle Banking Digital Experience User Interface Guide”.
3. Additionally, for 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 reload logic//
client:'webpack-dev-server/client/index.js?hot=true&live-//reload=true',     
},
```
  Note:
  If banks want to debug UI the update “devtool” configuration. Refer Webpack documentation https://webpack.js.org/configuration/devtool/ for more details.
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 the illustration mnios46.png
  - Once this server starts, below is the window which appears. This indicates local server is started.
    
    Description of the illustration mnios47.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 OHS development server machine which is accessible in the network. They “key_server_url” will then point to that local server machine URL.

Parent topic: OBDX Servicing Application