Post

Learn To Build React Boilerplate #2

Pada article lalu, kita telah sampai dengan membuat static html file. Dan sekarang kita akan lanjutkan dengan membuat webserver dengan ExpressJs. Buka terminal root project pada terminal anda dan ketik perintah "npm install express  --save".

Buat file src / server / web.server.js dan tambahkan kode berikut.

const express = require('express')
export default class WebServer {
constructor () {
this.app = express()
this.app.use(express.static('dist/public'))
}
  start () {
return new Promise((resolve, reject) => {
try {
this.server = this.app.listen(3000, function () {
resolve()
})
} catch (e) {
console.error(e)
reject(e)
}
})
}
  stop () {
return new Promise((resolve, reject) => {
try {
this.server.close(() => {
resolve()
})
} catch (e) {
console.error(e.message)
reject(e)
}
})
}
}

Pada code tersebut, dapat kita lihat terdapat penggunaan Promise disitu. Promise sederhananya adalah objek yang merepresentaasikan penyelesaian akhir (ataupun failure) dari operasi asynchronous , dan return value -nya. Selenegkapnya tentang Promise dapat dilihat di sini.

Selanjutnya, kita perlu membuat file indeks yang akan menginisialisasi berbagai komponen. Dalam article ini, kita akan menginisialisasi server web. Namun, seiring pertumbuhan proyek nantinya, kita juga dapat menginisialisasi komponen lain seperti konfigurasi, database, logger, dll.

Buat file src / server / index.js dan tambahkan kode sebagai berikut.

import WebServer from './web.server'
let webServer = new WebServer();
webServer.start()
.then(() => {
console.log('Web server started!')
})
.catch(err => {
console.error(err)
console.error('Failed to start web server')
});

Selanjutnya kembali pada terminal anda dan install babel dengan perintah "npm i babel-cli babel-preset-env --save-dev".

Bila sudah, pada root project buatlah file dengan nama ".babelrc" dan tambahkan configurasi sebagai berikut.

{
"presets": ["env"]
}

Mari kita buat perintah untuk build server dan komponen klien proyek dan start server. Buka file package.json pada text editor anda dan ubah confgurasi didalamnya sebagai berikut.

"scripts": {
"build": "npm run build-server && npm run build-client",
"build-server": "babel src/server --out-dir ./dist",
"build-client": "babel src/client --copy-files --out-dir ./dist/public",
"start": "node ./dist/index.js"
}

Perintah build di tersebut akan membuat folder dist / publik pada directory root project. Dan perintah build-client menyalin file index.html ke folder dist / public.

Selanjutnya, kita dapat mencoba menjalankan webserver dengan mengetikan perintah "npm run build" lalu diikuti dengan "npm start". Lalu pada browser anda, silahkan menuju url "http://localhost:3000".

Selanjutnya untuk melakukan unit test, kita memerlukan Jest Testing Framework. Kembali ke terminal anda dan lakukan perintah "npm i jest --save-dev".

Bila sudah, buat file bernama src / server / web.server.test.js dan tambahkan sebagai berikut.

import WebServer from './web.server'
describe('Started', () => {
let webServer = null
  beforeAll(() => {
webServer = new WebServer()
})
  test('should start and trigger a callback', async () => {
let promise = webServer.start()
await expect(promise).resolves.toBeUndefined()
})
  test('should stop and trigger a callback', async () => {
let promise = webServer.stop()
await expect(promise).resolves.toBeUndefined()
})
})

Selanjutnya tambahkan perintah npm untuk menjalankan tes pada script package.json. Secara default, Jest menjalankan semua file dengan kata ".test" dalam nama file mereka. Untuk saat ini kita akan membatasi untuk menjalankan tes di bawah folder src saja.

Pada section scripts di package.json, tambahkan configurasi sebagai berikut.

"scripts": {
...
"test": "jest ./src"
...
}

Selanjutnya anda dapat beralih pada terminal anda dan mencoba melakukan test dengan perintah "npm test".

Pada article ini kita telah megatur project kita untuk melakukan serve file static HTML melalui server web Express dan kita telah mengintegrasikan Babel untuk mengaktifkan ES6 dan Jest untuk pengujian unit. Selanjutnya kita akan beralih ke pengaturan front-end pada article berikutnya.

Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.