Beberapa waktu yang lalu saya ikuti online course di PluralSight, tentang membangun JavaScript Development Environment. Kursus online ini dibawakan dengan sangat baik oleh Cory House.

Catatan ini sengaja saya buat sebagai arsip pribadi, namun akan sangat menyenangkan jika kelak membantu orang lain membangun JavaScript Development Environment mereka.

Editor Config

Course ini disampaikan Author-nya menggunakan IDE VSCode. Dari sini saya coba untuk mendalami VSCode sebagai alternatif IDE, jika mungkin, kelak akan menggantikan WebStorm sebagai main IDE saya.

Dalam membuat code, berbeda2 kebiasaan orang menggunakan Tabs vs Spasi. Best practice dimana code paling baik dan readable adalah digunakannya Spasi. Disini EditorConfig digunakan untuk mengatur konfigurasi editor IDE, dalam hal VSCode perlu instalasi tambahan plugin. Dan gunakan .editorconfig file sebagai berikut:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Package Management

Untuk development JavaScript sekarang dijumpai 2 jenis manager paket yaitu, npm dan yarn. Dalam course ini dibahas penggunaan npm untuk package management. Berikut adalah package.json yang dicontohkan:

{
  "name": "javascript-development-environment",
  "version": "1.0.0",
  "description": "JavaScript development environment Pluralsight course by Cory House",
  "scripts": {},
  "author": "Cory House",
  "license": "MIT",
  "dependencies": {
    "npm": "^6.0.1",
    "whatwg-fetch": "1.0.0"
  },
  "devDependencies": {
    "babel-cli": "6.16.0",
    "babel-core": "6.17.0",
    "babel-loader": "6.2.5",
    "babel-preset-latest": "6.16.0",
    "babel-register": "6.16.3",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "cheerio": "0.22.0",
    "compression": "1.6.2",
    "cross-env": "3.1.3",
    "css-loader": "0.25.0",
    "eslint": "3.8.1",
    "eslint-plugin-import": "2.0.1",
    "eslint-watch": "2.1.14",
    "express": "4.14.0",
    "extract-text-webpack-plugin": "1.0.1",
    "html-webpack-plugin": "2.22.0",
    "jsdom": "9.8.0",
    "json-schema-faker": "0.3.6",
    "json-server": "0.8.22",
    "localtunnel": "1.8.1",
    "mocha": "3.1.2",
    "nock": "8.1.0",
    "npm-run-all": "3.1.1",
    "nsp": "2.6.2",
    "numeral": "1.5.3",
    "open": "0.0.5",
    "rimraf": "2.5.4",
    "style-loader": "0.13.1",
    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.8.4",
    "webpack-hot-middleware": "2.13.0",
    "webpack-md5-hash": "0.0.5"
  }
}

instalasi paket2 dilakukan dengan perintah npm install

Package Security

Karena submission npm bisa dilakukan oleh siapa saja, sering kali paket tidak termaintain sehingga vunerablity terkait dependency paket muncul. Untuk itu disarankan untuk periksa paket yang digunakan melalui situs

https://nodesecurity.io/

Update 2018-06-09: Nodesecurity saat ini sudah diacquire oleh npm,inc dan secara otomatis ada dalam instalasi npm anda.

Development Web Server

Materi dalam kursus ini menyarankan penggunaan Express, saya pribadi selalu menggunakan node.js framework ini untuk membuat webapp dan service-api berbasis node.js.

Dalam kursus ini dicontohkan penggunaan file /buildScript/srcServer.js yang isinya:

var express = require('express');
var path = require('path');
var open = require('open');

var port = 3000;
var app = express();

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
  if (err) {
    console.log(err);
  } else{
    open('http://localhost:' + port);
  }
});

dan file /src/index.html yang isinya:

<html>
  <body>
    <h1>Hello World!!</h1>
  </body>
</html>

Dalam development saya pribadi sedikit berbeda bagaimana saya terapkan setupnya..

Sharing Progress

Course ini menyarankan penggunaan localtunnel, saya pribadi lebih sering berurusan dengan infrastructure yang cukup solid baik untuk development dan production. Sehingga saya lebih sering share link ke dev env di AWS daripada mengijinkan tunneling ke aplikasi yang running didalam laptop saya..

Localtunnel bisa diinstal dengan perintah ``