# Building JavaScript Applications for Niagara 4

by [Paul](https://www.linkedin.com/in/paul-ws)

---

Posted on 2017-06-04 12:10:57

---

Getting started with [N4 javascript web widgets](/content/product-services/niagara/niagara-graphics-library.html). Niagara 4 includes a more HTML5 focused architecture. Your can create powerful Niagara [dashboard](/content/product-services/dashboards/niagara-dashboards.html) s 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](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](https://www.npmjs.com/), [grunt](https://gruntjs.com/installing-grunt) and [node](https://nodejs.org/en/download/).

**2.** Clone or download the niagara-grunt template from [here](https://github.com/tridium/grunt-init-niagara.git). 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.

## Maximize Your Graphics

Used by some of the largest companies in the world.