Oracle JET App Migration for Release 18.1.0

B Oracle JET App Migration for Release 18.1.0

If you used Oracle JET tooling to scaffold your app with Oracle JET version 5.x.0 or later, you can migrate your app manually to version 18.1.0.

Before you migrate your app, be sure to check the Oracle JET Release Notes for any component, framework, or other change that could impact your app.

Important:

This process is not supported for Oracle JET releases prior to version 5.0.0.

If you use the Alta theme in your Oracle JET app, we encourage you to switch to using the Redwood theme as soon as possible. Note the following about the Alta theme:

The Alta theme was deprecated in release 10.0.0 and supported through the 12.x releases. In release 13.0.0 and later, Oracle JET provides "best effort" support for Alta. No bug fixes or new features will be provided for Alta-only issues. For more information about Oracle JET's release schedule, see What is the release schedule for Oracle JET?
The content that described how to use the Alta theme in an Oracle JET app has been removed from the documentation and it has been removed from the Oracle JET Cookbook.
In release 18.0.0, Oracle JET replaced its dependency on node-sass with sass (Dart Sass). The third-party author of node-sass no longer supports it. If you continue to use Alta or a custom theme based on Alta, you need to install node-sass. For information about how to install node-sass, including the Node.js version support policy of node-sass, see the node-sass page on the NPM registry website.

Prepare for Oracle JET App Migration

To migrate your Oracle JET app source from version 9.x.0 or later to the latest version 18.1.0, you must upgrade NPM packages, update theme and library reference paths, and replace the path_mapping.json file. Additionally, you replace references to the oj-redwood-cssvars*.css files that introduced CSS variables as a preview feature in JET release 9.0.0. CSS variables were a production feature in JET release 10.0.0. Finally, you include script injector tokens in appDirRoot/src/index.html that will automatically be replaced with the required scripts tags at build time.

You can migrate your Oracle JET app using the ojet migrate command that Oracle JET introduced in JET release 18.0.0, but before you begin the migration task, perform a pre-migration audit and the other preliminary tasks listed below. Once you have completed these tasks, proceed to migrate your app using the Oracle CLI migrate command or manually migrate the app as described in subsequent sections of this chapter.

Create a backup copy of the Oracle JET app that you want to migrate.
Uninstall any globally-installed instances of the Oracle JET CLI

As Administrator on Windows or using sudo as needed on Macintosh and Linux systems, enter the following commands in a terminal window to ensure that your system has no globally-installed instances of the ojet-cli tooling package:
1. [sudo] npm uninstall -g ojet-cli
  
  Releases 3.2.0 and earlier of the Oracle JET CLI were published without using "@oracle" in the namespace name of the package.
2. [sudo] npm uninstall -g @oracle/ojet-cli
  
  Post-3.2.0 releases of the the Oracle JET CLI were published using "@oracle" in the namespace name of the package.
A maintenance or active long-term support (LTS) version of Node.js is required. Open a terminal window as an administrator and check your Node.js version.
```
node -v
```
If your Node.js version is earlier than the versions listed as maintenance or active LTS on the Releases page of the Nodejs.org website, download a newer LTS version. Go to the Nodejs.org website. Under LTS Version (Recommended for Most Users), download the installer for your system. In the Download dialog box, choose a location for the file and click Save. Run the downloaded installer as an administrator and follow the steps in the installation wizard to install Node.js.
We recommend that you audit your app with Oracle JET Audit Framework (JAF) before any migration. The built-in audit rules provided with JAF will help you to identify and fix invalid functionality, including deprecated components and APIs. Implement the audit results with some attention to detail to ensure a successful migration to JET release 18.1.0.

As Administrator on Windows or using sudo as needed on Macintosh and Linux systems, enter the following command in a terminal window:
```
npm install -g @oracle/oraclejet-audit
```
On your app root, run the following JAF command to initialize the audit of your app.
```
ojaf --init
```
In the generated AppRootDir/oraclejafconfig.json file, set the value of the jetVer property to the release to which you are migrating your app. For example, "jetVer": "18.1.0".

Run the following command to audit your app and review any issues that the audit identifies.
```
ojaf
```
For more details about JAF, see Initialize Oracle JAF and Run an Audit in Using and Extending the Oracle JET Audit Framework.
At a terminal prompt, create a temporary app to obtain the files that you will copy to your migrating app.

The type of temporary app you create depends on the kind of app you're migrating, whether it's a TypeScript-based MVVM app, a JavaScript-based MVVM app, or a virtual DOM-based app.
- Create a JavaScript-based MVVM app
  
  npx @oracle/ojet-cli create tempApp --template=navdrawer
- Create a TypeScript-based MVVM app
  
  npx @oracle/ojet-cli create tempApp --template=navdrawer --typescript
- Create a virtual DOM app
  
  npx @oracle/ojet-cli create tempApp --template=basic --vdom

Migrate an App Using the Oracle JET CLI

The Oracle JET CLI includes a migrate command that migrates Oracle JET apps created in release 13.0.0 or later and that use the Redwood theme (or a Redwood-based custom theme) to the current release.

The migrate command processes your app's source and configuration files and makes changes necessary to migrate the app. This includes validating that the version the Oracle JET that you are migrating from is release 13.0.0 or later. In addition, it updates and validates the:

oraclejetconfig.json file
path_mappings.json file
main.js file
index.html file
Hook files in the scripts directory
Components from the Oracle Component Exchange

For Oracle JET apps created prior to release 13.0.0 or apps that don’t use the Redwood theme, see the subsequent sections for information about how to manually migrate these apps.

To migrate your app using the Oracle JET CLI:

Review and complete the preparatory tasks described in Prepare for Oracle JET App Migration.
Make a backup copy of the source of the Oracle JET app that you want to migrate.
In the app’s top-level directory, delete the package-lock.json file.

In a terminal window, navigate to the app’s top-level directory and enter the following commands to upgrade the local NPM dependencies:

npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev

After you run these commands, open the package.json file of the app and ensure it contains the following package entries and version numbers for the 18.1.0 release of Oracle JET that you migrate to.

{
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~18.1.0",
    "@oracle/oraclejet-core-pack": "~18.1.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~18.1.0",
    . . .
  },
  . . .

Still in the app’s top-level directory, enter the appropriate command to upgrade the local NPM dependencies that you have specified in the app's package.json file:
- If your Oracle JET app includes components installed from a component exchange, use the following command to upgrade the component dependencies:
  
  npx @oracle/ojet-cli restore
  
  This command invokes npm install as a sub-task, so you do not need to run the npm install command separately to upgrade local NPM dependencies.
- npm install
Enter the appropriate command to migrate the app to the 18.1.0 release of Oracle JET.
- Migrate the app and set the default theme to redwood and the version of sass to 1.80.5.
  
  npx @oracle/ojet-cli migrate
- If your app uses a Redwood-based custom theme, include the --theme option so that the migrated app continues to use the custom theme post-migration.
  
  npx @oracle/ojet-cli migrate --theme=myRedwoodTheme
- For a list of available options, enter the following command at a terminal prompt in your app’s top-level directory: npx @oracle/ojet-cli help migrate.
Test the migration and verify the look and feel.

Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.

Migrate Redwood-themed Apps from Releases 9.x.0 or Later to Release 18.1.0

To migrate your Oracle JET app source from version 9.x.0 or later to the latest version 18.1.0, you must upgrade NPM packages, update theme and library reference paths, and replace the path_mapping.json file. Additionally, you replace references to the oj-redwood-cssvars*.css files that introduced CSS variables as a preview feature in JET release 9.0.0. CSS variables were a production feature in JET release 10.0.0. Finally, you include script injector tokens in appDirRoot/src/index.html that will automatically be replaced with the required scripts tags at build time.

To migrate your app:

Review and complete the preparatory tasks described in Prepare for Oracle JET App Migration.
In the app’s top-level directory, delete the package-lock.json file.
In a terminal window, navigate to the app’s top-level directory and enter the following commands to upgrade the local NPM dependencies:
```
npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev
```
After you run these commands, open the package.json file in your app root folder and ensure it contains the following package entries and version numbers for the 18.1.0 release of Oracle JET.
```
{
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~18.1.0",
    "@oracle/oraclejet-core-pack": "~18.1.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~18.1.0",
     . . .,
    "typescript": "5.7.2",
    . . .
  },
  . . . 
```
Review the entries in the temporary app that you created (./tempApp/package.json) to ensure that release 18.1.0 of Oracle JET does not include new or modified entries that you should make in the app that you are migrating.

Note:
You do not require the "typescript": "5.7.2 entry if you are migrating an Oracle JET JavaScript-based MVVM app.
Open the oraclejetconfig.json file in your app root folder and ensure it contains the following properties and settings for sassVer and defaultTheme.
The following example specifies redwood so that the app uses the Redwood theme. If your app uses a custom theme, specify the name of the custom theme. For example, "defaultTheme": "myCustomTheme",.
```
{
  "paths": {
    "source": {
	"common": "src",
	"web": "src-web",
	"hybrid": "src-hybrid",
	"javascript": "js",
	"typescript": "ts",
	"styles": "css",
	"themes": "themes"
    },
    "staging": {
	"web": "web",
	"hybrid": "hybrid",
	"themes": "staged-themes"
    }
  },
  "unversioned": true,
  "defaultBrowser": "chrome",
  "sassVer": "1.80.5",
  "defaultTheme": "redwood",
   "fontUrl": ". . .",
  "typescriptLibraries": "...",
  "jsdocLibraries": ". . .",
  "webpackLibraries": "...",
  "mochaTestingLibraries": "...",
  "jestTestingLibraries": "...",
  "architecture": "mvvm"
}
```
If your app uses TypeScript, Webpack, JSDoc, or testing libraries, ensure that the *Libraries properties for these features are up-to-date by reviewing the entries in the temporary app that you created (./tempApp/oraclejetconfig.json) when you prepared for this migration.
Update the Oracle JET library configuration paths to reference the 18.1.0 versions of Oracle libraries by copying the path_mappings.json file from the temporary app.
1. Rename your migrating app’s src/js/path_mapping.json as migrating-path_mapping.json.
2. Copy tempApp/src/js/path_mapping.json to your migrating app’s src/js directory.
3. If you added any third-party libraries to your app, open path_mapping.json for editing and add an entry for each library that appears in migrating-path_mapping.json, copying an existing entry and modifying as needed. The code sample below shows the addition you might make for a third-party library named my-library.
```
"libs": {

    "my-library": {
      "cdn": "3rdparty",
      "cwd": "node_modules/my-library/build/output",
      "debug": {
        "src": "my-library.debug.js",
        "path": "libs/my-library/my-library.debug.js",
        "cdnPath": ""
      },
      "release": {
        "src": "my-library.js",
        "path": "libs/my-library/my-library.js",
        "cdnPath": ""
      }
    },
...
```
Update the app script templates by copying from the temporary app.
1. Copy any new script template files from the tempApp/scripts/hooks directory to your migrating app’s scripts/hooks directory.
2. Copy the hooks.json scripting configuration file from the tempApp/scripts/hooks directory to your migrating app’s scripts/hooks directory. The updated configuration file associates any new script template files with their corresponding build system hook point and allows the Oracle JET CLI to call your scripts.
In your app, open the main.js app bootstrap file and verify that it contains the following code.
1. Verify that the paths property of the requirejs.config definition includes the opening and closing //injector and //endinjector comments. If the comments were removed, add them to your requirejs.config() definition, as shown.
```
requirejs.config(
  {
   baseUrl: 'js',

    paths:
    /* DO NOT MODIFY
    ** All paths are dynamicaly generated from the path_mappings.json file.
    ** Add any new library dependencies in path_mappings json file.
    */
    //injector:mainReleasePaths
    {
       ...no need to revise...
    }
    //endinjector 
   }
  );
```
  When you build or serve the app, the tooling relies on the presence of these injector comments to inject release-specific library paths in main.js. The updated path_mapping.json file (from the previous migration step) ensures that the migrated app has the correct library configuration paths for this release.
2. Verify that any modifications you made to app.loadModule() in your main.js file appear.
  
  Starting in JET release 9.0.0, app.loadModule() is deprecated and has been removed from main.js, but your bootstrap code may continue to use the function, for example to change a path. Because migrating apps created prior to release 9.x.0 rely on loadModule(), the function should remain in your migrated main.js file, and your migrated appController.js file should contain the loadModule() definition.
  
  In new apps that you create, starting in JET release 9.0.0, the loadModule() observable dependency is no longer used to support the deprecated ojRouter for use with the oj-module element. Starter app templates now use CoreRouter and work with oj-module though the ModuleRouterAdapter.
3. Remove the private function _ojIsIE11, if it appears in the main.js app bootstrap file. This function was included previously to detect whether an app was running in the IE11 web browser in order to load the required polyfills and the transpiled to ES5 version of Oracle JET. Starting in JET release 11.0.0, JET removed support for IE11 and no longer distributes the polyfills and other resources to run JET apps in the IE11 web browser. As a result, the _ojIsIE11 function serves no purpose, and can be removed.
```
(function () {

   function _ojIsIE11() {
      var nAgt = navigator.userAgent;
      return nAgt.indexOf('MSIE') !== -1 || !!nAgt.match(/Trident.*rv:11./);
   };
   var _ojNeedsES5 = _ojIsIE11();

   requirejs.config(
     {
      ...
     }
   );
}());
```
Enter the following commands to change to the app’s top-level directory and upgrade the local NPM dependencies that you have updated in the app's package.json file:
```
cd appDir
npm install
```

In the app’s src directory, replace any hardcoded references to a previous version.

If CSS references to Redwood or references to icon fonts, similar to the following, appear in the src/index.html file:

<!-- This is the main css file for the default theme -->
 <!-- injector:theme -->
  <link rel="stylesheet" href="css/libs/oj/v9.0.0/redwood/oj-redwood-min.css" 
        type="text/css"/>
 <!-- endinjector -->

<!-- This contains icon fonts used by the starter template -->
  <link rel="stylesheet" id="uxiconFont" href="https://static.oracle.com . . .

Remove the <link> tag so that only the injector:theme and injector:font entries remain:

<!-- This is the main css file for the default theme -->
 <!-- injector:theme -->
 <!-- endinjector -->

<!-- This contains icon fonts used by the starter template -->
 <!-- injector:font -->
 <!-- endinjector:font -->

Search for hardcoded references to a previous release version that may appear in .html and .js files and replace those with the current release version.

If present in the src/index.html file, replace the following script tags:
```
. . . 
    <script type="text/javascript" src="js/libs/require/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>
```
With these script tag injector tokens:
```
 . . .   
  
	
	
  </body>
</html>
```
At build time, these tokens will automatically be replaced with the required scripts tags. During debug builds, the tokens will be replaced with script tags that load the require.js and main.js files. During release builds, the tokens will be replaced with script tags that load the require.js and bundle.js files. Because it is no longer used during release builds, the main.js file will be deleted at the end of the build. This means that if your app does not use the script tag injector tokens, it will have to include a script tag in the appRootDir/src/index.html file that loads bundle.js instead of main.js.
Test the migration and verify the look and feel.
1. Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.
  
  For a list of available options, enter the following command at a terminal prompt in your app’s top level directory: npx @oracle/ojet-cli help.
2. If your app uses a custom theme, you may encounter the following console error message if you do not recompile the custom theme after you update it from the previous to the current release:
  "Your CSS file is incompatible with this version of JET (18.1.0)"
3. To make your custom theme compatible with the new JET version, run npx @oracle/ojet-cli add sass to enable Sass processing.
4. Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.
  If your app uses a custom theme, be sure to include the --theme option to recompile the CSS:
```
npx @oracle/ojet-cli build [options] --theme=myTheme
```
  To specify multiple custom themes, use:
```
npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2
```
Optional: When you are satisfied that your app has migrated successfully, remove the temporary app and delete the renamed migrating-path_mapping.json and migrating-main.js files from your migrated app. Should you find issues, you can re-run the JAF audit tool for an audit report.

Migrate to the Redwood Theme CSS

Redwood theme is the Oracle JET standard for app look and feel and is available when you want to migrate your app to the Redwood theme.

If you have an existing app that you want to migrate from the Alta theme, you can migrate to JET release 18.1.0 and configure the app to run with the Redwood CSS included with Oracle JET. You obtained the Redwood CSS distribution when you completed the app source migration process.

Migrating your app's Alta theme to Redwood theme requires making a change at the app level. You edit the oraclejetconfig.json file to control whether JET Tooling builds with the Redwood or Alta CSS. With the setting configured, you can rebuild your app and all the pages will use the appropriate CSS, as specified by the stylesheet injector in your app's index.html file.

After you set the Redwood theme as the new default and run your app, you will find the look and feel of your app changes considerably. To adjust to the Redwood theme, you will need to make manual updates to app layout for new fonts, sizes, and patterns.

CSS variables, which are supported by the Redwood theme, were introduced in the oj-redwood-cssvars*.css files as a preview feature in JET release 9.0.0. In JET release 10.0.0, CSS variables became a production feature and are now included in the oj-redwood*.css files. Replace references to the oj-redwood-cssvars*.css files with references to the oj-redwood*.css files in your migrated apps. Be aware of this change if you migrated your app to use the Redwood theme and started to use CSS variables in JET releases prior to release 10.0.0.

Before You Begin:

Complete migration of your app source files before attempting to migrate to the Redwood theme. First migrate with the Alta theme preserved and then migrate to the Redwood theme. This way you can test your app with the Redwood theme and easily revert back to the Alta theme, if desired. See Migrate Alta-themed Apps from Releases Prior to 8.3.0 to Release 18.1.0 for details.
If you use a custom theme, review the Theme Changes section in the release notes and update your custom theme manually.

Be aware that Sass variables that you may have overridden in an Alta theme will need to be migrated to CSS variables in the Redwood theme. For more information about migrating a custom theme, please see About CSS Variables and Custom Themes in Oracle JET.
Review app images and consider how you will replace images that belong to the deprecated Oracle JET framework images library with public domain images, such as those found on Oracle Apex Universal Theme and on Font Awesome. The Oracle JET framework image classes are no longer shown in JET Cookbook, starting in release 9.0.0.

To migrate to the Redwood theme CSS:

Configure the app to load the Redwood CSS.
Edit the <app_root>/oraclejetconfig.json file and change the defaultTheme property to redwood.
```
{
  "paths": { 
       ...
     }
   },
   "defaultBrowser": "chrome",
   "sassVer": "1.80.5",
   "defaultTheme": "redwood",
   "fontUrl": "...",
    ...,
   "architecture": "mvvm"
}
```
This configures JET Tooling to inject oj-redwood-min.css into the stylesheet link in your app's index.html file.
Test the migration and verify the look and feel.
Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.

For a list of available options, enter the following command at a terminal prompt in your app’s top-level directory: npx @oracle/ojet-cli help.
If your app uses a custom theme, be sure to include the --theme option to regenerate the CSS:
```
npx @oracle/ojet-cli build [options] --theme=myTheme
```
To specify multiple custom themes, use:
```
npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2
```

Migrate Alta-themed Apps from Releases Prior to 8.3.0 to Release 18.1.0

To migrate your Oracle JET app source from version 5.x.0 through version 8.3.0 to the latest version 18.1.0, you must upgrade NPM packages, update theme and library reference paths, and replace the path_mapping.json file. Additionally, you must update the oraclejetconfig.json file to enable Alta CSS usage in JET release 18.1.0. We recommend that you migrate to the Redwood CSS theme only after successful migration of the app source has been verified. Finally, you include script injector tokens in appDirRoot/src/index.html that will automatically be replaced with the required scripts tags at build time.

To migrate your app:

Review and complete the preparatory tasks described in Prepare for Oracle JET App Migration.
In the app’s top-level directory, delete the package-lock.json file.
In a terminal window, navigate to the app’s top-level directory and enter the following commands to upgrade the local NPM dependencies:
```
npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev
```
After you run these commands, open the package.json file in your app root folder and ensure it contains the following package entries and version numbers for the 18.1.0 release of Oracle JET.
```
{
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~18.1.0",
    "@oracle/oraclejet-core-pack": "~18.1.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~18.1.0",
     . . .,
    "typescript": "5.7.2",
    . . .
  },
  . . . 
```
Review the entries in the temporary app that you created (./tempApp/package.json) to ensure that release 18.1.0 of Oracle JET does not include new or modified entries that you should make in the app that you are migrating.

Note:
You do not require the "typescript": "5.7.2 entry if you are migrating an Oracle JET JavaScript-based MVVM app.
Open the oraclejetconfig.json file in your app root folder and ensure it contains values for the sassVer and defaultTheme properties.
The following example specifies alta so that the app uses the Alta theme.

Note:
Oracle JET replaced its dependency on node-sass with sass (Dart Sass) in release 18.0.0. The third-party author of node-sass no longer supports it. If you continue to use Alta or a custom theme based on Alta, you need to install node-sass. For information about how to install node-sass, including the Node.js version support policy of node-sass, see the node-sass page on the NPM registry website. Specify the version of node-sass that you install as the value for the sassVer property.
```
{
  "paths": {
    "source": {
	"common": "src",
	"web": "src-web",
	"hybrid": "src-hybrid",
	"javascript": "js",
	"typescript": "ts",
	"styles": "css",
	"themes": "themes"
    },
    "staging": {
	"web": "web",
	"hybrid": "hybrid",
	"themes": "staged-themes"
    }
  },
  "unversioned": true,
  "defaultBrowser": "chrome",
  "sassVer": "...",
  "defaultTheme": "alta",
  "fontUrl": "...",
  "typescriptLibraries": "...",
  "jsdocLibraries": "...",
  "webpackLibraries": "...",
  "mochaTestingLibraries": "...",
  "jestTestingLibraries": "...",
  "architecture": "mvvm"
}
```
The "defaultTheme": "alta" setting enables your app to migrate and remain on the Alta theme. This property supports migrating to the Redwood theme in a later migration process. If your app uses a custom theme, specify the name of the custom theme instead. For example, "defaultTheme": "myCustomTheme",

If your app uses TypeScript, Webpack or testing libraries, ensure that the *Libraries properties for these features are up-to-date by reviewing the entries in the temporary app that you created (./tempApp/oraclejetconfig.json).
Update the Oracle JET library configuration paths to reference the 18.1.0 versions of Oracle libraries by copying the path_mappings.json file from the temporary app.
1. Rename your migrating app’s src/js/path_mapping.json as migrating-path_mapping.json.
2. Copy tempApp/src/js/path_mapping.json to your migrating app’s src/js directory.
3. If you added any third-party libraries to your app, open path_mapping.json for editing and add an entry for each library that appears in migrating-path_mapping.json, copying an existing entry and modifying as needed. The code sample below shows the addition you might make for a third-party library named my-library.
```
"libs": {

    "my-library": {
      "cdn": "3rdparty",
      "cwd": "node_modules/my-library/build/output",
      "debug": {
        "src": "my-library.debug.js",
        "path": "libs/my-library/my-library.debug.js",
        "cdnPath": ""
      },
      "release": {
        "src": "my-library.js",
        "path": "libs/my-library/my-library.js",
        "cdnPath": ""
      }
    },
...
```
Update the app script templates by copying from the temporary app.
1. Copy any new script template files from the tempApp/scripts/hooks directory to your migrating app’s scripts/hooks directory.
2. Copy the hooks.json scripting configuration file from the tempApp/scripts/hooks directory to your migrating app’s scripts/hooks directory. The updated configuration file associates any new script template files with their corresponding build system hook point and allows the Oracle JET CLI to call your scripts.
In your app, open the main.js app bootstrap file and verify that it contains the following code.
1. Verify that the paths property of the requirejs.config definition includes the opening and closing //injector and //endinjector comments. If the comments were removed, add them to your requirejs.config() definition, as shown.
```
requirejs.config(
  {
    baseUrl: 'js',

    paths:
    /* DO NOT MODIFY
    ** All paths are dynamicaly generated from the path_mappings.json file.
    ** Add any new library dependencies in path_mappings json file.
    */
    //injector:mainReleasePaths
    {
       ...no need to revise...
    }
    //endinjector 
   }
);
```
  When you build or serve the app, the tooling relies on the presence of these injector comments to inject release-specific library paths in main.js. The updated path_mapping.json file (from the previous migration step) ensures that the migrated app has the correct library configuration paths for this release.
2. Verify that any modifications you made to app.loadModule() in your main.js file appear.
  
  Starting in JET release 9.0.0, app.loadModule() is deprecated and has been removed from main.js, but your bootstrap code may continue to use the function, for example to change a path. Because migrating apps created prior to release 9.x.0 rely on loadModule(), the function should remain in your migrated main.js file, and your migrated appController.js file should contain the loadModule() definition.
  
  In new apps that you create, starting in JET release 9.0.0, the loadModule() observable dependency is no longer used to support the deprecated ojRouter for use with the oj-module element. Starter app templates now use CoreRouter and work with oj-module though the ModuleRouterAdapter.
3. Remove the private function _ojIsIE11, if it appears in the main.js app bootstrap file. This function was included previously to detect whether an app was running in the IE11 web browser in order to load the required polyfills and the transpiled to ES5 version of Oracle JET. Starting in JET release 11.0.0, JET removed support for IE11 and no longer distributes the polyfills and other resources to run JET apps in the IE11 web browser. As a result, the _ojIsIE11 function serves no purpose, and can be removed.
```
(function () {

   function _ojIsIE11() {
      var nAgt = navigator.userAgent;
      return nAgt.indexOf('MSIE') !== -1 || !!nAgt.match(/Trident.*rv:11./);
   };
   var _ojNeedsES5 = _ojIsIE11();

   requirejs.config(
     {
      ...
     }
   );
}());
```
Enter the following commands to change to the app’s top-level directory and upgrade the local NPM dependencies that you have updated in the app's package.json file:
```
cd appDir
npm install
```
In the app’s src directory, replace any hardcoded references to a previous version.
1. Edit the src/index.html file and replace the existing CSS reference with version v18.1.0.
```
<link rel="stylesheet" href="css/libs/oj/v18.1.0/alta/oj-alta-min.css" id="css" />
```
2. Search for other hardcoded references to a previous release version that may appear in .html and .js files and replace those with the current release version.
If present in the src/index.html file, replace the following script tags:
```
. . . 
    <script type="text/javascript" src="js/libs/require/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>
```
With these script tag injector tokens:
```
 . . .   
  
	
	
  </body>
</html>
```
At build time, these tokens will automatically be replaced with the required scripts tags. During debug builds, the tokens will be replaced with script tags that load the require.js and main.js files. During release builds, the tokens will be replaced with script tags that load the require.js and bundle.js files. Because it is no longer used during release builds, the main.js file will be deleted at the end of the build. This means that if your app does not use the script tag injector tokens, it will have to include a script tag in the appRootDir/src/index.html file that loads bundle.js instead of main.js.
Test the migration and verify the look and feel.
1. Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.
  
  For a list of available options, enter the following command at a terminal prompt in your app’s top-level directory: npx @oracle/ojet-cli help.
2. If your app uses a custom theme, you may encounter the following console error message if you do not recompile the custom theme after you update it from the previous to the current release:
  "Your CSS file is incompatible with this version of JET (18.1.0)"
3. To make your custom theme compatible with the new JET version, run npx @oracle/ojet-cli add sass to enable Sass processing.
4. Run npx @oracle/ojet-cli build and npx @oracle/ojet-cli serve with appropriate options to build and serve the app.
  
  For a list of available options, enter the following command at a terminal prompt in your app’s top-level directory: npx @oracle/ojet-cli help.
  If your app uses a custom theme, be sure to include the --theme option to recompile the CSS:
```
npx @oracle/ojet-cli build [options] --theme=myTheme
```
  To specify multiple custom themes, use:
```
npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2
```
Optional: When you are satisfied that your app has migrated successfully, remove the temporary app and delete the renamed migrating-path_mapping.json and migrating-main.js files from your migrated app. Should you find issues, you can re-run the JAF audit tool for an audit report.

After you migrate your app and ensure it runs with the Alta theme, you can follow an additional, separate process to migrate to the Redwood theme, as described in Migrate to the Redwood Theme CSS.