Prepare to deploy an Oracle JET virtual DOM app

Introduction

This tutorial shows you how to prepare an Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app for deployment.

You can deploy the Oracle JET virtual DOM app, which contains a collection of HTML, TypeScript files using JSX syntax (TSX), and Cascading Style Sheets (CSS) files to any type of web or application server. The method of deployment depends upon the type of server environment that your app runs in.

To deploy the Oracle JET virtual DOM app, you can use the same method that you use to deploy any other client interface in your specific environment.

The virtual DOM app that you create with the command from the Oracle JET command-line interface package (npx @oracle/ojet-cli create JET-Virtual-DOM-app --template=basic --vdom) contains a directory of hook script template files that you can use to define new steps for the build process. For example, you can create a hook script to archive the virtual DOM app /web directory as a ZIP file or as a WAR file. This after_build script runs after the build process finishes.

This tutorial doesn’t illustrate the deployment steps that depend upon a specific environment and platform.

Objectives

In this tutorial, you will learn how to archive the /web directory of the virtual DOM app as either a ZIP file or a WAR file. You also learn how to modify the virtual DOM app to automate archiving as part of the Oracle JET app build process.

Prerequisites

Task 1: Create the after_build Hook Script

You create the after_build hook script by using a provided hook script template file that you modify.

  1. Navigate to the JET-Virtual-DOM-app/scripts/hooks directory and open the after_build.js hook script template file in an editor.

  2. Copy the after-build-js.txt code snippet and replace the contents of the template file with the copied code snippet.

Task 2: Modify the after_build Hook Script

Modify the hook script to specify the type of archive file that you want to generate for the virtual DOM app. The hook script uses the same compression method to create the ZIP file and the WAR file. You modify the after_build hook script to specify the extension of the output file, which is .war by default.

  1. In the after_build.js file, edit the file name passed to fs.createWriteStream() to use the appropriate extension: .zip or .war.

    • To generate a WAR file, name the file my-archive.war.

      const output = fs.createWriteStream('my-archive.war');

    • To generate a ZIP file, name the file my-archive.zip.

      const output = fs.createWriteStream('my-archive.zip');
  2. Save the after_build.js file without changing the file name. The file names of the hook scripts in the /scripts/hooks directory correspond to various Oracle JET build hook points.

Task 3: Build the App in Release Mode

When you build the virtual DOM app in release mode, the build --release command replaces the development version of the libraries and scripts in the /web/ directory with minified versions. When the build process is completed, the build then executes the after_build hook script and archives the contents of the /web directory.

  1. Open a terminal window, change to the JET-Virtual-DOM-app directory, and install the archiver npm package.

    npm install archiver

    This installs the archiver npm package in the JET-Virtual-DOM-app project. The after_build.js hook uses this package to archive your virtual DOM app.

  2. Open a terminal window, change to the JET-Virtual-DOM-app directory, and build the virtual DOM app in release mode.

    npx ojet build web --release

    The build process triggers hook scripts located in the /scripts/hooks directory and takes a few minutes to finish.

  3. Wait for confirmation.

    . . .
Running after_build hook.
Success: Build finished.
Files were successfully archived.

  4. Navigate to the JET-Virtual-DOM-app directory and locate the archive file generated by the hook script. For example, if you modified the after_build hook script to generate a WAR file named my-archive.war, then a WAR file with that name appears in the app root directory.

    WAR file in the root directory of an Oracle JET virtual DOM app

Next Step

To proceed to the first tutorial in the next learning path in this series, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.