Getting started

A brief introduction to get you started. In case you have experience in using node.js and TypeScript, you may skip to the end. Otherwise, read on.

Installing your environment

Installation of the web server node.js

We use node.js as our server, even though for most functionality, a server that serves static pages is enough. Download node.js and install it as admin. Node also comes with a default package manager, npm, which you can use to install (globally) our build tool, gulp, and the client side package manager, bower.

npm install –g gulp
npm install –g bower

Installing TypeScript and an IDE

Install TypeScript from here.

I'm currently using Atom as my preferred IDE, since it is free and has good TypeScript support. Read more here.

Installing GIT software

In order to download the code, you probably need the GIT version control tool (alternatively, you can download csWeb and csMap as a zip file). Two popular alternatives are SourceTree and GitHub. SourceTree offers more functionality, but is also a bit more complex. And I like the clean user interface that GitHub offers.

If you didn't download the zip files, know is also a good moment to to create a (free) Github account, so you can fork our projects.

Installing csWeb and csMap

With all dependencies setup and running, you can know fork our csWeb and csMap projects. When you have something beautiful to share, just issue a pull request, and we will consider merging it with the rest of the code.

Since we have two projects, which reference each other (actually, the Gulp build tool does that), you need to follow a certain directory structure.

HOME\apps
HOME\apps\csMap <-- clone csMap here
HOME\csWeb <-- clone csWeb here

As with most projects that use node.js, you need to install the packages.

1. Go to HOME\apps\csMap\Website and run npm (is will retrieve the packages in package.json):

npm install

2. Go to HOME\apps\csMap\Website\public and run bower (deze gebruikt de bower.json om alles op te halen):

bower install

Getting started

Finally, you are ready to get started with csMap and csWeb.

1. Go to HOME\csWeb\csComp and run:

atom

2. In this Atom editor, run CTRL-SHIFT-B to compile the project.
3. Go to HOME\apps\csMap\Website and run:

atom

4. In this second Atom editor, press CTRL-ALT-O to load the gulp-helper, and click on the ‘default’ task to start it. Basically, it will make sure that changes in the csWeb project are processed, and the resulting csComp.js file is copied to the csMap project. Alternatively, you can run gulp from the command line too.
5. Go to HOME\apps\csMap\Website\public and run:

node server.js

To start the node server 6. Fire up your browser (preferably Chrome) and go to http://localhost:3000 to see the resulting csMap application.

Have fun!