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.
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 haveNode.js
ornpm
installed on your computer, then access https://nodejs.org to download and installNode.js
(npm
is installed as part of theNode.js
installation). For previous releases, see https://nodejs.org/en/download/releases/. - NPM-based TRIRIGA tools
tri-pull
andtri-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 abouttri-pull
andtri-deploy
, see Commanding UX and Building UX Web Applications. - To install
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 . 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
- Launch the Microsoft Azure app registration screen from the following URL:
- Select All Applications. Then select the OAuth application that was configured for the Room Reservation app.
- In the left-hand navigation list, under the Manage section, select Authentication.
- Under the Web > Redirect URIs section, select Add URI.
- Enter the value: http://locahost:3000/oauth
- Save your OAuth application.Note: For more information about OAuth settings, see Configuring IBM TRIRIGA with Microsoft Exchange 365 and OAuth.
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 serverREACT_APP_CONTEXT_PATH
: TRIRIGA context path (after the domain)REACT_APP_MODEL_AND_VIEW
: Exposed name of the model-and-viewREACT_APP_BASE_PATH
: Context path when running the app on the local development serverREACT_APP_EXPOSED_NAME
: Exposed name of the applicationTRIRIGA_USER
: TRIRIGA login usernameTRIRIGA_PASSWORD
: TRIRIGA login passwordREACT_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, falseNODE_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
totrue
as follows. Navigate to /node_modules/resolve-url-loader/index.js. Edit the index.js file by locating theresolveUrlLoader
method and replacingremoveCR:false
withremoveCR: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.