Cara Mudah Instalasi Dan Setup Project WebApps SPA Menggunakan Inertia JS, Laravel Dan Vue JS
Kali ini kita akan belajar bagaimana cara melakukan instalasi inertia js,laravel dan vue js dalam satu project web SPA kita.
bagi anda yang belu tau apa itu inertia js silahkan dibaca disini
Jika anda belum tau apa itu Laravel Silahkan Baca Disini
Jika anda belum tau apa itu vue js silahkan baca disini
Step Pertama mari kita instal dahulu laravel nya :
Instalasi Laravel
Berikut syarat- syarat yang harus anda penuhi sebelum melakukan instalasi Laravel 6
- PHP >= 7.2.0
- BCMath PHP Extension
- Ctype PHP Extension
- JSON PHP Extension
- Mbstring PHP Extension
- OpenSSL PHP Extension
- PDO PHP Extension
- Tokenizer PHP Extension
- XML PHP Extension
2. Pastikan di laptop / komputer anda sudah terinstal composer.
Berikut Cara Mudah Melakukan instalasi laravel :
berikut proses download :
Setelah selesai download anda cukup ketikkan perintah :
laravel new namafolderaplikasisebagai contoh nama folder webapps kita myapp
jadi cukup ketikkan perintah :
laravel new myappBerikut Proses Instalasi Laravel
simple bukan ? untuk mengetest aplikasinya anda tinggal masuk ke directory myapp dan ketikkan perintah :
php artisan servedan silahkan akses di browser anda dengan cara ketik :
http://127.0.0.1:8000tampilan awal laravel 6
Selanjutnya kita Instalasi Vue JS Pada Laravel
Pada laravel 6.x keatas ui di laravel sudah di pisahkan jadi laravel memberikan kita kebebasan menggunakan framework frontend modern seperti Vue Js atau Ract Js.
Pertama kita tambahkan dahulu package laravel ui dengan cara ketik di terminal project anda :
composer require laravel/uisetelah selesai maka kita generate scafolding nya di laravel anda bisa membuat basic scafolding atau anda bisa generate langsung scafolding yang otomatis mengenerate login / register berikut caranya :
untuk generate basic scafolding ( tanpa fitur login / register ) :
php artisan ui vueJika anda ingin generate scafolding dengan login dan register silahkan ketik :
php artisan ui vue --authSetelah proses di atas selesai maka vue js sudah berhasil kita instal di project kita maka selanjutnya kita akan melakukan instalasi inertia js.
Instalasi Inertia Js
pada inertia js ada 2 instalasi yang perlu kita lakukan yaitu instalasi di Server side ( Laravel ) dan instalasi client side ( Vue Js).
Instalasi Inertia Js Di Server Side :
kita instal dahulu dependencies untuk serverside Inertia Js :
composer require inertiajs/inertia-laravelSetelah proses di atas berhasil maka kita lanjutkan untuk setup untuk root templatenya pada project kita buka file app.blade.php yang terdapat pada :
resources\Views\app.blade.phpdan modifikasi isinya menjadi :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link href="{{ mix('/css/app.css') }}" rel="stylesheet" /> <script src="{{ mix('/js/app.js') }}" defer></script> </head> <body> @inertia </body> </html>
Setelah selesai anda modifikasi maka instalasi inertia js di server side sudah berhasil gimana mudah bukan ? hehehe selanjutnya kita akan instalasi inertia js di client side ( vue js ).
Instalasi Inertia Js Di Client Side ( Vue Js )
kita tambahkan dahulu dependencies nya , kita dapat menggunakan NPM atau Yarn, disini saya menggunakan NPM :
Untuk NPM Ketikkan :
npm install @inertiajs/inertia @inertiajs/inertia-vueJika anda menggunakan yarn maka silahkan ketikkan :
yarn add @inertiajs/inertia @inertiajs/inertia-vueSelanjutnya kita inisialisasi Root App Javascript di project kita buka file app,js yang berada pada :
resources\js\app.js
dan modifikasi isinya menjadi seperti ini :
require('./bootstrap'); import { InertiaApp } from '@inertiajs/inertia-vue' import Vue from 'vue' Vue.use(InertiaApp) const app = document.getElementById('app') new Vue({ render: h => h(InertiaApp, { props: { initialPage: JSON.parse(app.dataset.page), resolveComponent: name => import(`./Pages/${name}`).then(module => module.default), }, }), }).$mount(app)
Kesimpulan :
pada artikel ini kita sudah belajar bagaimana melakukan instalasi inertia js pada laravel dan vue js sebagai client sidenya, sangat mudah dan simple sekali kedepan kita akan membahas bagaimana melakukan routing pada inertia js. silahkan tulis di kolom komentar apa kesan pertama anda menggunakan inertia js ? dan jangan lupa share ya artikel ini
salam sukses dan jangan lupa berkarya 🙂
Originally published at https://adinata.id on February 6, 2020.
