You can develop Oracle JET apps in virtually any integrated development environment (IDE) that supports JavaScript (or TypeScript), HTML5, and CSS3. However, an IDE is not required for developing Oracle JET apps, and you can use any text editor to develop your app.

You can use an IDE in conjunction with the Oracle JET command-line tooling, where you scaffold web apps by using one of the provided starter templates. You can proceed to develop the scaffolded app in the IDE of your choice by opening the project that was created using the JET tooling, in that IDE. After saving changes your app files in the IDE, you use the JET tooling to build and run the JET app.

If you are using Microsoft Visual Studio Code (VS Code) as your editor, you can add the Visual Studio Code Extension of Oracle JET Core to support developing Oracle JET apps. Specifically, the Oracle JET extension for VS Code improves developer productivity for creating clientside JavaScript or TypeScript web apps by providing:

• Code completion against the JET API and JET component metadata.

• Ability to work with code snippets for the most commonly used Oracle JET components.

• Capability to diagnose app source (JavaScript, HTML, CSS, and JSON files) by running Oracle JET audit reports.

This custom HTML data support for JET components support means that when you are editing HTML files, VS Code will prompt you with Oracle JET tags and attributes. As you start typing your Oracle JET HTML tag, a dropdown will show a list of matching choices:

Description of the illustration vscode-jet-attributes.png

For more examples of Oracle JET support for VS Code, visit the Oracle JET Core Extension download page in the Visual Studio Marketplace.

We recommend that you use the npx Node.js package runner to create and manage Oracle JET apps. With the npx Node.js package runner, you won’t need to uninstall and reinstall the NPM packages that deliver the ojet-cli if you frequently change releases of the ojet-cli.

To use npx, you must install Node.js and you must uninstall any globally installed instances of the Oracle JET CLI from your computer. To list globally-installed packages, run the npm list --depth=0 -g command in a terminal window. To uninstall a globally installed instance of the Oracle JET CLI, run the npm -g un @oracle/ojet-cli command.

Once you have installed Node.js, you can use npx and the version of the Oracle JET CLI NPM package that you want to use, plus the appropriate command. The following examples demonstrate how you create Oracle JET apps using different releases of the CLI and then serve them on your local development computer.

// Create and serve an Oracle JET 15.0.0 app
$ npx @oracle/ojet-cli@15.0.0 create myJET15app --template=navdrawer
$ cd myJET15app
$ npx @oracle/ojet-cli@15.0.0 serve

// Create and serve an Oracle JET 17.1.0 app
$ npx @oracle/ojet-cli@17.1.0 create myJETapp --template=navdrawer
$ cd myJETapp
$ npx @oracle/ojet-cli@17.1.0 serve

You can use all the Oracle JET CLI commands (create, build, serve, strip, restore, and so on) by following the syntax shown in the previous examples (npx package command).

The npx package runner fetches the necessary package (for example, @oracle/ojet-cli@17.1.0) from the NPM registry and runs it. The package is installed in a temporary cache directory, as in the following example for a Windows computer:

C:\Users\JDOE\AppData\Roaming\npm-cache\_npx

No NPM packages for the releases of the Oracle JET CLI shown in the previous examples are installed on your computer, as you will see if you run the command to list globally installed NPM packages:

$ npm list --depth=0 -g
C:\Users\JDOE\AppData\Roaming\npm
+-- json-server@0.16.3
+-- node-gyp@9.0.0
+-- typescript@4.2.3
`-- yarn@1.22.18

Use the following command to clear the temporary cache directory:

npx clear-npx-cache

To learn more about npx, see the Node.js documentation. For more information about the commands that the Oracle JET CLI provides, see Understand the Web App Workflow.

Oracle JET CLI supports usage of the Yarn package manager.

You must install Node.js as Oracle JET uses the npm package manager by default. However, if you install Yarn, you can use it instead of the default npm package manager by specifying the --installer=yarn parameter option when you invoke an Oracle JET command.

The --installer=yarn parameter can be used with the following Oracle JET commands:

• ojet create --installer=yarn
• ojet build --installer=yarn
• ojet serve --installer=yarn
• ojet strip --installer=yarn

Enter ojet help at a terminal prompt to get additional help with the Oracle JET CLI.

As an alternative to specifying the --installer=yarn parameter option for each command, add "installer": "yarn" to your Oracle JET app's oraclejetconfig.json file, as follows:

{
. . . 
  "generatorVersion": "17.1.0",
  "installer": "yarn"
}

The Oracle JET CLI then uses Yarn as the default package manager for the Oracle JET app.

For more information about the Yarn package manager, including how to install it, see Yarn's website.

Each template in the Starter Template collection is a single page app that is structured for modular development. The collection of available Starter Templates supports JavaScript or TypeScript development and will depend on the template type you add to your app.

Instead of storing all the app markup in the index.html file, the app uses the oj-module component to bind either a view template containing the HTML markup for the section or both the view template and JavaScript or TypeScript file that contains the viewModel for any components defined in the section.

The following code shows a portion of the index.html file in the Web Nav Drawer Starter Template that highlights the oj-module component definition. For the sake of brevity, most of the code and comments are omitted. Comments describe the purpose of each section, and you should review the full source code for accessibility and usage tips.

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>Oracle JET Starter Template - Web Nav Drawer</title>
       ... contents omitted
  </head>
  <body class="oj-web-applayout-body">

    ... contents omitted

     <oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content" config="[[moduleAdapter.koObservableConfig]]">
     </oj-module>
     
     ... contents omitted

    <!-- This injects script tags for the main javascript files -->
		<!-- injector:scripts -->
		<!-- endinjector -->
  </body>
</html>

The main page’s content area uses the Oracle JET oj-web-applayout-* CSS classes to manage the responsive layout. The main page’s content uses the HTML oj-module element with its role defined as main (role="main") for accessibility.

The oj-module component’s config.view attribute tells Oracle JET that the section is only defining a view template, and the view will be bound to the existing viewModel. When the oj-module element’s config.view-model attribute is defined, the app will load both the viewModel and view template with the name corresponding to the value of the config.view-model attribute.

The /js/views folder contains the view templates for the app and the /js/viewModels contains the viewModel scripts. The image below shows the Web Nav Drawer Starter Template file structure.

Description of the illustration gs_qs_file_structure.png

For additional information about working with single page apps, oj-module, CoreRouter, and Knockout templates, see Create Single-Page Apps.

For details about the oj-web-applayout-* CSS classes, see Web Application Patterns. For additional information about working with responsive design, see Design Responsive Apps.

To add content, modify the appropriate view template and ViewModel script (if it exists) for the section that you want to update. Add any needed RequireJS modules to the ViewModel’s define() definition, along with functions to define your ViewModel.

1. In your app’s index.html file, locate the oj-module element for the section you want to modify and identify the template and optional ViewModel script.

   In the Web Nav Drawer Starter Template, the oj-module element is using the config attribute. The following code sample shows the mainContent HTML oj-module definition in index.html, where the moduleAdapter observable, a ModuleAdapterClass object, obtains the configuration from its koObservableConfig field.

   <oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content"
              config="[[moduleAdapter.koObservableConfig]]">
   </oj-module>

   The return value of the [[moduleAdapter.koObservableConfig]] observable is set to the current state of the CoreRouter object. The CoreRouter object is defined with an initial value of dashboard in the app's appController.js script, where the page initially loads and no path is yet specified, as shown in the navData array below for the empty path case. The router object is created from the array and then passed to the moduleAdapter declaration.

   let navData = [
      { path: '', redirect: 'dashboard' },
      { path: 'dashboard', detail: { label: 'Dashboard', iconClass: 'oj-ux-ico-bar-chart' } },
      { path: 'incidents', detail: { label: 'Incidents', iconClass: 'oj-ux-ico-fire' } },
      { path: 'customers', detail: { label: 'Customers', iconClass: 'oj-ux-ico-contact-group' } },
      { path: 'about', detail: { label: 'About', iconClass: 'oj-ux-ico-information-s' } }
   ];
   
   // Router setup
   let router = new CoreRouter(navData, {
     urlAdapter: new UrlParamAdapter()
   });
   router.sync();
   
   this.moduleAdapter = new ModuleRouterAdapter(router);
   this.selection = new KnockoutRouterAdapter(router);

   The navigation data provider for oj-navigation-list element is created as an ArrayDataProvider object that associates the available navData routes by using the slice(1) function to remove the first path definition in the navdata array that specifically handles the "empty path" case.

   // Setup the navDataProvider with the routes, excluding the first redirected route.
   this.navDataProvider = new ArrayDataProvider(navData.slice(1), {keyAttributes: "path"});

   To modify the starter templates, for example, the Dashboard Content Area, you will modify both dashboard.html and dashboard.js.

2. To modify the view template, remove unneeded content, and add the new content to the view template file.

   For example, if you are working with an Oracle JET Cookbook sample, you can copy the markup into the view template you identified in the previous step (dashboard.html). Replace everything after the <h1>Dashboard Content Area</h1> markup in the template with the markup from the sample.

   The following code shows the modified markup if you replace the existing content with a portion of the content from the Date and Time Pickers demo.

   <div id="div1">
     <oj-label for="dateTime">Default</oj-label>
     <oj-input-date-time id="dateTime" value='{{value}}'>
     </oj-input-date-time>
             
   <br/><br/>
             
     <span class="oj-label">Current component value is:</span>
     <span><oj-bind-text value="[[value]]"></oj-bind-text></span>
             
   </div>

3. To modify the ViewModel, remove unneeded content, and add the new content as needed. Include any additional RequireJS modules that your new content may need.

   The app's main.js file contains the list of RequireJS modules currently included in the app. Compare the list of libraries with the list you need for your app, and add any missing modules to your define() function in the ViewModel script. For example, to use the oj-input-date-time element shown in the demo and to use the IntlConverterUtils namespace API, add ojs/ojdatetimepicker and add ojs/ojconverterutils-i18n modules to the dashboard.js ViewModel script since it's not already defined in dashboard.js.

   The sample below shows a portion of the modified dashboard.js file, with the changes highlighted in bold.

   define(['knockout', 'ojs/ojconverterutils-i18n', 'ojs/ojknockout', 'ojs/ojdatetimepicker', 'ojs/ojlabel'
      ], function(ko, ConverterUtilsI18n) {
      /**
       * The view model for the main content view template
       */
     function DashboardViewModel() {
       var self = this;
       self.value = ko.observable(ConverterUtilsI18n.IntlConverterUtils.dateToLocalIso(new Date(2020, 0, 1)));
     }
   
     return DashboardViewModel;
   });
   

   Note:

   In this example, you are not copying the entire code section. The Cookbook uses a require() call to load and use the needed libraries in a single bootstrap file. The Starter Template that you are pasting uses define() to create a RequireJS module that can be used by other parts of your app.
4. If you want to add, change, or delete modules or templates in the app, modify the main.js RequireJS bootstrap file and appController.js file as needed.
   The appController.js file also contains the event handler that responds when a user clicks one of the navigation items. Depending upon your modifications, you may need to update this method as well.
5. Verify the changes in your favorite browser.

   The following image shows the runtime view of the Web Nav Drawer Starter Template with the new Dashboard Content Area content showing oj-input-date-time with its current value.

   
   Description of the illustration gs_quickstart_runtime.png