Choose a Development Environment for Oracle JET

You can decide what development environment you want to use before you start developing Oracle JET applications. If you will use Oracle JET tooling to develop web or hybrid mobile applications, you must install the Oracle JET packages.

Topics:

Choose a Development Environment

You can develop Oracle JET applications 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 applications, and you can use any text editor to develop your application.

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

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 applications. Specifically, the Oracle JET extension for VS Code improves developer productivity for creating clientside JavaScript or TypeScript web applications 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 application 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 vscode-jet-attributes.png follows

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.

If you want to develop hybrid mobile applications using Oracle JET tooling, you must also install a platform-specific SDK for the platform (Android, iOS, or Windows) where you want to run the hybrid mobile application. However, you can still use your favorite editor for editing your application. For details about developing hybrid applications using Oracle JET tooling, see Understanding the Hybrid Mobile Application Workflow.

Install Oracle JET Tooling

If you plan to use Oracle JET tooling to develop web or hybrid mobile applications, you must install Node.js and the Oracle JET command-line interface (CLI), ojet-cli.

Note:

If you already have Oracle JET tooling installed on your development platform, check that you are using the minimum versions supported by Oracle JET and upgrade as needed. For the list of minimum supported versions, see Oracle JET Support.

To install the prerequisite packages:

Install Node.js

Install Node.js on your development machine.

From a web browser, download and install one of the installers appropriate for your OS from the Node.js download page. Oracle JET recommends that you install the latest LTS version. Node.js is pre-installed on macOS, but is likely an old version, so upgrade to the latest LTS version if necessary.

After you complete installation and setup, you can enter npm commands from a command prompt to verify that your installation succeeded. For example, to configure a proxy server, use npm config.

npm config set proxy http-proxy-server-URL:proxy-port
npm config set https-proxy https-proxy-server-URL:proxy-port

Include the complete URL in the command. For example:

npm config set proxy http://my.proxyserver.com:80
npm config set https-proxy http://my.proxyserver.com:80

Install the Oracle JET Command-Line Interface

Use npm to install the Oracle JET command-line interface (ojet-cli).

At the command prompt of your development machine, enter the following command as Administrator on Windows or use sudo on Macintosh and Linux machines:
```
[sudo] npm install -g @oracle/ojet-cli
```
It may not be obvious that the installation succeeded. Enter ojet help to verify that the installation succeeded. If you do not see the available Oracle JET commands, scroll through the install command output to locate the source of the failure.
- If you receive an error related to a network failure, verify that you have set up your proxy correctly if needed.
- If you receive an error that your version of npm is outdated, type the following to update the version: [sudo] npm install -g npm.
You can also verify the Oracle JET version with ojet --version to display the current version of the Oracle JET command-line interface.If the current version is not displayed, please reinstall by using the npm install command for your platform.

Configure Oracle JET Applications for TypeScript Development

If you plan to build an Oracle JET application or Oracle JET Web Component in TypeScript, your application project requires the TypeScript type definitions that Oracle bundles with the Oracle JET npm package.

When you install Oracle JET from npm, the TypeScript type definitions for version 4.0.0 get installed with the JET bundle and are available for use when you develop applications. To begin application development using TypeScript, Oracle JET tooling supports scaffolding your application by using a variety of Oracle JET Starter Templates that have been optimized for TypeScript development, with the default ES6 implementation. For details, see Scaffold a Web Application and Scaffold a Hybrid Mobile Application.

If you have already created an application and you want to switch to developing with TypeScript, you can use the Oracle JET tooling to add support for type definitions and compiler configuration. To add TypeScript version 4.0.0 to an existing application, use ojet add typescript from your application root.

ojet add typescript

When you add TypeScript support to an existing application, Oracle JET tooling installs TypeScript locally with an npm install. The tooling also creates the tsconfig.json compiler configuration file at your application root.

You can use the compiler configuration file, for example, to specify compiling ES6 application source files into ES5 JavaScript code and AMD format modules. During the build process JET tooling overwrites compiler options that you may have modify. If needed, you can revert overwritten options by customizing a JET hook script template, before_app_typescript and before_component_typescript, for invocation during the JET tooling build process. For details about hook scripts, see Create a Hook Script for Web Applications.

When you begin development with TypeScript, you can you can import TypeScript definition modules for Oracle JET custom elements, as well as non-element classes, namespaces, and interfaces. For example, in this Oracle JET application, the oj-chart import statement supports typechecking against the element’s TypeScript API.

Description of full_typescript_file.png follows

Description of the illustration full_typescript_file.png

And, your editor can leverage the definition files for imported modules to display type information.

Description of the illustration typescript_popup.png

Note that the naming convention for JET custom element types is changing. The type name that you specify within your TypeScript project to import a JET component's exported interface will follow one of these two naming conventions:

componentName + Element (new "suffix" naming convention)

For example, oj-input-search and the oj-stream-list have the type name InputSearchElement and StreamListElement, respectively.

or
oj + componentName ("oj" prefix naming convention of not yet migrated components)

For example, oj-chart and oj-table continue to adhere to the old-style type naming with "oj" prefix: ojChart and ojTable, respectively.

Until all JET component interface type names have been migrated to follow the new standard, suffix naming convention, some JET core components will continue to follow the old "oj" prefix naming convention (without the "Element" suffix). To find out the type name to specify in your TypeScript project, view the Module Usage section of the API documentation for the component.

For more information about working with TypeScript in JET, see API Reference for Oracle® JavaScript Extension Toolkit (Oracle JET) - JET In Typescript Overview.