Bootstrapping your first Oracle JET project

Generating your first Oracle JET project, managing it using an IDE, and running it on your computer is way easier with a modern set of tools and techniques such as Node.js, npm, Yeoman, and Grunt.

All this can be achieved using the standard mechanism including the following steps: 

You can also use other techniques, such as generating the project using IDE plugins or downloading the ZIP version of the templates and importing them into projects. ZIP versions are available for download at http://www.oracle.com/technetwork/developer-tools/jet/downloads/index.html.

Setting up npm and Node.js

Before setting up npm and Node.js, let us understand these terminologies and how they help us in application development. Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. npm from Node.js is the package manager for JavaScript which helps in discovering the packages of reusable code and assembles them in powerful new ways. By using npm, you can install, share, and distribute your code easily and manage the project dependencies wisely. Node.js installation comes with npm and can be downloaded and installed from its home page.

We used the latest stable version available (v6.11.1 LTS) for the setup, as shown in the following steps:

1. Download Node.js, installable from its home page (https://nodejs.org/en/).
2. Run the installable, which starts up with the following interface:

3. Click Next and accept the terms in the following interface: 

4. Choose the installation directory. I am happy with the default directory provided and continue to the Next step, as follows:

5. The next step gives us the Node.js runtime engine and npm package manager along with the documentation shortcuts and path entries. We can leave the default options selected and go to the Next step, which takes us to the final step:

6. Click on the Install button, which should install Node.js, along with the npm package manager, on your computer:

Please be advised that neither the Node.js nor the npm have GUI. They are only accessible through the command line interface, hence you would need to run the commands on the command line.

7. Once the installation is complete, you should see the success status as follows:

8. Once the Node.js and npm installation is complete, you can open the command prompt and verify the installation and version using the commands shown in the following screenshot:

Installing Yeoman and Grunt

Yeoman is the scaffolding tool for web applications, and easily kick starts your new web project development, ensuring the best practices are covered. This means that you don’t have to go through the initial project setup tasks you would normally go through to get started; instead, get ready to use application structures along with modular architecture.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, linting (the process of running a program that will analyze code for potential errors), and so on. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt helps in automating the tedious non-functional activities such as minimization, compilation, unit testing, and linting. It's much easier than the method we have been using for years.

We can install them together using the following command: 

npm -g install yo grunt-cli

This should complete the installation, as shown in the following screenshot:

Installing Oracle JET generator

Oracle JET generator is a Yeoman generator for Oracle JET maintained by the Oracle Corporation. It helps us rapidly perform the project setup for a web application or hybrid mobile application on Android, iOS, or Windows.

It can be installed using the following command:

npm -g install generator-oraclejet

This should complete the installation, as shown in the following screenshot: 

Creating a project using the command line

Once Node.js, npm, Yeoman, Grunt, and the Oracle JET Yeoman generator are installed, we shall create a new project using the oraclejet command. The beauty of this command is that it generates the project with the name given by the readily available project, which is already created and stored in the node library with the code generator. The following are the steps involved in creating the project with this command:

1. The oraclejet Yeoman command with the project name parameter creates the project with the name provided:

      yo oraclejet <project name> --template=navdrawer

2. We are using the project name OracleJETSample, which should complete the project creation, as shown in the following screenshot:

3. Once the project creation and verification is complete, the status of the application is ready, as follows:

Running a project with Grunt

1. Once the project has been created in the preceding step, it can be built using the following command:

      cd <project name>
      grunt build

2. The preceding command should complete the project build, as shown in the following screenshot:

3. Once the project is built successfully, it can be executed using the following command:

      grunt serve

4. The preceding command should run the project, as shown in the following screenshot: 

5. Once the project has started running, it should open the application, running in the default browser, as follows:

The default application was created using the navdrawer template, hence it is showing up with the default navdrawer template. We can open the project code in our favorite IDE and edit it to run again using the Grunt serve command.

However, the NetBeans IDE is providing the built-in plugins and support for npm and Grunt to manage these build and serve activities within the IDE. In addition, NetBeans provide great syntax advice and support for these plugins. Let's review the IDE installation, configuration, and usage in the following section.

Managing and running the project using NetBeans IDE

NetBeans Integrated Development Environment (IDE) provides a quick and easy way to develop desktop, mobile, and web applications with Java, JavaScript, HTML5, and other programming languages.

It can be downloaded and installed from its home page: https://netbeans.org/. 

Once the NetBeans IDE is installed, we can open the project using File | Open Project and select the project root folder, which opens the project in the IDE as follows:

NetBeans automatically identifies this project as an npm Grunt project and shows the directories accordingly. We can expand and review the folder structure. 

Right-clicking on the project root folder and selecting the Build command (as follows) gives us the option: 

The preceding Build option prompts you to configure project actions to call Grunt tasks from within NetBeans IDE. Choose Yes to open the configuration window:

Select all the options (checkboxes) and click OK to run Grunt commands enabled in the project actions, as follows:

Right-click on the project root folder again and click on the Build option to let Grunt build the project within the IDE, as shown in the following screenshot:

Once the project is built, select the project by clicking on the project root folder, and choose the Chrome option from the menu icons as shown in the following screenshot:

It will prompt you to select the start file; you can choose the web/index.html as the start file for the project. Click OK to run the project:

The application should open and run in the Chrome browser (assuming we already have the Chrome browser installed). The first time, it prompts you to install the Chrome NetBeans connector plugin; choose Yes to install it. This allows the pages to refresh automatically for future changes, through a NetBeans connection to the browser.

The application should be running and will show the landing page in the browser as follows:

This means that we have successfully built our first Oracle JET application and have run it using both command line and IDE instructions. We can make further changes to the application and observe the changes on web pages, which we will cover in the upcoming chapters.