Bagaimana Cara Menerapkan Aplikasi SvelteKit?

Pada artikel ini, Anda akan membuat aplikasi pembuat kutipan dasar menggunakan SvelteKit dan menghostingnya menggunakan Back4app Containers.

SvelteKit adalah kerangka kerja aplikasi web modern yang dibangun berdasarkan prinsip-prinsip kerangka kerja JavaScript Svelte. Framework ini menawarkan kepada para pengembang cara yang efisien dan elegan untuk membuat aplikasi web dengan fokus pada kesederhanaan dan kinerja.

Pada tahun 2020, SvelteKit diciptakan oleh Rich Harris, pencipta Svelte, dan pada bulan Oktober 2022, Rich Harris dan timnya bergabung dengan Vercel.

Ketika menerapkan aplikasi SvelteKit, akan sangat membantu jika menggunakan Back4app Containers. Back4app Containers adalah platform yang memungkinkan pengembang untuk menerapkan dan mengelola aplikasi dalam kontainer pada infrastruktur Back4app.

Ini adalah layanan berbasis cloud yang menyediakan cara sederhana dan terukur untuk menjalankan aplikasi yang dikontainerisasi dalam produksi.

Apa itu SvelteKit?

SvelteKit adalah kerangka kerja web untuk membangun aplikasi web yang berkinerja tinggi dan kuat. Framework ini dibangun di atas Svelte, sebuah framework JavaScript yang ringan dan reaktif.

SvelteKit menyediakan sejumlah fitur yang memudahkan untuk mengembangkan dan menggunakan aplikasi web, termasuk server-side rendering (SSR), pembuatan situs statis (SSG), perutean sisi klien, dll.

Aplikasi ini juga menawarkan banyak manfaat, seperti kesederhanaan, fleksibilitas, skalabilitas, kinerja, dll. Teruslah membaca untuk mempelajari cara menggunakan aplikasi SvelteKit.

Keuntungan dari SvelteKit

Berikut ini adalah beberapa keuntungan menggunakan kerangka kerja SvelteKit:

Kurva Pembelajaran yang Mudah

Ketika memilih kerangka kerja front-end untuk pengembangan web, salah satu faktor penting yang perlu dipertimbangkan adalah kurva pembelajaran yang terkait dengan kerangka kerja tersebut.

Kurva pembelajaran yang curam bisa membuat Anda enggan mengadopsi sebuah kerangka kerja, sementara kurva yang lembut bisa membuatnya lebih mudah diakses dan menarik.

SvelteKit memiliki kurva pembelajaran yang lembut, terutama jika Anda terbiasa dengan HTML, CSS, dan JavaScript. Sintaksnya sangat mudah dan intuitif, membuatnya mudah dipahami dan membangun aplikasi web.

Dukungan TypeScript

TypeScript adalah superset JavaScript yang diketik secara statis yang telah mendapatkan popularitas di dunia pengembangan web. TypeScript menghadirkan pengetikan yang kuat, kejelasan kode, dan peralatan yang lebih baik untuk proyek-proyek JavaScript.

SvelteKit memiliki dukungan TypeScript yang sangat baik, memungkinkan Anda untuk menulis kode yang aman dan menangkap potensi kesalahan selama pengembangan. Hal ini meningkatkan kualitas kode, pemeliharaan, dan kolaborasi dalam tim pengembangan.

Perutean Berbasis File

Perutean berbasis file adalah fitur pengembangan web modern yang memudahkan untuk mengatur dan mengelola rute dalam aplikasi Anda. Fitur ini bekerja dengan menggunakan manajemen file untuk menentukan rute alih-alih menggunakan pustaka pihak ketiga.

SvelteKit menggunakan sistem perutean berbasis file. Anda mengatur rute aplikasi Anda dengan membuat file dan folder, sehingga memudahkan pengelolaan struktur proyek Anda.

Komunitas dan Ekosistem

Dalam ranah pengembangan web, memiliki komunitas yang kuat dan mendukung, bersama dengan ekosistem yang berkembang, adalah keuntungan yang signifikan.

SvelteKit mendapat manfaat dari ekosistem Svelte yang lebih luas, yang mencakup komunitas yang terus berkembang, koleksi komponen dan pustaka yang dapat digunakan kembali, dan dokumentasi yang luas.

Keterbatasan SvelteKit

Meskipun SvelteKit adalah kerangka kerja yang kuat untuk membangun aplikasi web yang efisien, SvelteKit memiliki beberapa keterbatasan yang harus Anda ingat. Keterbatasan ini meliputi:

Keterbatasan Rendering Sisi Server (SSR)

Rendering sisi server (SSR) adalah teknik yang memungkinkan aplikasi web merender konten di server dan mengirimkan HTML yang sudah dirender ke klien. SSR memiliki beberapa keuntungan, termasuk peningkatan SEO, pemuatan halaman awal yang lebih cepat, dan kinerja yang lebih baik pada perangkat kelas bawah.

SvelteKit mendukung rendering sisi server. Namun, ia tidak memiliki beberapa fitur SSR tingkat lanjut yang tersedia di kerangka kerja lain, seperti kontrol halus atas rendering sisi server atau dukungan untuk streaming SSR.

Perkakas Terbatas

Sebagai framework yang relatif baru, tooling SvelteKit masih terus berkembang, dan mungkin tidak memiliki tingkat kematangan dan fitur yang sama dengan framework lainnya.

Ini berarti mungkin ada beberapa variabilitas dalam pengaturan pengembangan dan pilihan alat di antara proyek SvelteKit yang berbeda. Hal ini dapat mengakibatkan lebih sedikit pilihan untuk tugas-tugas seperti linting kode, pengujian, atau pengoptimalan build.

Ekosistem Terbatas

Ekosistem yang terbatas merupakan salah satu keterbatasan SvelteKit, dan hal ini dapat memengaruhi pengalaman pengembangan dan pilihan yang tersedia untuk Anda. Dibandingkan dengan framework yang lebih mapan, SvelteKit memiliki ekosistem pustaka, alat, dan plugin yang lebih kecil.

Ini berarti Anda mungkin perlu membangun fungsi-fungsi tertentu dari awal atau bergantung pada solusi yang didukung oleh komunitas. Penting untuk mempertimbangkan kondisi ekosistem SvelteKit saat ini ketika memutuskan apakah akan menggunakannya untuk sebuah proyek.

Ukuran Komunitas

Ukuran komunitas dapat secara signifikan memengaruhi pengalaman pengembangan dan dukungan yang tersedia untuk kerangka kerja tertentu.

Meskipun komunitas SvelteKit berkembang dengan cepat, komunitas ini masih lebih kecil dibandingkan dengan komunitas-komunitas di sekitar framework besar lainnya seperti React dan Vue.js.

Hal ini dapat berarti lebih sedikit sumber daya yang tersedia, adopsi fitur-fitur baru yang lebih lambat, lebih sedikit sumber belajar, dan waktu respons yang lebih lama untuk dukungan komunitas.

Opsi Penerapan SvelteKit

Anda bisa menggunakan aplikasi SvelteKit di berbagai platform, termasuk Infrastructure as a Service (IaaS) dan Container as a Service (CaaS).

Infrastruktur sebagai Layanan (IaaS)

Platform Infrastructure as a Service (IaaS) adalah layanan komputasi awan yang menyediakan sumber daya komputasi tervirtualisasi melalui internet. Sumber daya ini mencakup mesin virtual, penyimpanan, jaringan, dan komponen fundamental lainnya.

Platform IaaS menawarkan cara yang fleksibel dan terukur untuk mengakses dan mengelola infrastruktur TI Anda tanpa perlu berinvestasi dan memelihara perangkat keras fisik.

Mereka juga menyediakan layanan terkelola, pencadangan dan pemulihan bencana, keamanan dan kepatuhan, serta efisiensi biaya dengan model harga bayar sesuai pemakaian.

Beberapa contoh platform IaaS yang bisa Anda gunakan untuk menerapkan aplikasi SvelteKit antara lain:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

Kontainer sebagai Layanan (CaaS)

Platform Container as a Service (CaaS), juga dikenal sebagai Platform Manajemen Kontainer atau Platform Orkestrasi Kontainer, adalah layanan berbasis cloud yang menyederhanakan penyebaran, penskalaan, manajemen, dan orkestrasi aplikasi dalam kontainer.

Platform ini dirancang untuk merampingkan proses kontainerisasi dan memberikan solusi komprehensif untuk manajemen kontainer, sehingga Anda dapat fokus mengembangkan aplikasi tanpa kerumitan dalam mengelola infrastruktur.

Anda bisa menerapkan aplikasi SvelteKit menggunakan platform CaaS. Beberapa platform ini meliputi:

• Docker
• Kubernetes
• Back4App

Perhatikan bahwa ini adalah opsi penerapan lain yang tersedia untuk aplikasi SvelteKit. Platform terbaik untuk aplikasi Anda akan bergantung pada kebutuhan spesifik Anda, termasuk kinerja, skalabilitas, dan pertimbangan biaya.

Proses Penerapan

Dengan menggunakan platform CaaS Back4app, menerapkan aplikasi SvelteKit adalah proses yang mudah dan efisien yang menawarkan banyak manfaat – CaaS Back4app menangani infrastruktur yang mendasarinya, sehingga Anda dapat fokus membangun aplikasi Anda.

Apa Itu Wadah Back4app?

Back4App Containers, AKA “Back4App CaaS” (Containers as a Service), adalah fitur yang disediakan oleh Back4App yang memungkinkan pengembang untuk menggunakan dan mengelola kontainer Docker di lingkungan cloud yang disediakan oleh Back4App.

Ini adalah solusi hosting kontainer terkelola yang menyederhanakan penyebaran dan pengelolaan kontainer Docker di awan.

Back4app Containers menawarkan skalabilitas, fleksibilitas, dan integrasi dengan layanan Back4App lainnya, sehingga cocok untuk berbagai macam aplikasi dan layanan.

Ini adalah pilihan yang sangat baik bagi mereka yang ingin memanfaatkan kontainerisasi untuk proyek mereka sambil meminimalkan kerumitan manajemen infrastruktur.

Pengenalan Proyek

Dalam tutorial ini, Anda akan membuat aplikasi pembuat kutipan sederhana dengan SvelteKit, menggunakan API kutipan untuk mengambil kutipan acak untuk ditampilkan.

Untuk membuat aplikasi SvelteKit, jalankan perintah berikut di terminal Anda:

npm create svelte@latest quote-generator

Setelah Anda menjalankan perintah, konfigurasikan proyek SvelteKit Anda menggunakan petunjuk yang ditampilkan pada terminal.

Sebagai contoh:

Seperti yang terlihat pada gambar di atas, proyek pembuat kutipan akan menggunakan sintaksis TypeScript, ESLint untuk linting kode, dan Prettier untuk pemformatan kode.

Sekarang pada terminal Anda, alihkan direktori Anda saat ini ke direktori proyek dan instal dependensi yang diperlukan. Untuk melakukan ini, jalankan perintah berikut pada terminal Anda:

cd quote-generator
npm install

Setelah menginstal dependensi yang diperlukan, buka proyek pada IDE favorit Anda dan mulai membangun aplikasi.

Membangun Aplikasi Anda

Ketika membangun aplikasi Anda, hal pertama yang Anda lakukan adalah menentukan gaya dan tata letak global aplikasi. Untuk menentukan gaya global untuk aplikasi Anda, buat folder gaya di direktori src dan tambahkan file global.css ke folder tersebut.

Pada berkas global.css, tuliskan baris kode berikut ini:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

Blok kode di atas mengatur beberapa gaya dasar untuk aplikasi Anda. Blok ini mengimpor font Montserrat dari Google Fonts.

Ini juga menerapkan gaya default untuk semua elemen, memusatkan konten pada badan, dan menata elemen tombol dalam status default dan hover.

Setelah Anda selesai mendefinisikan gaya global untuk aplikasi Anda, Anda harus menerapkan gaya ke aplikasi.

Untuk melakukan ini, Anda memerlukan rute tata letak. SvelteKit menyediakan file +layout.svelte untuk membantu Anda mendefinisikan tata letak dalam aplikasi Anda. Anda dapat mendefinisikan tata letak aplikasi Anda dengan menambahkan file +layout.svelte ke direktori src/routes.

Di file +layout.svelte, impor file global.css Anda untuk menerapkan gaya global ke aplikasi.

Sepertinya begitu:

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

Elemen slot menciptakan ruang bagi aplikasi untuk menyisipkan konten halaman. Saat Anda merender halaman, aplikasi mengisi elemen slot dengan konten halaman, sehingga terlihat di dalam tata letak.

Dalam direktori src/lib pada proyek Anda, buatlah file Card.svelte. Ini adalah komponen Card yang akan Anda gunakan untuk merender data yang diambil dari API kutipan.

Komponen Kartu akan terlihat seperti ini:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

Pada tag skrip komponen Card, ada dua props yang didefinisikan, props penulis dan konten. Keduanya bertipe string dengan nilai awal string kosong.

Elemen utama mendefinisikan templat komponen. Templat ini mencakup elemen h4 yang menampilkan nilai properti penulis dan elemen p yang menampilkan nilai properti konten. Terakhir, tag gaya berisi properti dan nilai CSS yang memberi gaya pada komponen.

Sekarang, impor dan render komponen Card di file +page.svelte. Ini adalah rute beranda yang ditampilkan saat Anda merender aplikasi Anda.

Dalam file +page.svelte, Anda akan mengambil data dari API quote dan meneruskannya ke komponen Card menggunakan propsnya.

Sepertinya begitu:

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

Blok kode di atas mengambil data dari API kutipan dengan fungsi fetchQuote dan kemudian menetapkan data yang diambil ke variabel kutipan.

Meneruskan fungsi fetchQuote ke hook onMount memastikan fungsi tersebut berjalan ketika komponen terpasang (yaitu, render awal komponen).

Komponen Card menerima nilai properti penulis dan konten dari objek kutipan dan menampilkannya. Mengklik tombol akan memicu fungsi fetchQuote untuk mengambil kutipan acak lainnya untuk ditampilkan.

Blok kode di atas menggunakan komponen Icon dari paket @iconify/svelte. Untuk menggunakan komponen ini, Anda harus terlebih dahulu menginstal paket @iconify/svelte dengan menjalankan perintah berikut pada direktori proyek Anda di terminal:

npm install --save-dev @iconify/svelte

Setelah menginstal paket @iconify/svelte, jalankan aplikasi Anda di server pengembangan untuk melihat aplikasinya. Anda dapat melakukan ini dengan menjalankan perintah berikut pada terminal Anda:

npm run dev

Menjalankan perintah di atas akan memulai server pengembangan di http://localhost:5173/. Buka tautan di browser web Anda untuk melihat aplikasi Anda.

Aplikasi akan terlihat seperti ini:

Dockerize Aplikasi Anda

Sebelum Anda dapat menggunakan aplikasi Anda di platform Back4app CaaS, Anda harus melakukan dockerize terlebih dahulu. Untuk mendokumentasikan aplikasi SvelteKit, Anda harus terlebih dahulu menginstal adaptor node Svelte.

Anda dapat menginstal adaptor node dengan menjalankan perintah berikut di terminal Anda:

npm i -D @sveltejs/adapter-node

Menjalankan perintah ini akan menginstal paket @sveltejs/adapter-node sebagai ketergantungan pengembangan dalam proyek SvelteKit Anda. Anda menggunakan adaptor ini ketika Anda ingin men-deploy aplikasi SvelteKit Anda di lingkungan Node.js.

Setelah Anda selesai menginstal paket, ganti baris pertama kode dalam berkas svelte.config.js Anda dengan kode di bawah ini:

import adapter from '@sveltejs/adapter-node';

Langkah selanjutnya adalah membuat berkas .dockerignore di direktori root proyek Anda. Dalam berkas .dockerignore, tentukan berkas dan direktori yang harus dikecualikan saat membangun citra Docker.

Sepertinya begitu:

node_modules
.svelte-kit
build
public

Setelah menentukan berkas dan direktori yang harus dikecualikan. Buat berkas Docker bernama Dockerfile di direktori akar proyek.

Pada berkas Docker, tambahkan baris kode berikut:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

Dockerfile ini menyebabkan pembangunan multi-tahap, di mana tahap pertama membangun aplikasi dan tahap kedua membuat citra produksi yang lebih kecil dengan hanya dependensi yang diperlukan.

Sekarang, Anda dapat membangun citra docker aplikasi Anda dengan menjalankan perintah berikut ini di terminal Anda:

docker build -t quote-generator .

Menerapkan Aplikasi Anda

Setelah Anda melakukan dockerisasi aplikasi dan mendorongnya ke repositori GitHub, Anda dapat menerapkannya di Back4app. Untuk melakukannya, buat akun Back4app jika Anda belum memilikinya.

Untuk membuat akun Back4app, ikuti langkah-langkah berikut:

1. Kunjungi situs web Back4app.
2. Klik tombol “Daftar“.
3. Isi formulir pendaftaran dan kirimkan.

Setelah membuat akun Back4app Anda, masuk ke akun Anda di situs web Back4app & buat aplikasi baru. Anda dapat melakukannya dengan mengklik tombol “Aplikasi Baru” di sudut kanan atas layar.

Pilih opsi Kontainer sebagai Layanan. Setelah memilih opsi ini, situs web akan mengarahkan Anda ke halaman lain di mana Anda akan menautkan akun GitHub Anda ke Back4app.

Setelah Anda menautkan akun GitHub Anda ke Back4app, pilih repositori aplikasi Anda untuk penyebaran.

Beri nama aplikasi Anda dan konfigurasikan penerapan awalnya sebelum akhirnya menerapkan aplikasi.

Setelah aplikasi berhasil diterapkan, Back4app akan memberi Anda tautan untuk mengakses aplikasi di browser web Anda.

Kesimpulan

Kesimpulannya, menerapkan aplikasi SvelteKit menggunakan platform CaaS Back4pp menyederhanakan pengembangan. Prosesnya sederhana.

Ini melibatkan pembuatan aplikasi Anda, dockerisasi aplikasi, mendorong aplikasi ke repositori GitHub, dan akhirnya menerapkan aplikasi.

Saat mempertimbangkan untuk menerapkan aplikasi SvelteKit Anda, platform Back4app CaaS. menyediakan solusi yang dapat diskalakan dan hemat biaya.

Jika Anda menyukai artikel ini, Anda mungkin juga suka membaca artikel Cara membuat aplikasi SvelteKit menggunakan ChatGPT.

PERTANYAAN YANG SERING DIAJUKAN