Project Setup

Download File Starter Project

Untuk kemudahan tutorial, file html dan javascript sudah disediakan. Silakan download di: https://drive.google.com/file/d/1TFSuOJQ0DVARC-1eE1i0dC4JUPPYlPVw/view?usp=sharing

Extract file diatas, lalu simpan dalam project directory dalam folder public.

Membuat Rust Library Project

Pertama buat Rust library project dengan menggunakan perintah cargo. Masuk ke direktori project lalu jalankan perintah berikut

$ cargo init --lib

Instalasi webpack dan Konfigurasi

Instalasi webpack

Langkah selanjutnya adalah install webpack, yang akan digunakan untuk otomatis compile project Rust dan sebagai development server.

Pertama kita buat package.json file menggunakan npm init

$ npm init -y

Kemudian install webpack menggunakan perintah npm install

$ npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Konfigurasi webpack

Pada root directory project, buat file webpack.config.js, tambahkan konfigurasi code seperti berikut:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './public/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './public/index.html'
    }),
  ],
}

Konfigurasi Development Server

Buka file package.json, lalu update key scripts seperti berikut:

{
  "name": "wa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

Jika Anda jalankan web server dengan menggunakan perintah

$ npm run serve

Maka akan ditampilkan project starter seperti berikut: