Loading Oracle JET from CDN

After you create your Oracle JET application, you can configure it to load Oracle JET files and libraries from the Oracle Content Delivery Network (CDN).

You can significantly improve your application’s performance by using distributed servers that can deliver cached web pages and other web content to users based on their geographic locations.

To load Oracle JET from CDN, you must update your RequireJS bootstrap file, typically js/main.js, to reference the CDN location hosting the Oracle JET libraries and files. You must also update your index.html file to reference the Oracle JET CSS files and RequireJS library, also hosted on the Oracle CDN. Finally, if you used the Oracle JET tooling, update the paths specified in the application’s main-release-paths.json.

  1. In your application’s js directory, open your application’s RequireJS bootstrap file, typically main.js, for editing.
  2. Update the path mapping to point to the CDN locations for the Oracle JET libraries and files.

    In the code sample below, the updates you must make are highlighted in bold.

    requirejs.config({
      // Path mappings for the logical module names
      paths: {
        'knockout': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/knockout/knockout-3.4.0',
        'jquery': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jquery-3.1.1.min',
        'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
        'ojs': 'https://static.oracle.com/cdn/jet/v4.1.0/default/js/min',
        'ojL10n': 'https://static.oracle.com/cdn/jet/v4.1.0/default/js/ojL10n',
        'ojtranslations': 'https://static.oracle.com/cdn/jet/v4.1.0/default/js/resources',
        'text': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/require/text',
        'promise': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/es6-promise/es6-promise.min',
        'hammerjs': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/hammer/hammer-2.0.8.min',
        'signals': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/js-signals/signals.min',
        'ojdnd': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
        'css': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/require-css/css.min',
        'customElements': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/webcomponents/custom-elements.min',
        'proj4js': 'https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/proj4js/dist/proj4'
      },
            
      // Shim configuration
      shim: {
          'jquery': {
              exports: ['jQuery', '$']
          },
      ... remaining contents omitted
    );
    
  3. If you used Oracle JET tooling to create your application, in your application’s src/js directory, open main-release-paths.json for editing and update the release paths to point to the same CDN locations you referenced in the previous step.

    The highlighted code shows the updates to main-release-paths.json.

    {
      "knockout": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/knockout/knockout-3.4.0",
      "jquery": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jquery-3.1.1.min",
      "jqueryui-amd": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jqueryui-amd-1.12.0.min",
      "ojs": "https://static.oracle.com/cdn/jet/v4.1.0/default/js/min",
      "ojL10n": "https://static.oracle.com/cdn/jet/v4.1.0/default/js/ojL10n",
      "ojtranslations": "https://static.oracle.com/cdn/jet/v4.1.0/default/js/resources",
      "text": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/require/text",
      "promise": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/es6-promise/es6-promise.min",
      "hammerjs": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/hammer/hammer-2.0.8.min",
      "signals": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/js-signals/signals.min",
      "ojdnd": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min",
      "css": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/require-css/css.min",
      "customElements": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/webcomponents/custom-elements.min",
      "proj4js": "https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/proj4js/dist/proj4"
    }
    
  4. Open index.html for editing and update the references to require.js and the Oracle JET CSS file.

    The highlighted code below shows the necessary modifications.

    <!-- This is the main css file for the default Alta theme -->
    <link id="css" rel="stylesheet" href="https://static.oracle.com/cdn/jet/v4.1.0/default/css/alta/oj-alta-min.css" type="text/css"/>
    ...
    <!-- RequireJS bootstrap file -->
    <script type="text/javascript" src="https://static.oracle.com/cdn/jet/v4.1.0/3rdparty/require/require.js"></script>
    
  5. If you want to build your application in release mode and use the RequireJS Optimizer and Oracle JET tooling, modify the Oracle JET build configuration script to skip loading CDN resources.

    The RequireJS Optimizer, r.js, cannot load network resources like CDN libraries and files. However, you can specify an empty path in your application’s scripts/config/oraclejet-build.js for each CDN library or file that you want to skip.

    1. In your application’s top level directory, open scripts/config/oraclejet-build.js for editing in your favorite text editor.
    2. Remove the comments from the requireJs section and add an entry for paths as shown below.
      /**
       * # requireJs
       * This task runs requirejs optimizer to bundle all scripts in to a large minified main.js for release. 
       * It runs only when build in release mode.
       * The task mirrors the configuration in this link https://github.com/gruntjs/grunt-contrib-requirejs
       */
      requireJs: {
             baseUrl: 'path to the js directory in staging area',
             name: 'the main.js file name',
             mainConfigFile: `the main configuration file`,
             optimize: 'option for optimize',
             out: 'output file path',
             paths: {
             }
           },
      
    3. Edit the existing entries as needed for your application, and add each CDN resource to the paths section.

      The code sample below shows a completed oraclejet-build.js file for a web application.

      requireJs: {
            baseUrl: 'web/js',
            name: 'main-temp',
            mainConfigFile: 'web/js/main-temp.js',
            optimize: 'none',
            out: 'web/js/main.js',
            paths: {
              jquery: "empty:",
              knockout: "empty:",
              jqueryui-amd: "empty:",
              ojs: "empty:",
              ojL10n: "empty:",
              ojtranslations: "empty:",
              text: "empty:",
              promise: "empty:",
              hammerjs: "empty:",
              signals: "empty:",
              ojdnd: "empty:",
              css: "empty:",
              customElements: "empty:",
              proj4js: "empty:"
            }
      },
      

      For a hybrid mobile application, update the baseURL, mainConfigFile, and out entries as shown below.

      requireJs: {
            baseUrl: 'hybrid/www/js',
            name: 'main-temp',
            mainConfigFile: 'hybrid/www/js/main-temp.js',
            optimize: 'none',
            out: 'hybrid/www/js/main.js',
            paths: {
              jquery: "empty:",
              knockout: "empty:",
              ... contents omitted
            }
      },
      

      Tip:

      If your application doesn’t use Oracle JET tooling, see the RequireJS Optimizer documentation for other ways to use the empty paths scheme for skipping CDN resources during optimization.
For additional information about using RequireJS and Oracle JET, see Using RequireJS for Modular Development.