Customizing the UX Room Reservation app

Our Room Reservation app is a mobile-friendly Perceptive app. If you're an IBM® TRIRIGA® application developer, you can customize this React-based app by pulling the project, configuring your environment, then modifying, building, and deploying your customized app.

Note: For more information about building a ReactJS application in the UX framework, see Building UX Web Applications. For more information about best practices for customizing UX apps, see UX Best Practices.

Contents

I. Verifying the requirements

Before you begin, verify that you fulfill the following requirements.

  • A running IBM TRIRIGA environment that has the React-based Room Reservation app.
  • Administrator access to the IBM TRIRIGA environment.
  • Access to Microsoft Azure and Microsoft Exchange.
  • Any version of Node.js 14.x.x.
    Note: If you do not have Node.js or npm installed on your computer, then access https://nodejs.org to download and install Node.js (npm is installed as part of the Node.js installation). For previous releases, see https://nodejs.org/en/download/releases/.
  • NPM-based TRIRIGA tools tri-pull and tri-deploy to pull and deploy the project, respectively.
    • To install tri-pull, run: npm install @tririga/tri-pull –g
    • To install tri-deploy, run: npm install @tririga/tri-deploy –g
    Note: For more information about tri-pull and tri-deploy, see Commanding UX and Building UX Web Applications.

II. Pulling the Room Reservation project

Next, pull the Room Reservation app project from your IBM TRIRIGA server as follows.

  • Navigate to the preferred local directory for your project. For example:
    ../document/tririga-room-reservation
  • Run the following tri-pull command. For example:
    tri-pull -t http://www.mytririga.com/devPath -u myUserName -p myPassword 
       -v tririga-room-reservation -w

III. Configuring your environment

Next, after you pull the Room Reservation project files, configure your IBM TRIRIGA environment as follows.

a. Configuring IBM TRIRIGA

  • Server file. Configure your TRIRIGA server.xml file by adding the following <cors> tag to enable Cross-Origin Resource Sharing (CORS). Save the file. Restart your environment. This tag allows the request from localhost:3000 to reach the TRIRIGA API.
    <cors allowCredentials="true" allowedHeaders="*" 
       allowedMethods="GET, POST, PUT, DELETE, HEAD" allowedOrigins="*" 
       domain="/" exposeHeaders="triWebContextId"/>
    Note: For more information about enabling CORS, see Building UX Web Applications.
  • OAuth record. Add a new Microsoft OAuth profile record in TRIRIGA by navigating to Tools > System Setup > Integration > OAuth Settings. All field values in the new Microsoft OAuth profile record must match all field values in the existing Microsoft OAuth profile record for the Room Reservation app, except for the following two fields.
    • Name: Append the existing name value with: _local. For example: perceptiveOauth_local
    • OAuth Redirect URL: Replace the existing URL value with: http://locahost:3000/oauth
    Note: For more information about OAuth settings, see Configuring IBM TRIRIGA with Microsoft Exchange 365 and OAuth.

b. Configuring Microsoft Azure

c. Configuring project file

  • In the preferred local directory for your project, make a copy of the .env.development.local.template file and rename the copied file to .env.development.local.
  • Open the .env.development.local file and set the values for the following variables:
    • REACT_APP_INSTANCE_ID: Instance ID from the application metadata (where -1 is a new instance or the instance is not created yet)
    • REACT_APP_TRIRIGA_URL: URL of the TRIRIGA server
    • REACT_APP_CONTEXT_PATH: TRIRIGA context path (after the domain)
    • REACT_APP_MODEL_AND_VIEW: Exposed name of the model-and-view
    • REACT_APP_BASE_PATH: Context path when running the app on the local development server
    • REACT_APP_EXPOSED_NAME: Exposed name of the application
    • TRIRIGA_USER: TRIRIGA login username
    • TRIRIGA_PASSWORD: TRIRIGA login password
    • REACT_APP_TRIRIGA_OAUTH_PROFILE_NAME: Name of the Microsoft OAuth profile record (that you created earlier)
    • REACT_APP_SSO: If SSO is enabled on the server, then true; otherwise, false
    • NODE_TLS_REJECT_UNAUTHORIZED: If you want to disable TLS verification, then 0; this setting is optional and only recommended for local development as it disables TLS for Node.js
  • Enter the following information.
    REACT_APP_INSTANCE_ID=-1
    REACT_APP_TRIRIGA_URL=http://www.mytririga.com/devPath
    REACT_APP_CONTEXT_PATH=/devPath
    REACT_APP_MODEL_AND_VIEW=triRoomReservationWebApp
    REACT_APP_BASE_PATH=/
    REACT_APP_EXPOSED_NAME=tririgaRoomReservation
    TRIRIGA_USER=myUserName
    TRIRIGA_PASSWORD=myPassword
    REACT_APP_TRIRIGA_OAUTH_PROFILE_NAME=perceptiveOauth_local
    REACT_APP_SSO=true
    NODE_TLS_REJECT_UNAUTHORIZED=0
  • After the .env.development.local file is configured, return to your preferred project directory, and run npm install to download all of the /node_modules/ dependencies.
    cd tririga-room-reservation
    npm install

IV. Running and modifying your app

Next, after your IBM TRIRIGA environment is configured, with Node.js or npm installed, run and modify your app as follows.

  • Run npm start to start the Room Reservation app.
    cd tririga-room-reservation
    npm start
  • Make any modifications or customizations to your app.
    Note: For more information about best practices for customizing UX apps, see UX Best Practices.
  • After you make your changes, close your running app.

V. Building and deploying your app

Finally, after modifying or customizing your Room Reservation app, build and deploy your modified app to your IBM TRIRIGA server as follows.

  • To clean up any inconsistent line endings or carriage returns (CR), manually set removeCR to true as follows. Navigate to /node_modules/resolve-url-loader/index.js. Edit the index.js file by locating the resolveUrlLoader method and replacing removeCR:false with removeCR:true. Save the file.
  • Before you can deploy your modified app, you must first build it by running npm run build.

    cd tririga-room-reservation
    npm run build
  • To deploy your modified app, run the following tri-deploy command. For example:
    tri-deploy -t http://www.mytririga.com/devPath -u myUserName -p myPassword
       -v tririga-room-reservation -d /my-directory -w
  • Open your modified Room Reservation app from your browser to review your app.