Building JavaScript Applications for Niagara 4


Posted on

Getting started with N4 javascript web widgets. Niagara 4 includes a more HTML5 focused architecture. Your can create powerful Niagara dashboards that are completely configurable. Although the docDeveloper for building javascript applications is very helpful, it misses out some key steps. Here's what to do in case you get stuck.

Before you begin

In Workbench press ctrl+L and go to Building JavaScript Applications for Niagara: module://docDeveloper/doc/js/buildingJS.html
Follow this guide if you need to, but basically the following steps should be all you need to get started:

1. Install the latest versions of npm, grunt and node.

grunt-init grunt-init-niagara

2. Clone or download the niagara-grunt template from here. This template will be used to create new web module projects.

3. Create a folder in your user directory called .grunt-init. On windows open up command prompt and execute mkdir as you cannot create folders beginning with . on Windows. And create the project directory for your new module e.g. myNewWebModule. CD to the folder using terminal or command prompt.

4. Execute grunt-init grunt-init-niagara from the project directory in the terminal/command prompt window.

5. You will be asked a few questions to set up new project (see image).

6. After the new files are created, cd to myNewWebModule-ux, and type gradle wrapper. (Important!)

7. This will create the gradlew file. Now type gradlew jar. (Important!)

8. Then run npm install from the same directory (takes a while).

9. Running Karma. The tasks above automatically create a test station in your station directory. After you run npm install you should run grunt watch in command prompt.

10. Running Station. when you type in grunt watch it should start the station on http://localhost/module/myWebModule/rc/myWebModule.htm. Make sure no other websites are running on Port 80 (Important!).

That should be all you need to get up and running. Default credentials for the test station are user: admin, password: asdf1234 Import the project into Eclipse and start coding.

N4 Software

Maximize Your Graphics

Used by some of the largest companies in the world

back to knowledge base...