Menampilkan File Static menggunakan Rust Actix-web

Riris Bayu Asrori
3 min readOct 4, 2020
Photo by George Coletrain on Unsplash

Bahasan kali ini cukup sederhana, tujuan utamanya adalah untuk bisa mengakses file static menggunakan actix-web dan actix-files.

Pengetahuan yang dibutuhkan untuk bisa memahami tulisan kali ini:

Jika sudah, langsung saja ke inti pembahasan.

Tutorial resmi dari actix: static-files

Apa itu file static?

File static biasanya merupakan file yang tidak memerlukan perubahan atau bersifat selalu sama. Contohnya adalah file css, js, image, html, dan sejenisnyal.

Tipikal Struktur Folder Static

Kali ini, kita akan menampilkan file statik HTML dan CSS sederhana.

Langkah-langkah.

Pertama-tama, buat projek rust baru dengan menjalankan perintah

cargo new belajar-staic-file
Projek Baru

Buka file Cargo.toml dan tambakan dependency actix web dan files seperti dibawah.

[dependencies]
actix-web = "3"
actix-files = "0.3"
env_logger = "0.7"

Kemudian jalankan perintah cargo check untuk menginstall dependency yang dibutuhkan. Tergantung dari koneksi internet, biasanya memerlukan waktu beberapa menit.

Sambil menunggu proses instalasi berjalan, berikutnya kita membuat folder baru di projek kita. Berinama static kemudian kita tambahkan file baru hallo.html

Menambahkan folder static

Pada file hallo.html bisa diisi dengan html biasa.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello from Static</h1>
</body>
</html>

Setelah itu, kita buka file main.js, tambahkan kode dibawah ini:

Penjelasan:

  • Baris 1 dan 2, kita memanggil dependency kita yaitu actix_files dan actix_web.
  • Baris 6, kita membuat server http baru.
  • Pada baris ke 7 adalah tujuan utama kita. Bagian new(“/static”, “./static”) parameter pertama adalah url untuk mengakses (http://127.0.0.1:8080/static), dan parameter kedua adalah direktori atau folder tempat kita menyimpan file statik kita. kemudian .show_files_listing tujuannya adalah mengijinkan siapapun untuk dapat melihat list file yang kita punya. Bagian ini boleh dihilangkan untuk masalah keamanan.
  • Baris ke 9 kita memanggil server localhost pada port 8080.

Jalankan perintah cargo run , kemudian akses url http://127.0.0.1:8080/static Maka akan tampil halaman seperti gambar dibawah.

List file static

Jika kita mengakses http://127.0.0.1:8080/static/hallo.html

Tampilan hallo.html

Jika ingin menambahkan file css, cukup ditambahkan pada folder static.

Tambah .css

Kita hanya akan mengubah warna backgroud pada tag h1.

Tambahkan css pada file hallo.html

<link rel="stylesheet" href="/static/global.css">

Jalankan lagi cargo run maka tamplian akan berubah.

Projek kali ini bisa diakses melalui github https://github.com/NinjaLame/belajar-actix-file

Kesimpulan

Meskipun menampilkan file static bukanlah sesuatu yang spesial, namun yang menarik adalah Rust yang popularitasnya semakin meningkat walaupun bahasa pemrograman baru.

Rust selalu dibandingkan dengan C/C++ karena performanya yang cepat, ternyata juga dapat melakukan pemrograman yang tergolong “high level” dengan mudah seperti menggunakan nodejs ataupun python.

--

--