Setup personal toolchain for SSNoC

facebooktwittergoogle_pluslinkedin

This is a post related to a course at CMU (18-652 Foundations of Software Engineering). It is designed to be of help for fellow classmates and probably of not much interest for anybody else.

This post walks you through the setup of a personal toolchain to start developing on the project. Many students approached me in the last days and asked for help and instead of explaining everything multiple times, I try to write it down here.

Prerequisites

There are a couple of prerequisites you need to download.

Operating System

First let’s start with something that is NOT a prerequisites: A specific Operating System. Students approached me and thought they had to install a Unix based system. This is not true. You can setup this toolchain in either Windows, OS X or any Linux distribution. I do highly recommend working on a Unix system at some point during your course work, but if the number of new technologies is already overwhelming for you, this might not be the right time.

As I run a Windows platform, my screenshots are based on Windows. I will try to point out major differences whenever possible.

Java SE Development Kit 7 (JDK 7)

I recommend the Oracle distribution, as I have not tested it with the OpenJDK. Download either Version 7 or 8 from Oracle.

Make sure it is included in your PATH. You can verify this by entering the following in our console (PowerShell under Windows):

PS C:\Users\JoelMicha> java -version

You should see something like this:

java version "1.8.0_20"
Java(TM) SE Runtime Environment (build 1.8.0_20-b26)
Java HotSpot(TM) 64-Bit Server VM (build 25.20-b23, mixed mode)

Git

Git is used as the Version Control System (VCS). There are GitHub specific applications which you can download on their webpage. I personally prefer the command line itself. For Windows can download Git from the project webpage. For Unix systems you can install it via your package manager (e.g. apt-get install git).

Under Windows you can then launch a Git Bash or add it to your path to launch in PowerShell.

Maven

Maven is used as the build tool. We will use it to manage our dependencies as well as compile, build, test, package and deploy our code. Download it from their project home.

You do not to actually install anything once you downloaded it. Extract the files into a new folder. I recommend creating a folder for maven and application servers somewhere like: C:\development\maven.

Detailed instructions can be found here. Make sure the following command is okay:

PS C:\Users\JoelMicha> mvn -v

It prints a lot of details:

Apache Maven 3.2.3 (33f8c3e1027c3ddde99d3cdebad2656a31e8fdf4; 2014-08-11T13:58:10-07:00)
Maven home: C:\development\maven\apache-maven-3.2.3
Java version: 1.8.0_20, vendor: Oracle Corporation
Java home: C:\Program Files\Java\jdk1.8.0_20\jre
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 8.1", version: "6.3", arch: "amd64", family: "dos"

Jetty

Next we need our application server: Jetty. Download it from the eclipse project page. I recommend version 8 as this version is used to run on the Beaglebone Black.

Again no need to run anything. Just extract the files to a folder, e.g. C:\development\jetty. Nothing has to be included in the path.

We do have to change the default port of jetty though, because unfortunately we cannot change it in the IDE. Go to the jetty directory and open a file in a text editor called start.ini. In the first section, add the following line and save the document:

jetty.port=1234

node.js

node.js is used to run the frontend. Install node.js from their page. Make sure you add it to the PATH and verify it via the following command:

PS C:\Users\JoelMicha> node -v

The output should be:

v0.10.31

This should also have installed npm:

PS C:\Users\JoelMicha> npm -v
1.4.23

IntelliJ IDEA

Now we can finally download and install an IDE. I know that the course recommends Eclipse and it is widely used. But I personally prefer IntelliJ IDEA. It is developed by JetBrains and they develop great IDEs for a variety of languages. As of right now, they offer free versions for students!

You can download IntellIJ IDEA from their webpage. Make sure you download the Ultimate version and and not the Community version. You have to sign up for an account though if you want to use it longer than 30 days.

Install the IDE and start it. Now we can get to work.

Import the project into IDE

First we need to clone the repositories. Create a new folder, e.g. ~/projects/fse-project/. Change to the directory and open the Git Bash there. Clone the two repositories from GitHub.

You should now have to folders in your project folder. One for the Java Backend and one for the Node Frontend. Now open IntelliJ IDEA. You should see the following screen:

Capture1

Initial Screen in IntelliJ IDEA

Click on Create New Project. Select Java on the left but do not select any Frameworks. We will add this later. Click Next. You should get to the following screen:

Add a new project and its first module

Add a new project and its first module

Enter the following information:

  1. Project location: The root folder containing BOTH repositories (e.g. ~/projects/fse-project/). Note that the project name should be changed automatically.
  2. Click on More Settings on the bottom.
  3. Content root: Select the SSNoC Java Repository (e.g. ~/projects/fse-project/fse-F14-SA1-SSNoC-Java-REST/).
  4. Leave the rest unchanged.

Give the IDE time to load the files. Afterwards you should see a screen like this:

IntelliJ after importing the files

IntelliJ after importing the files

Right-Click on the module on the left and select Add Framework Support… On the next screen select Maven and click Next.

Now, select File > Project Structure. On the left select Project. Create a new SDK and select the location of your Java Development Kit (e.g. C:\Program Files\Java\jdk1.8.0_20 on Windows). Select 7.0 as the language level (independent from the version of your JDK). In the end it looks like this:

Setup the project JDK

Setup the project JDK

Now select Modules on the left. There should already be one Model. But we have to setup the structure by marking their type. Mark the following folders:

  • Images: Mark as Excluded.
  • src/it/java: Mark as Tests
  • src/main/java: Mark as Sources
  • src/main/resources: Mark as Resources
  • src/test/resources: Mark as Test Resources

Some of them might already be marked correctly. Just double-check.

Now add a new Module by clicking on the green plus on the left. Select Import Module and select the folder of the Node repository. Click Next on the following screens until you can click Finish. Click Finish.

Now your project structure should look like this:

Finished project structure

Finished project structure

Add Jetty as Application Server

Icon bar on the top right

Icon bar on the top right

Now on the top right is a bar with icons. Click on the second from the left (an arrow down). Click on Edit Configurations. Add a new configuration by clicking on the green plus sign. Select a Jetty > Local Configuration and fill in the following fields:

  1. Name: Give the configuration a meaning full name, e.g. Jetty 8.
  2. Application Server: Click on Configure and select the jetty home (e.g. C:\development\jetty\jetty-distribution-8.1.16.v20140903).
  3. A Warning will pop up on the bottom. Simply click Fix.
  4. A next Warning will pop up reading “No artifacts marked for deployment”. Again click Fix and select the one ending with “exploded”.
  5. Click Ok.

Verify that everything works by running Jetty. Simple click on the green run button on the top right next to your configuration (e.g. Jetty 8).

The jetty server should start and a war will be deployed. Afterwards a browser should open. Direct it to the following address:

http://localhost:1234/ssnoc/users

You should see an empty json array:

[ ]

Congratulations, your backend is up and running.

Run Node.Js frontend

Install the Node.Js plugin in IntelliJ

Select File > Settings (Preferences on OSX). Find the section called plugins. On the bottom of the screen is a button “Install JetBrains plugin…”. Click it and search for NodeJS. Install it and close the windows. The IDE asks you to restart.

Download the dependencies

Open a command line terminal (e.g. PowerShell) and go the the directory of the frontend. There enter the following line:

npm install

Add run configuration

Now go back to IntelliJ and add a new run configuration. Again on the top right corner, click on the dropdown menu (probably it reads Jetty there. Select Edit Configurations…

Add a new configuration by clicking on the green plus sign. Select node.js as the configuration and enter the following details:

  1. Name: Provide a meaningful name, e.g. Node
  2. Node interpreter: Point it to the file of your node installation folder and select node.exe.
  3. Working directory: Select the frontend application folder.
  4. JavaScript file: Select the server.js file.

It should then look like this:

Configuring node.js

Configuring node.js

Click on ok.

Finished!

You should be all setup now! Happy coding!