# Setting up the front end

This page guides you through the first part in deploying the FX Sales Motif - setting up the front-end system.

## Prerequisites

* You need a Java 7 (32-bit) JDK or better installed in your development environment
* The `JAVA_HOME` environment variable must be set to point to the Java Development Kit (JDK) installation directory, see [here,window="_blank"](../../caplin-platform/deployment-framework/cdf-change-server-specific-configuration.md#check-the-java-environment-settings)
* For further information on the minimum software and hardware requirements contact us at [www.caplin.com/business/contact-us](https://www.caplin.com/business/contact-us)

**Files required:**

* CaplinTrader-4.zip
* salestrader.zip
* js-patches.zip

## Start by importing the Motif using BladeRunnerJS

The FX Sales Motif is a fully fledged HTML5 trading application that utilises [Caplin Trader,window="_blank"](../../caplin-trader/4/index.md) (CT) SDK libraries, and can be imported into [BladeRunnerJS,window="_blank"](../../caplin-trader/4/bladerunnerjs/index.md) (BRJS). As a development toolkit and lightweight framework, BRJS can be used for building modular large-scale HTML5 single page web apps. The deployment package CapinTrader-4.zip contains the BladeRunnerJS framework.

### Part 1

1. Extract the _CaplinTrader-4.zip_ fileto a location of your choice

   **📌 NOTE**\
   If you were given a _js-patches.zip,_ unzip this and copy the _\caplin_ folder into the _\CaplinTrader\js-patches\_ directory
2. Now open a command-line window, navigate to _\CaplinTrader\sdk_, and execute the following command:

   ```
   brjs serve
   ```
3. A Jetty web server should now have been initiated. You are now able to access the BladeRunnerJS dashboard from a web browser using the following address:

   ```
   localhost:7070
   ```
4. Access the BladeRunnerJS dashboard and click **_Import Motif from Zip_.** Now click **_Choose File_** from the dialog box, then find and select the _salestrader.zip_.
5. In the appropriate fields, specify an 'App Name'. In this example we will use **NovoTrader.** Then specify an 'App Namespace'. In this example we will use **novo.**
6. Click **_Create_ **and wait for the app to be created. Once created, you will see a tile with the thumbnail image of the newly created app on the dashboard with the app name NovoTrader (or whichever app name you have specified)

### Part 2

1. Click **_Open_ **on the newly created app tile in the dashboard. You should now see all available [bladesets,window="_blank"](../../caplin-trader/4/bladerunnerjs/bladerunnerjs-about-blades-and-motifs.md) (motf, rates, styling, scaffold etc.), along with the included blades listed below each bladeset.
2. Click the** _Launch App_ **icon ![launchappicon](../../images/launchappicon.png), in the top right corner of the dashboard. You will then be directed to a login page for the FX Sales Motif.

   **📌 NOTE**\
   From this point on you are able to directly access this login page URL providing you have BladeRunnerJS running (see Step 2 in **Part 1**)
3. At the login page the username/password fields may already be completed, where:

   Username: user1@caplin.com

   Password: password

   ![login_page_salestrader](../../images/login_page_salestrader.png)

+
Click **_Login_ **when ready
. When you have logged in, an **Alerts** message might display ..._a connection could not be established_ - Don’t worry! We still need to set up the back-end systems, and other configurations.
. You can now shut down BladeRunnerJS from the command-line window using **_<CTRL+C>_**, or simply close the window

Now go to [Setting up the back end](st-setting-up-the-back-end.md).