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:

Terminal
composer create-project laravel/laravel blog

Setelah itu, silakan cd ke dalam folder blog dengan perintah berikut:

Terminal
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.

.env
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:

Terminal
php artisan migrate

Instalasi Laravel Breeze

Setelah itu, mari kita lakukan instalasi laravel breeze dengan menggunakan inertia.js react. Silakan jalankan perintah berikut:

Terminal
composer require laravel/breeze --dev

Setelah itu, silakan jalankan perintah berikut:

Terminal
php artisan breeze:install

Dengan perintah itu, akan muncul beberapa pertanyaan seperti stack, features dan juga testing framework nya. Berikut adalah yang saya pilih.

Terminal
 ┌ 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:

Terminal
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:

Terminal
npx shadcn-ui@latest init

Dengan perintah di atas, akan ada beberapa pertanyaaan yang akan muncul, berikut adalah yang saya pilih:

Terminal
✔ 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:

Terminal
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:

Terminal
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.

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:

Terminal
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:

.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "printWidth": 120
}

Dan buka file .prettierignore dan masukan kode berikut:

.prettierignore
**/vendor
**/public
**/bootstrap
**/storage

Setelah itu, buka file package.json dan tambahkan script berikut:

package.json
"scripts": {
    "dev": "vite",
    "build": "vite build && vite build --ssr",
    "format": "prettier --write ."
},

Setelah itu, silakan buka terminal dan jalankan perintah:

Terminal
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.

Terminal
npm run dev