netbeans.apache.org/src/content/kb/docs/webclient/ojet-settingup.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = Setting Up an Oracle JET Application
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Setting Up an Oracle JET Application - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, Setting Up an Oracle JET Application

 This document provides a step-by-step set of instructions guiding you through the process of setting up an application based on link:http://oraclejet.org[+Oracle JavaScript Extension Toolkit (JET)+]. JET empowers web and mobile developers by providing a modular toolkit based on modern JavaScript, CSS3, and HTML5 design and development principles.


 == Setting Up

 In this exercise you learn how to set up an Oracle JET application via the  ``ojet-cli``  tool.

 *Note:* If you have been using the Yeoman-based generator, that is,  ``generator-oraclejet`` , you must install it before continuing with the steps below, via  ``npm -g uninstall generator-oraclejet`` .

 1. On the command prompt in a terminal window, type the following:


 [source,java]
 ----

 node -v
 ----

 If the terminal window shows that Node is not installed or at a lower version than 5, link:https://nodejs.org/en/[+go to the Node site+] and install the Long Term Support (LTS) release of Node. Currently, at the time of writing, the LTS release is v6.11.2, and is listed as being "recommended for most users".

 *Note:* Do not use the Latest release of Node, i.e., v8.x. The Node Package Manager (NPM) version 5 that comes with Node v8.x has bugs that cause nested dev-dependencies to not be installed properly. This is listed in our link:http://www.oracle.com/webfolder/technetwork/jet/globalSupport-releaseNotes.html[+Release Notes for JET 3.2.0+] and we are watching the npm bugs to see when they are going to fix them.


 [start=2]
 . After completing the above step, install the Oracle JET Command Line ( ``link:https://github.com/oracle/ojet-cli[+ojet-cli+]`` ) tool as follows:


 [source,java]
 ----

 npm -g install ojet-cli
 ----

 *Note:* You may need to be in admin mode, such as via  ``sudo -s``  on Mac OS X, to be able to call the above command.

 Under the covers, the  ``ojet-cli``  tool installs and uses popular JavaScript tools, such as Yeoman and Grunt, as can link:https://github.com/oracle/ojet-cli/blob/master/package.json[+be seen here+]. Where previously, you'd have to use commands such as  ``yo``  and  ``grunt`` , these are now hidden within the  ``ojet-cli``  tool and do not need to be installed separately anymore.


 [start=3]
 . The  ``-g``  argument in the previous step should have installed the  ``ojet``  command globally, so that you should be able to run  ``ojet``  anywhere, i.e., not in any specific folder or location since the  ``ojet``  command should now be globally available. To try it out, run the following:

 [source,java]
 ----

 ojet help
 ----

 The terminal window should now show all the commands available to be used with  ``ojet`` . If not, you can manually configure the PATH of your system to include  ``ojet-cli`` .


 [start=4]
 . Once you have successfully run  ``ojet help`` , use  ``ojet``  to create a new Oracle JET application, as follows:


 [source,java]
 ----

 ojet create MyApp --template=navdrawer
 ----

 'navdrawer', in the command line above, is one of the starter templates made available by Oracle JET, as outlined below:

 * link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-Drawer.html[+Nav Drawer Starter+]
 * link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-NavBar.html[+Nav Bar Starter+]
 * link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-Basic.html[+Basic Starter+]

 After the process completes, you should have an application structured as follows:

 image::images/navdrawer.png[]

 Open the application into an editor or IDE of your choice, such as NetBeans IDE, which displays the application as shown in the screenshot above.


 [start=5]
 . Once the application is created, use the terminal window to navigate into the root folder, i.e., the top folder, which is named  ``MyApp`` , and build and serve the application, as follows:


 [source,java]
 ----

 ojet serve
 ----

 After the build completes, the browser opens and displays the application:

 image::images/newhtml5project-9.png[]

 Congratulations, you have successfully set up an Oracle JET application. Repeat the steps above whenever you need to set up a new Oracle JET application.

 link:/about/contact_form.html?to=3&subject=Feedback:%20Setting%20Up%20Oracle%20JET%20Applications[+Send Feedback on This Tutorial+]


 [[seealso]]
 == See Also

 For more information about support for Oracle JET and a variety of HTML5 applications in the IDE on link:https://netbeans.org/[+netbeans.org+], see the following resources:

 * link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples.html[+"Learn" section on the Oracle JET site+]. A set of official Oracle JET learning resources.
 * link:html5-editing-css.html[+Working with CSS Style Sheets in HTML5 Applications+]. A document that continues with the application that you created in this tutorial that demonstrates how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the Chrome browser to visually locate elements in your project sources.
 * link:html5-js-support.html[+Debugging and Testing JavaScript in HTML5 Applications+]. A document that demonstrates how the IDE provides tools that can help you debug and test JavaScript files in the IDE.
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= Setting Up an Oracle JET Application
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Setting Up an Oracle JET Application - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, Setting Up an Oracle JET Application

	This document provides a step-by-step set of instructions guiding you through the process of setting up an application based on link:http://oraclejet.org[+Oracle JavaScript Extension Toolkit (JET)+]. JET empowers web and mobile developers by providing a modular toolkit based on modern JavaScript, CSS3, and HTML5 design and development principles.


	== Setting Up

	In this exercise you learn how to set up an Oracle JET application via the ``ojet-cli`` tool.

	Note: If you have been using the Yeoman-based generator, that is, ``generator-oraclejet`` , you must install it before continuing with the steps below, via ``npm -g uninstall generator-oraclejet`` .

	1. On the command prompt in a terminal window, type the following:


	[source,java]
	----

	node -v
	----

	If the terminal window shows that Node is not installed or at a lower version than 5, link:https://nodejs.org/en/[+go to the Node site+] and install the Long Term Support (LTS) release of Node. Currently, at the time of writing, the LTS release is v6.11.2, and is listed as being "recommended for most users".

	Note: Do not use the Latest release of Node, i.e., v8.x. The Node Package Manager (NPM) version 5 that comes with Node v8.x has bugs that cause nested dev-dependencies to not be installed properly. This is listed in our link:http://www.oracle.com/webfolder/technetwork/jet/globalSupport-releaseNotes.html[+Release Notes for JET 3.2.0+] and we are watching the npm bugs to see when they are going to fix them.


	[start=2]
	. After completing the above step, install the Oracle JET Command Line ( ``link:https://github.com/oracle/ojet-cli[+ojet-cli+]`` ) tool as follows:


	[source,java]
	----

	npm -g install ojet-cli
	----

	Note: You may need to be in admin mode, such as via ``sudo -s`` on Mac OS X, to be able to call the above command.

	Under the covers, the ``ojet-cli`` tool installs and uses popular JavaScript tools, such as Yeoman and Grunt, as can link:https://github.com/oracle/ojet-cli/blob/master/package.json[+be seen here+]. Where previously, you'd have to use commands such as ``yo`` and ``grunt`` , these are now hidden within the ``ojet-cli`` tool and do not need to be installed separately anymore.


	[start=3]
	. The ``-g`` argument in the previous step should have installed the ``ojet`` command globally, so that you should be able to run ``ojet`` anywhere, i.e., not in any specific folder or location since the ``ojet`` command should now be globally available. To try it out, run the following:

	[source,java]
	----

	ojet help
	----

	The terminal window should now show all the commands available to be used with ``ojet`` . If not, you can manually configure the PATH of your system to include ``ojet-cli`` .


	[start=4]
	. Once you have successfully run ``ojet help`` , use ``ojet`` to create a new Oracle JET application, as follows:


	[source,java]
	----

	ojet create MyApp --template=navdrawer
	----

	'navdrawer', in the command line above, is one of the starter templates made available by Oracle JET, as outlined below:

	* link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-Drawer.html[+Nav Drawer Starter+]
	* link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-NavBar.html[+Nav Bar Starter+]
	* link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples-Starter-Basic.html[+Basic Starter+]

	After the process completes, you should have an application structured as follows:

	image::images/navdrawer.png[]

	Open the application into an editor or IDE of your choice, such as NetBeans IDE, which displays the application as shown in the screenshot above.


	[start=5]
	. Once the application is created, use the terminal window to navigate into the root folder, i.e., the top folder, which is named ``MyApp`` , and build and serve the application, as follows:


	[source,java]
	----

	ojet serve
	----

	After the build completes, the browser opens and displays the application:

	image::images/newhtml5project-9.png[]

	Congratulations, you have successfully set up an Oracle JET application. Repeat the steps above whenever you need to set up a new Oracle JET application.

	link:/about/contact_form.html?to=3&subject=Feedback:%20Setting%20Up%20Oracle%20JET%20Applications[+Send Feedback on This Tutorial+]




	[[seealso]]
	== See Also

	For more information about support for Oracle JET and a variety of HTML5 applications in the IDE on link:https://netbeans.org/[+netbeans.org+], see the following resources:

	* link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples.html[+"Learn" section on the Oracle JET site+]. A set of official Oracle JET learning resources.
	* link:html5-editing-css.html[+Working with CSS Style Sheets in HTML5 Applications+]. A document that continues with the application that you created in this tutorial that demonstrates how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the Chrome browser to visually locate elements in your project sources.
	* link:html5-js-support.html[+Debugging and Testing JavaScript in HTML5 Applications+]. A document that demonstrates how the IDE provides tools that can help you debug and test JavaScript files in the IDE.