Laravel 5.5 Kickstart dengan Vuejs

Setup serta konfigurasi database dan front-end development menggunakan di Local Development Machine

Requirement

• Composer terinstall secara global
• MySQL server atau database server lainnya sesuai dengan preferensi juga telah terinstall
• PHP7 ++ sudh terinstall dilengkapi ekstensi / modul sesuai dengan aplikasi yang ingin dikembangkan

$ composer --version
Composer version 1.5.2 2017-09-11 16:59:25

$ mysql.server start
Starting MySQL
.171114 20:40:00 mysqld_safe Logging to '/usr/local/var/mysql/RockIT.local.err'.
171114 20:40:00 mysqld_safe Starting mysqld daemon with databases from /usr/local/var/mysql
 SUCCESS!
 
$ php -v
PHP 7.1.11 (cli) (built: Nov 10 2017 15:00:26) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

Setup Laravel 5.5

Setup laravel 5.5 dapat dilakukan melalui perintah composer create-project

$ composer create-project --prefer-dist laravel/laravel codetutor

Perintah tersebut akan mempersiapkan sebuah direktori dengan nama codetutor yang berisi kerangka aplikasi untuk laravel. Web root untuk aplikasi ini terletak di dalam codetutor/public, request melalui browser akan dilayani oleh file index.php yang berada di dalam direktori public tersebut.

Directory Permissions

Pastikan web server yang digunakan memiliki permission read/write ke direktori bootstrap/cache dan storage.

Local Development Server

Lebih menyukai menggunakan Valet karena mudah digunakan, minim konfigurasi dan ringan.

Konfigurasi database melalui .env

Create database di MySQL server

$ mysql -uroot

> create database codetutor;
Query OK, 1 row affected (0.00 sec)

Masukkan nama database di dalam file .env, apabila belum ada file .env di dalam folder project silahkan kopi dari .env.example. Pada instalasi menggunakan composer file ini biasanya sudah tersedia sekaligus dengan Application Key.

$ cat .env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:--key---
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Sesuaikan informsi di bagian DB_* dengan konfigurasi database yang kita miliki.

Application Key

$ php artisan key:generate

Apabila belum ada APP_KEY=base64:key32digit di dalam .env di project-directory yang baru dibuat.

Sesuaikan konfigurasi Valet

Masukkan root project directory yang kita buat ke dalam konfigurasi valet baik menggunakan valet park ataupun valet link dalam hal ini memilih untuk menggunakan valet park.

$ pwd
/root/direktori/laravel/
$ cd ..
$ valet park

Aplikasi laravel akan tersedia untuk diakses via browser melalui namadirektori.dev. Ubah konfigurasi valet menggunakan secure apabila belum.

$ valet secure
Password:
Restarting php71...
Restarting nginx...
The [codetutor.dev] site has been secured with a fresh TLS certificate.

Menggunakan preset vue untuk Front End Development

Melalui laravel-mix, Laravel 5.5 menyediakan 3 preset untuk pengembangan front-end yaitu bootstrap, vue, react ubah preset menjadi vue atau none untuk menghilangkan preset. Kemudian install front-end tooling menggunakan npm install.

$ php artisan preset --help
Usage:
  preset <type>

Arguments:
  type                  The preset type (none, bootstrap, vue, react)

Options:
  -h, --help            Display this help message
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi            Force ANSI output
      --no-ansi         Disable ANSI output
  -n, --no-interaction  Do not ask any interactive question
      --env[=ENV]       The environment the command should run under
  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Help:
  Swap the front-end scaffolding for the application
tjrocks:codetutor$ php artisan preset vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.