Pertama pastikan sudah install Deno versi 2.1.4 atau versi yang lebih baru. Buka terminal lalu ketik: $ deno run -A npm:create-astro@latest karena sekarang Deno sudah bisa mendeteksi file package.json kita bisa jalankan aplikasi astro di deno dengan perintah: $ deno task dev happy coding
mrfdn.com - Saya akhirnya memiliki sebuah projekan NodeJS. Saya memilih AstroJS untuk membangun aplikasi ini. Setelah aplikasi di build, saya mendapatkan sebuah kendala. Bahwa aplikasi tidak bisa run di server karena ada beberapa pengaturan yang harus diset supaya aplikasi bisa run di server. Berikut pengaturan yang saya lakukan. edit file astro.config.mjs export default defineConfig({ integrations: [solidJs()], base: process.env.NODE_ENV === 'production' ? '/app' : '/', output: 'server', adapter: node({ mode: "standalone" }), server: { host: true } }); Dengan pengaturan di atas, aplikasi akan berjalan saat mengakses route /app saat sudah dibuild di server, tetapi jika tidak dia akan berjalan di root (/) domain. ...
mrfdn.com - Jika kita punya file javascript yang berjalan normal tanpa menggunakan framework seperti Svelte, yang ingin dijalankan pada projekan Astro, secara normal untuk bisa menjalankannya kita akan menemui error: document is not defined Browser APIs are not available on the server. If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a client:only directive to make the component exclusively run on the client. See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information. Jadi untuk menjalankan script tersebut kita harus menempatkannya di dalam fungsi onMount() yang sudah ada sebagai bawaan Svelte. ...
mrfdn.com - Kali ini saya ingin mencatat bagaimana cera menampilkan data secara loop dengan menggunakan Svelte component yang berjalan di atas projekan Astro JS. Pastikan sudah add Svelte ke Astro npx astro add svelte Setelah itu buka file ./package.json lalu pastikan svelte sudah terinstall. Jika perlu hapus file ./package-lock.json lalu install dengan perintah npm install. Sekarang buat component yang berisi list data di /src/components/Listdata.svelte, lalu isi dengan codingan ini: <script> let items = ['halo', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; </script> <ul> {#each items as item} <li>{item}</li> {/each} </ul> Sekarang panggil components tersebut pada file mana saja yang diinginkan. Di sini saya membuat file baru bernama /src/pages/loop.svelte lalu isi dengan kodingan ini: --- import Gallery from '../components/ListData.svelte'; --- <h1>List data</h1> <Gallery /> Jalankan server npm run dev dan anda akan melihat hasilnya di layar. Demikian cara menampilkan data array pada Svelte yang berjalan di atas Astro JS. ...
mrfdn.com - Saya memiliki sebuah projek website dimana saya menggunakan AstroJS sebagai backend nya. Kemudian beberapa waktu yang lalu Astro sudah memiliki versi terbaru yaitu astro versi 2.0. Terdapat beberapa perubahan dimana saya harus beradaptasi lagi dengan fitur-fitur baru astro 2.0 ini. Sebelumnya projek saya sedang berjalan pada astro versi 1.9.2. Saat tulisan ini dibuat astro sudah berada pada versi 2.0.11. Untuk upgrade ke versi astro terbaru cukup gunakan perintah npm i astro@latest. ...