Tutorial 1 - Hello World

This tutorial assume you are new to NodeJs, TypeScript and KambojaJs. You will found everything you need from zero to a working KambojaJs Application.

This tutorial require:

  1. A working NodeJS installation
  2. Command Line App, terminal for Linux/Mac user, Git Bash for Windows user
  3. Text editor, Visual Studio Code (recommended)

Refer to Environment Setup for more information.

Install Prerequisite

Start the tutorial by installing TypeScript in your global NPM package

$ npm install -g typescript

After installation complete, check TypeScript installation by typing

$ tsc -v

Make sure you get TypeScript version 2.3 or newer

Note if you are Windows user and you found that you can’t install newest version of TypeScript, it might caused by Visual Studio has installed TypeScript globally. To fix this problem you can install typescript locally on the project folder npm install --save-dev typescript then access the tsc compiler using $ ./node_modules/.bin/tsc

Initialize Project

Start by creating a project directory and enter to the created directory. Then follow another command below to initialize package.json and tsconfig.json

$ mkdir 01-hello-world && cd 01-hello-world
$ npm init --yes
$ tsc --init

Open tsconfig.json using any text editor, delete all its content and replace with below

//tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true
  }
}

Install Kamboja Express

kamboja is kamboja module that uses Express as its core function on handle http request and http response. Go back to command line app and type

$ npm install --save kamboja

Create KambojaApplication and Controller

Create 2 more files app.ts and controller/home-controller.ts inside src folder. The file structure will be like below:

Alt text

app.ts will be our application bootstrap, in this file we wil create instance of KambojaApplication and start listening for http request.

home-controller.ts is our controller, an http handler that will execute some code based on route it is associated.

Open app.ts using text editor and paste this code

//src/app.ts

import { KambojaApplication } from "kamboja"

const app = new KambojaApplication(__dirname).init()

app.listen(5000)
console.log("Ready http://localhost:5000")

Above code showing we create instance of KambojaApplication then call its init function which is returned Express application.

By using the Express application we then listent to http request on port 5000.

Next open home-controller.ts using text editor and paste code below

//src/controller/home-controller.ts

import { Controller } from "kamboja"

export class HomeController extends Controller {
    index(name) {
        return `Hello ${ name || "Kamboja" }`
    }
}

Above code is a very simple controller which is only returned a Hello Kamboja text (or what ever your provided name parameter). It will only serve http://localhost:5000/home/index for a momment. I will show you later how to override the route.

Compile and Run

Now we are ready to test our first Hello World code. Go back to command line app and type:

$ tsc && node src/app.js

Above code will print message below in the command line app.

  [Kamboja] Routes generated successfully
  [Kamboja] --------------------------------------
  [Kamboja] GET     /home/index
  [Kamboja] --------------------------------------

Ready http://localhost:5000

Open your browser and browse http://localhost:5000/home/index, You also can play around with the parameter binding by providing name parameter like http://localhost:5000/home/index?name=World

Route Override

For a momment our simple app will return 404 error when you access http://localhost:5000. You can override this behavior by using @route decorator.

//src/controller/home-controller.ts

import { Controller, route } from "kamboja"

export class HomeController extends Controller {
    @route.get("/")
    index(name) {
        return `Hello ${ name || "Kamboja" }`
    }
}

Notice on the code above we add @route.get("/") decorator inside of the index action. That will inform the Kamboja Route generator to override the default route generation.

Compile and run the app

$ tsc && node src/app.js

Above code will print message below in the command line app. Notice that we only have one route now which is the root route.

  [Kamboja] Routes generated successfully
  [Kamboja] --------------------------------------
  [Kamboja] GET     /
  [Kamboja] --------------------------------------

You can try playing with the parameter binding like you did before http://localhost:5000?name=World

Congratulation! you are successfully create your first application using KambojaJS