Membuat Blog Profesional dengan Stack Modern / Setup Semua Yang dibutuhkan
Instalasi Laravel
Karena semua akan kita mulai dari awal, maka kita akan lakukan instalasi laravel terlebih dahulu. Untuk instalasi laravel, Anda bisa buka terminal dan silakan jalankan perintah berikut:
composer create-project laravel/laravel blog
Setelah itu, silakan cd ke dalam folder blog dengan perintah berikut:
cd blog
Kemudian buka project nya di text editor Anda, dan dan silakan buka file .env untuk mengganti default database nya, by default Laravel yang di install melalui composer (bukan laravel cli) akan mengarahkan kita ke sqlite, namun kita akan menggunakan mysql untuk project ini. Silakan ganti DB_CONNECTION menjadi mysql, dan sesuaikan dengan konfigurasi database Anda.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=
Setelah itu, silakan buat database nya dengan nama blog di mysql Anda, dan jangan lupa untuk menjalankan perintah berikut:
php artisan migrate
Instalasi Laravel Breeze
Setelah itu, mari kita lakukan instalasi laravel breeze dengan menggunakan inertia.js react. Silakan jalankan perintah berikut:
composer require laravel/breeze --dev
Setelah itu, silakan jalankan perintah berikut:
php artisan breeze:install
Dengan perintah itu, akan muncul beberapa pertanyaan seperti stack, features dan juga testing framework nya. Berikut adalah yang saya pilih.
┌ Which Breeze stack would you like to install? ───────────────┐
│ React with Inertia │
└──────────────────────────────────────────────────────────────┘
┌ Would you like any optional features? ───────────────────────┐
│ Inertia SSR │
└──────────────────────────────────────────────────────────────┘
┌ Which testing framework do you prefer? ──────────────────────┐
│ Pest │
└──────────────────────────────────────────────────────────────┘
Setelah itu, jika kita jalankan project nya, maka akan sudah ada halaman login dan register yang sudah jadi. Silakan jalankan perintah berikut:
php artisan serve
Dan buka browser Anda, kemudian buka http://localhost:8000, maka Anda akan melihat halaman login dan register yang sudah jadi.
Instalasi Shadcn UI
Kita tentu tidak mau menggunakan default komponen yang dibawa oleh laravel itu sendiri, maka oleh karena itu kita akan menggunakan shadcn/ui. Silakan jalankan perintah berikut:
npx shadcn-ui@latest init
Dengan perintah di atas, akan ada beberapa pertanyaaan yang akan muncul, berikut adalah yang saya pilih:
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Gray
✔ Where is your global CSS file? … resources/css/app.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes
Tentu kita akan merubah bebera file tailwind.config.js, namun sebelum itu, karena kita akan menggunakan tailwind typography, maka kita harus menginstallnya terlebih dahulu.
Instalasi Tailwind Typography
Karena kita ingin membangun blog yang bagus, maka kita akan menggunakan tailwind typography. Silakan jalankan perintah berikut:
npm install -D @tailwindcss/typography
Setelah itu, tentu kita butuh icon di sini, nah saya akan mengarahkan Anda untuk memakai icon yang saya buat sendiri yaitu Paranoid. Silakan buka terminal dan jalankan perintah berikut:
npm i @irsyadadl/paranoid
Konfigurasi Tailwind
Setelah kita lakukan instalasi shadcn dan juga tailwind typography, maka kita harus mengkonfigurasi tailwind nya. Silakan buka file tailwind.config.js.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/views/vendor/**/**.blade.php',
'./resources/js/**/*.{tsx,jsx}',
'./app/Markdown/*.php',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {"2xl": "1400px"},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: {height: "0"},
to: {height: "var(--radix-accordion-content-height)"},
},
"accordion-up": {
from: {height: "var(--radix-accordion-content-height)"},
to: {height: "0"},
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [
require("tailwindcss-animate"),
require('@tailwindcss/typography'),
],
}
Formatter
Tentu kita tidak ingin menulis kode yang berantakan, oleh karena itu kita akan menggunakan prettier untuk memformat kode kita. Selain prettier kita juga akan menggunakan prettier-plugin-tailwindcss untuk memformat tailwind kita. Silakan jalankan perintah berikut:
npm install -D prettier prettier-plugin-tailwindcss
Setelah itu, silakan buat 1 file dengan nama .prettierrc dan .prettierignore, buka file .prettierrc dan masukan kode berikut:
{
"plugins": ["prettier-plugin-tailwindcss"],
"bracketSameLine": false,
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"printWidth": 120
}
Dan buka file .prettierignore dan masukan kode berikut:
**/vendor
**/public
**/bootstrap
**/storage
Setelah itu, buka file package.json dan tambahkan script berikut:
"scripts": {
"dev": "vite",
"build": "vite build && vite build --ssr",
"format": "prettier --write ."
},
Setelah itu, silakan buka terminal dan jalankan perintah:
npm run format
Dengan begitu, maka dia akan memformat semua file yang ada di project kita sesuai dengan konfigurasi yang kita buat.
Development
Selama kita mengerjakan project ini, pastikan Anda terus akan menjalakan perintah npm run dev pada terminal, karena dengan begitu, maka dia akan terus memberikan perubahan yang kita buat pada project kita.
npm run dev