Bagian

1
Express & Typescript

Kita akan membuat web server dengan Express dan Typescript. Pustaka

yang akan kita pakai adalah:

1. Express

2. Pug

3. Body parser

Pug digunakan untuk membuat view template pada website kita.

Body parser digunakan untuk mendapatkan data input dari html form.
https://pugjs.org/

https://www.npmjs.com/package/body-parser

Folder Proyek
Kita buat folder untuk proyek, kita beri nama typescript-tutorial.

mkdir typescript-tutorial

cd typescript-tutorial

npm init

npm init digunakan untuk membuat konfigurasi proyek dalam berkas

package.json.
Pasang Pustaka
Pasang pustaka typescript, express, pug dan body-parser.

npm install --save typescript express pug body-parser

Pasang juga pustaka yang telah diberi tipe data untuk memaksimalkan

penggunaan typescript dari pustaka-pustaka tersebut.

npm install --save-dev @types/express @types/body-parser

Hello world
Kita akan membuat hello world webserver dari putaka-pustaka tadi. Buat

folder src

mkdir src

Di dalam src tersebut buat program dengan nama app.ts

cd src

touch app.ts

Programnya adalah:

import * as pug from "pug";

 import * as express from "express";

import * as bodyParser from "body-parser";

const app = express();

app.use(bodyParser.urlencoded({extended: true}));

app.set("views", "dist/views/");

app.set("view engine", 'pug');

app.use(express.static('dist/views/assets'));

app.get('/', (req, res, next) => {

res.json('Hello world!');

});

export default app;

Program app.ts adalah konfigurasi express dalam proyek ini, body-parser

untuk memroses form.

app.set('views', 'dist/views/') berarti app ini menyetel folder untuk

view templatenya di dist/views/ .

app.set('view engine', 'pug') berarti app ini menyetel Pug sebagai

view enginenya.

app.use(express.static('dist/views/assets')) berarti app ini

menyetel berkas statiknya di folder dist/views/assets .

Setelah itu, buat program config.ts untuk konfigurasi

const config = {

app: {

port: process.env.PORT || 3000,

},

mysql: {

host: 'localhost',

port: 3306,

username: 'root',

password: 'secret',

db: 'typescript_tutorial',

},

export default config;

Setelah itu, buat program server.ts

import app from "./app";

import config from "./config";

const appConfig = config.app;

const server = app.listen(appConfig.port, () => {

console.log(

" App is running at http://localhost:%d in %s mode",

appConfig.port,
 app.get("env")

);

console.log(" Press CTRL-C to stop\n");

});

Program server.ts ini nanti digunakan untuk “booting” web server kita.

Sekarang kita uji webservernya, pasang dulu typescript compiler

npm install -g typescript

Kemudian buat konfigurasi proyek typescript di root folder proyek kita

dengan nama tsconfig.json

"compilerOptions": {

"outDir": "dist",

"sourceMap": true,

"module": "commonjs",

"target": "es2017"

},

"include": [

"src/**/*"

}
lalu compile dengan perintah

tsc

Berikut struktur folder saat ini

typescript-tutorial/

|- src/

|- app.ts

|- config.ts

|- server.ts

|- package.json

|- tsconfig.json

hasil kompilasi dari tsc berada dalam folder dist/ , untuk menyalakan
web server, jalankan

node dist/server