# Setting up the front end

This page guides you through setting up the front-end of Caplin FX Professional.

## Prerequisites

FX Professional has the following requirements:

* 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)
* Caplin Trader 4+

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
* fxtrader.zip
* js-patches.zip

## Start by importing the Motif using BladeRunner

The FX Professional Motif 2 is a fully fledged HTML5 trading application that utilises [Caplin Trader,window="_blank"](../../caplin-trader/4/index.md) 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_ to a location of your choice.
2. If you were given a `js-patches.zip` file__,__ unzip this and copy the _\caplin_ folder into the _\CaplinTrader\js-patches\_ directory.
3. Now open a command-line window, navigate to _\CaplinTrader\sdk_, and execute the following command:

   ```
   brjs serve
   ```
4. 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
   ```
5. Access the BladeRunnerJS dashboard and click **Import Motif from Zip**.
6. Click **Choose File** from the dialog box. Select the file **fxtrader.zip**.
7. Specify an 'App Name'. In this example we will use **NovoTrader.**
8. Specify an 'App Namespace'. In this example we will use **novo.**
9. Click **Create** and wait for the app to be created.

   Once the app is created, you’ll 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) (fx blotters and fxexecution), 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 Motif.

   **📌 NOTE**\
   From this point on, you are able to directly access this login page URL providing that you have BladeRunnerJS started (see Part 1: step 3)
3. At the login page, login as 'user1@caplin.com' with password 'password'.

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

+
When you have logged in, an **Alerts** message displays ..._a connection could not be established_. This is expected; we still need to set up the back-end systems.
. Shut down BladeRunnerJS from the command-line window using <CTRL+C>, or simply close the window.

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