markdown Kickstart Laravel 5.5 App开发dengan前端预设vuejs di本地机器。

Posted 2021-05-06

# 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

```bash
$ 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`

```bash
$ 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

```bash
$ 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`.

```bash
$ 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

```bash
$ 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`.

```bash
$ 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.

```bash
$ 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`.

```bash
$ 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.
```