DEV Community: Rafli Zocky

Minimal Go Starter Kit

Rafli Zocky — Sun, 28 Jun 2026 12:05:37 +0000

Here is my go-to minimal setup.

gin-gonic/gin — HTTP router and web framework.
gin-contrib/cors — CORS middleware for cross-origin requests.
golang-jwt/jwt/v5 — JWT authentication and token handling.
joho/godotenv — Loads environment variables from .env files.
golang.org/x/crypto — Password hashing and cryptography utilities.
gorm.io/gorm — ORM for database operations.
gorm.io/driver/mysql — MySQL driver for GORM.

Other options:

Atlas — manages DB schema migrations.
sqlc — generates Go code from your SQL queries, no need to write DB code manually.

Folders

api/ : Contains the core HTTP server setup (server.go) and common API response formatting (response.go). This is where your routes are registered and the main server instance is created.
config/ : Handles application configuration. The config.go file here is responsible for tasks like connecting to your database and managing global settings.
handlers/ : Contains the HTTP request handlers (controllers) like auth.go, user.go, role.go, etc. These files receive incoming HTTP requests, process the business logic (often by interacting with models), and send back HTTP responses.
middleware/ : Contains functions that run before your main handlers. For example, auth.go and permission.go likely intercept requests to verify that a user is logged in and has the correct permissions before allowing them to access protected routes.
migrations/ : Contains raw SQL files (e.g., ...create_users.up.sql) used to create and modify your database schema over time. This keeps track of your database structure versions.
models/ : Defines the data structures (Go structs) that represent your database tables (like User, Role, Permission). These are used to map data between your Go code and your database.
seeders/ : Contains scripts to populate your database with initial or dummy data (like a default admin user or basic roles) which is very useful for setting up a fresh development environment.

Root Files

main.go : The entry point of your Go application. It bootstraps the app by loading environment variables, setting up logging, connecting to the database via the config package, and starting the HTTP server via the api package.
.env & **.env.example**
.air.toml : The configuration file for Air, a popular live-reloading tool for Go. It tells Air how to build and run your app automatically when you save changes.

And at managing the command to run/migrate/seed/etc, we can use tools like Taskfile or Makefile.

version: '3'

dotenv: ['backend/.env']

tasks:
  # ── Dev ──────────────────────────────────────────────────────────────────
  dev:
    desc: Start backend (Air) and frontend (Vite) concurrently
    cmds:
      - 'npx --prefix frontend concurrently --names "backend,frontend" --prefix-colors "cyan,magenta" "cd backend && \"{{.AIR_PATH}}\"" "pnpm --dir frontend run dev"'

  # ── Backend ──────────────────────────────────────────────────────────────
  backend:
    desc: Run backend with Air live reload
    dir: backend
    cmds:
      - '"{{.AIR_PATH}}"'

  # ── Frontend ─────────────────────────────────────────────────────────────
  frontend:
    desc: Run frontend Vite dev server
    dir: frontend
    cmds:
      - pnpm run dev

  # ── DB / Migrations ──────────────────────────────────────────────────────
  db:create:
    desc: Create the database if it doesn't exist
    dir: backend
    cmds:
      - '"{{.MYSQL_PATH}}" -u{{.DB_USER}} -p{{.DB_PASS}} -h{{.DB_HOST}} -P{{.DB_PORT}} -e "CREATE DATABASE IF NOT EXISTS {{.DB_NAME}}"'

  migrate:up:
    desc: Run all pending migrations
    dir: backend
    cmds:
      - task: db:create
      - '"{{.MIGRATE_PATH}}" -path migrations -database "mysql://{{.DB_USER}}:{{.DB_PASS}}@tcp({{.DB_HOST}}:{{.DB_PORT}})/{{.DB_NAME}}" up'

  migrate:create:
    desc: "Create a new migration - usage: task migrate:create NAME=create_posts"
    dir: backend
    cmds:
      - '"{{.MIGRATE_PATH}}" create -ext sql -dir migrations -seq {{.NAME}}'

  seed:
    dir: backend
    cmds:
      - go run ./seeders

  # ── Utilities ────────────────────────────────────────────────────────────
  tidy:
    desc: Run go mod tidy
    dir: backend
    cmds:
      - go mod tidy

  install:
    desc: First-time project setup (copy .env, tidy, migrate)
    cmds:
      - cp backend/.env.example backend/.env
      - task: tidy
      - task: migrate:up

  setup:
    desc: Full setup + start dev servers
    cmds:
      - task: install
      - task: dev

🧑‍💻Freelance software development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Install Android SDK Command Line Tools for Flutter (Without Android Studio)

Rafli Zocky — Sun, 10 May 2026 22:54:51 +0000

This topic covers how to install the Android SDK needed for development without using Android Studio.

Steps

Install Java SDK

Choose your JDK version here: https://adoptium.net/temurin/releases (you can choose other web for preferences of installation).
Set environment variables:

# Set JAVA_HOME
setx JAVA_HOME "C:\Program Files\Eclipse Adoptium\jdk-17.0.17.10-hotspot"

# Add to PATH
setx PATH "%PATH%;%JAVA_HOME%\bin"

Verify installation: java -version

Install Android Command Line Tools

Download: https://developer.android.com/studio#command-line-tools-only
Create directory & Extract here: C:\Android\sdk\cmdline-tools\latest

Install Android SDK Components

Open path C:\Android\sdk\cmdline-tools\latest\bin , then run in terminal:

sdkmanager.bat --sdk_root=C:\Android\sdk "platforms;android-36" "build-tools;28.0.3"

Configure Flutter

# Add to PATH
setx PATH "%PATH%;C:\Flutter\flutter\bin"

# Navigate Flutter to know the directory of our Android SDK
flutter config --android-sdk C:\Android\sdk

# Show all Android licenses we need to accept
flutter doctor --android-licenses

Accept all licenses with y. Then, verify with flutter doctor.

My Directory

C:\
├── Program Files\
│ └── Eclipse Adoptium\
│ └── jdk-17.0.17.10-hotspot\
│ ├── bin\
│ ├── lib\
│ └── ...
│
├── Android\
│ └── sdk\
│ ├── cmdline-tools\
│ │ └── latest\
│ │ └── bin\
│ │ ├── sdkmanager.bat
│ │ └── ...
│ ├── platform-tools\
│ ├── platforms\
│ │ └── android-36\
│ └── build-tools\
│ └── 28.0.3\
│
└── Flutter\
    └── flutter\
        ├── bin\
        │ └── flutter.bat
        ├── packages\
        └── ...

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

ADB Wireless Debugging in Android Development

Rafli Zocky — Sun, 10 May 2026 22:54:34 +0000

Ensure your PC and phone are on the same Wi-Fi network or enable a mobile hotspot on your PC and connect your phone to it.

Wireless Debugging

Pairing code

Navigate to Settings → Developer Options → Wireless debugging
Tap Pair device with pairing code
Open your project terminal:

# pair
adb pair your_ip:pairing_port

# connect
adb connect your_ip:device_port

# verify
adb devices

QR code (Android Studio)

Run:

adb pair

If it still doesn’t work, check that your ADB version is 1.0.41 or higher, temporarily disable any VPN or mobile hotspot, or fall back to a USB connection.

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Multiple Sheets Excel Export in Laravel

Rafli Zocky — Sun, 10 May 2026 22:54:30 +0000

This example uses the maatwebsite/excel package.

composer require maatwebsite/excel:^3.1

1. Route

Route::get('/export-excel', [App\Http\Controllers\MyController::class, 'excel'])->name('export-excel');

2. Simple View

Date input and a button that triggers the download.

<div class="mb-4 form-group col-lg-4">
    <label class="form-label">Start Date</label>
    <input type="text" name="start_date" id="start_date" class="form-control" required>
</div>
<div class="mb-4 form-group col-lg-4">
    <label class="form-label">End Date</label>
    <input type="text" name="end_date" id="end_date" class="form-control" required>
</div>

<button type="button" class="btn btn-primary exportExcel">Excel</button>

$(document).on('click', '.exportExcel', function() { 
  var start = $('#start_date').val(); 
  var end = $('#end_date').val(); 

  window.location.href = {{ route('export-excel') }}?start=${start}&end=${end}; 
});

3. Controller

Note: if the query is taking long, then its better to separate the sheets. Just create separate files and try to use FromQuery and WithChunkReading.

use Illuminate\Http\Request;
use Maatwebsite\Excel\Facades\Excel;
use App\Excels\Exports\MyExport;
use Illuminate\Support\Facades\DB;

class MyController extends Controller
{
    public function excel(Request $request)
    {
        $start = $request->start_date;
        $end = $request->end_date;

        // Sheet 1
        $sheet1 = DB::table('users')
            ->select('name','email')
            ->whereBetween('created_at', [$start, $end])
            ->get()
            ->map(fn($r) => [$r->name, $r->email]);

        // Sheet 2
        $sheet2 = DB::table('orders')
            ->select('invoice','total')
            ->whereBetween('created_at', [$start, $end])
            ->get()
            ->map(fn($r) => [$r->invoice, $r->total]);

        return Excel::download(new MyExport($sheet1, $sheet2), 'report.xlsx');
    }
}

4. Export (Multiple Sheets)

namespace App\Excels\Exports;

use Maatwebsite\Excel\Concerns\WithMultipleSheets;
use App\Excels\Exports\Sheets\MySheet;

class MyExport implements WithMultipleSheets
{
    public function __construct(
        protected $sheet1,
        protected $sheet2
    ) {}
    public function sheets(): array
    {
        return [
            new MySheet($this->sheet1, 'Users'),
            new MySheet($this->sheet2, 'Orders'),
        ];
    }
}

5. Sheet Class

Each instance represents one Excel tab.

namespace App\Excels\Exports\Sheets;

use Maatwebsite\Excel\Concerns\FromArray;
use Maatwebsite\Excel\Concerns\WithTitle;
use Illuminate\Support\Collection;
class MySheet implements FromArray, WithTitle
{
    public function __construct(
        protected $data,
        protected $title
    ) {}

    public function array(): array
    {
        if ($this->title === 'Users') {
            return [
                ['NAME', 'EMAIL'],
                ...$this->data->toArray(),
            ];
        }

        return [
            ['INVOICE', 'TOTAL'],
            ...$this->data->toArray(),
        ];
    }

    public function title(): string
    {
        return $this->title;
    }
}

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Server-Side DataTables Rendering in Laravel

Rafli Zocky — Sun, 10 May 2026 22:54:26 +0000

Aside from doing indexes, and use join() instead of with(). This example uses the DataTables library.

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.css" />  
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.js"></script>

1. Route

Route::post('/data', [App\Http\Controllers\MyController::class, 'datatable'])->name('mydata.datatable');

2. View

Date input, datatable, and button.

<div class="mb-4 form-group col-lg-4">
    <label class="form-label">Start Date</label>
    <input type="text" name="start_date" id="start_date" class="form-control" required>
</div>
<div class="mb-4 form-group col-lg-4">
    <label class="form-label">End Date</label>
    <input type="text" name="end_date" id="end_date" class="form-control" required>
</div>
<div class="mb-4 form-group col-lg-4">
    <button class="btn btn-sm btn-light-primary font-weight-bold" id="btnShow">Show</button>
</div>

<table class="table table-hover table-bordered table-vertical-center" id="tableMyData">
    <thead class="table-success font-weight-bold">
        <tr>
            <th class='text-left'>INVOICE</th>
            <th class='text-left'>AMOUNT</th>
        </tr>
    </thead>
    <tbody style="white-space: nowrap;"></tbody>
</table>

<script>
  $('#btnTampilkan').on('click', function() {
      _loadMyData();
  });

  let table;
  function _loadMyData() {
      var start = $('#start_date').val(); 
      var end = $('#end_date').val(); 
      if (table) table.destroy();
      if (!start || !end) return Swal.fire('Warning', 'Start & End date is required!', 'warning');
      table = $('#tableMyData').DataTable({
          processing: true,
          autoWidth: false,
          serverSide: true,
          pagingType: 'full_numbers',
          lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
          pageLength: 10,
          destroy: true,
          ajax: {
              url: "{{ route('mydata.datatable') }}",
              type: 'POST',
              data: {
                  start_date: start,
                  end_date: end,
                  _token: "{{ csrf_token() }}"
              }
          },
          language: {
              emptyTable: "No data found"
          },
          order: [[1, 'desc']],
          columnDefs: [
              { orderable: false, targets: 0, width: '3%' },
          ],
          columns: [
              {
                  data: null,
                  render: (data) => `<input type="checkbox" class="row-checkbox" data-nosep="${data.nosep}">`
              },
              { data: 'invoice' },
              { data: 'amount' },
          ],
          // search delay
          initComplete() {
              const api = this.api();
              let typingTimer;
              $('#tableMyData_filter input').off().on('keyup', function (e) {
                  clearTimeout(typingTimer);
                  const value = this.value;
                  if (e.which === 13) {
                      api.search(value).draw();
                  } else {
                      typingTimer = setTimeout(() => api.search(value).draw(), 500);
                  }
              });
          }
      });
  }
</script>

3. Controller

use Illuminate\Http\Request;

public function datatable(Request $request)
{
    $query = ...
        ->whereBetween('order_date', [$request->start, $request->end]);

    $maxLimit = 100000;
    $columns = [null, 'invoice', 'amount'];

    $recordsTotal = min((clone $query)->count(), $maxLimit);
    // SEARCH
    if ($search = $request->input('search.value')) {
        $normalized = str_replace(['.', ','], '', $search);
        $query->where(function($q) use ($search, $normalized) {
            $q->where('invoice', 'LIKE', "%{$search}%")
              ->orWhere('amount', 'LIKE', "%{$search}%");
        });
    }

    $recordsFiltered = min((clone $query)->count(), $maxLimit);

    // ORDERING
    $order = $request->input('order', []);
    if ($order && ($col = $columns[$order[0]['column']] ?? null)) {
        $query->orderBy($col, $order[0]['dir'] ?? 'ASC');
    } else {
        $query->orderBy('order_date', 'ASC');
    }

    // PAGINATION
    $start = $request->input('start');
    $results = $start >= $maxLimit
        ? collect()
        : $query->offset($start)
                ->limit(min($request->input('length'), $maxLimit - $start))
                ->get();

    return response()->json([
        'draw' => intval($request->draw),
        'recordsTotal' => $recordsTotal,
        'recordsFiltered' => $recordsFiltered,
        'data' => $results->map(fn($r) => [
            'invoice' => $r->invoice,
            'amount' => $r->amount,
        ])
    ]);
}

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Fix Flutter Dependency Conflicts

Rafli Zocky — Sun, 10 May 2026 22:54:21 +0000

Resolve dependency conflicts caused by mismatched analyzer versions when your project’s required Flutter SDK differs from your globally installed version.

Steps

Check, install, and use required Flutter version

Open pubspec.yaml Or check .fvmrc file at the project root. Then, run terminal as Administrator to avoid symlink permission errors.

environment:
  sdk: ^3.8.0
  flutter: ">=3.32.0"

# install fvm locally
dart pub global activate fvm

# set path fvm (ex: cmd)
setx PATH "%PATH%;%LOCALAPPDATA%\Pub\Cache\bin"

# install fvm in project
C:\...\flutter_application_1>fvm install 3.32.0

# use
C:\...\flutter_application_1>fvm use 3.32.0

Run Flutter

C:\...\flutter_application_1>fvm flutter clean
C:\...\flutter_application_1>fvm flutter pub get
C:\...\flutter_application_1>fvm flutter run

Using FVM with the fvm prefix ensures your project always runs with its specified Flutter version, avoiding the common "version solving failed" errors caused by incompatible dependencies.

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Using Vue in Laravel Without Inertia

Rafli Zocky — Sun, 10 May 2026 22:54:03 +0000

We can use inertia.js, but sometimes we just need to keep it simple. This also works for React and others.

Folder Structure

# only an example

resources
 ├ js
 │ ├ app.js
 │ ├ App.vue
 │ ├ pages
 │ │ └ Dashboard.vue
 │ ├ components
 │ │ └ ui
 │ └ layouts
 └ views
    └ app.blade.php

# Flow

Laravel route
   ↓
controller returns Blade
   ↓
Blade sets PAGE + PROPS
   ↓
Vue loads correct page component
   ↓
component receives props

Steps

Installation

# laravel
laravel new example-app

# vue
npm install vue
npm install @vitejs/plugin-vue --save-dev

Vite

# vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

Entry

# resources\js\app.js

import { createApp, h } from "vue"
import App from "./App.vue"

const app = createApp({
    render: () => h(App, {
        page: window.PAGE,
        props: window.PROPS
    })
})

app.mount("#vue-app")

Root

# resources\js\App.vue

<script setup>
import { defineAsyncComponent } from "vue"
import AppSidebar from "./components/app-sidebar.vue"

const props = defineProps({
    page: String,
    props: Object
})

const pages = import.meta.glob("./pages/**/*.vue")
const loader = pages[`./pages/${props.page}.vue`]
const PageComponent = loader ? defineAsyncComponent(loader) : null
</script>

<template>
    <div class="flex min-h-screen">
        <AppSidebar />

        <main class="flex-1 p-6">
            <component v-if="PageComponent" :is="PageComponent" v-bind="props.props" />
            <div v-else>Page not found</div>
        </main>
    </div>
</template>

Connect

# resources\views\layouts\app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name') }}</title>

    <script>
        window.PAGE = @json($page);
        window.PROPS = @json($props);
        window._USER = @json(auth()->user());
        window.APP_NAME = @json(config('app.name'));
    </script>

    @vite(['resources/js/app.js'])

</head>

<body>

    <div id="vue-app"></div>

</body>

</html>

# start your web server, and then:

npm run dev

Controller

# example

public function index()
{
    return view('app', [
        'page' => 'componentsname',
        'props' => [
            'title' => 'page title',
            'constant' => ['type' => 'monthly']
        ]
    ]);
}

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

419 Session Expired Error in Laravel

Rafli Zocky — Sun, 10 May 2026 22:53:55 +0000

Sometimes we get the 419 session expired error. Simple ways to handle the TokenMismatchException , is we put it on Exception Handler (global):

bootstrap/app.php (Laravel 11)

->withExceptions(function (Exceptions $exceptions) {
    $exceptions->render(function (\Illuminate\Session\TokenMismatchException $e, Request $request) {
        return redirect()->route('login')->withErrors(['username' => 'Your session expired. Please log in again.']);
    });
})

app/Exceptions/Handler.php (Laravel 10)

use Illuminate\Session\TokenMismatchException;

public function render($request, Throwable $exception)
{
    if ($exception instanceof TokenMismatchException) {
        return redirect()->route('login')->withErrors(['username' => 'Your session expired. Please log in again.']);
    }

    return parent::render($request, $exception);
}

And just refresh the page. We can also do custom handler per route group, Middleware, session lifetime, or refresh the CSRF token, but this is simple enough.

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

SQL Server “Login failed” in Laravel

Rafli Zocky — Sun, 10 May 2026 22:53:51 +0000

I hit SQLSTATE[28000] Login failed for user 'sa' in Laravel even though everything looked correct (SSMS login, credentials, config, driver, etc.).

I tried almost everything: fixing .env, checking SQL Server setup in SSMS, verifying credentials — but nothing changed.

What actually resolved it:

I manually created the database first in SSMS, then ran Laravel migrations again.

After that, everything worked normally.

Not saying this is the “proper fix”, but in my case it unblocked the migration process immediately.

Hope this helps someone stuck on the same issue.

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Laravel HTTP Error Custom Views (404, 403, 500, etc.)

Rafli Zocky — Sun, 10 May 2026 22:53:45 +0000

How Laravel Handles HTTP Errors

A request hits a non-existent route
Router throws NotFoundHttpException
Exception is caught by Handler
Laravel looks for resources/views/errors/404.blade.php (example)
Returns an HTTP 404 response with the rendered view

Common Handling

app/Exceptions/Handler.php : converts exceptions into HTTP responses.

<?php

namespace App\Exceptions;

use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Illuminate\Http\Exceptions\ThrottleRequestsException;
use Illuminate\Session\TokenMismatchException;
use Illuminate\Auth\Access\AuthorizationException;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Symfony\Component\HttpKernel\Exception\ServiceUnavailableHttpException;
use Throwable;

class Handler extends ExceptionHandler
{
    /**
     * The list of the inputs that are never flashed to the session on validation exceptions.
     *
     * @var array<int, string>
     */
    protected $dontFlash = [
        'current_password',
        'password',
        'password_confirmation',
    ];

    /**
     * Register the exception handling callbacks for the application.
     */
    public function register(): void
    {
        $this->reportable(function (Throwable $e) {
            //
        });

        // 403 — Forbidden
        $this->renderable(function (AuthorizationException $e, $request) {
            if (!$request->expectsJson()) {
                return response()->view('errors.403', [], 403);
            }
        });

        // 404 — Not Found
        $this->renderable(function (NotFoundHttpException $e, $request) {
            if (!$request->expectsJson()) {
                return response()->view('errors.404', [], 404);
            }
        });

        // 419 — Page Expired (CSRF Token Mismatch)
        $this->renderable(function (TokenMismatchException $e, $request) {
            if (!$request->expectsJson()) {
                return response()->view('errors.419', [], 419);
            }
        });

        // 429 — Too Many Requests
        $this->renderable(function (ThrottleRequestsException $e, $request) {
            if (!$request->expectsJson()) {
                $retryAfter = $e->getHeaders()['Retry-After'] ?? 60;
                return response()->view('errors.429', ['retryAfter' => $retryAfter], 429);
            }
        });

        // 503 — Service Unavailable
        $this->renderable(function (ServiceUnavailableHttpException $e, $request) {
            if (!$request->expectsJson()) {
                return response()->view('errors.503', ['exception' => $e], 503);
            }
        });
    }

    public function render($request, Throwable $exception)
    {
        return parent::render($request, $exception);
    }
}

resources/views/errors/{status_code}.blade.php

# example 
# resources\views\errors\404.blade.php

@extends('errors.layout')

@section('error_code', '404')

@section('error_content')
    <div class="text-center position-relative z-index-1" style="max-width: 520px;">

        {{-- Illustration --}}
        <div class="mb-6">
            <img src="{{ asset('assets/media/illustrations/unitedpalms-1/18.png') }}"
                 class="error-illustration theme-light-show" alt="404 Not Found" />
            <img src="{{ asset('assets/media/illustrations/unitedpalms-1/18-dark.png') }}"
                 class="error-illustration theme-dark-show" alt="404 Not Found" />
        </div>

        {{-- Title --}}
        <h1 class="fw-bold fs-2x text-gray-900 mb-3">Page Not Found</h1>

        {{-- Description --}}
        <p class="text-muted fs-5 mb-8 fw-semibold">
            Oops! The page you're looking for doesn't exist.<br>
            It may have been moved, deleted, or never existed.
        </p>

        {{-- Actions --}}
        <div class="error-actions d-flex gap-3 justify-content-center flex-wrap">
            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : '/' }}"
               class="btn btn-light btn-lg fw-bold px-8">
                <i class="ki-duotone ki-arrow-left fs-2 me-2">
                    <span class="path1"></span><span class="path2"></span>
                </i>
                Go Back
            </a>
        </div>
    </div>
@endsection

Then, just create simple routes to test it.

Route::get('/test-404', function () {
    abort(404);
});

Also we can customize error pages by creating the views manually or publishing Laravel’s default templates:

php artisan vendor:publish — tag=laravel-errors

Need help building your app? I’m available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Access Laravel Projects on a Local Network

Rafli Zocky — Sun, 10 May 2026 22:53:25 +0000

Made for those tired of running php artisan serve locally. Examples with XAMPP and Laragon. Should work for other PHP frameworks too.

Steps

1. Place your Laravel projects in your web server directory:

# XAMPP
C:\xampp\htdocs\project1

# Laragon
C:\laragon\www\project1

2. Open httpd.conf and add:

# XAMPP
Listen 8001
<VirtualHost *:8001>
    DocumentRoot "C:/xampp/htdocs/project1/public"
    <Directory "C:/xampp/htdocs/project1/public">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

# Laragon
Listen 8001
<VirtualHost *:8001>
    DocumentRoot "C:/laragon/www/project1/public"
    <Directory "C:/laragon/www/project1/public">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

3. Uncomment if not already:

LoadModule rewrite_module modules/mod_rewrite.so
Include conf/extra/httpd-vhosts.conf

4. Restart Apache, then access via browser:

http://10.198.210.184       → Project 1
http://10.198.210.184:8001  → Project 2
http://10.198.210.184:8002  → Project 3

# or use localhost:port

FAQ

Can't access it? Check:

Firewall → Allow incoming connections on ports 80, 8001, 8002
403 Forbidden → Ensure AllowOverride All and Require all granted are set, check folder permissions
Routes not working → Ensure mod_rewrite is enabled, verify DocumentRoot points to the public folder

Need help building your app?
I'm available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Fix Common CORS Errors in APIs and Frontend Apps

Rafli Zocky — Sun, 10 May 2026 22:53:16 +0000

I've spent many hours solving this…

Cross-Origin Resource Sharing (CORS) errors are a regular part of web development. More info: MDN CORS Guide.

Issue 1: No Access-Control-Allow-Origin Header

Access to XMLHttpRequest blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

The frontend is calling a backend endpoint without proper CORS configuration. Fix:

'allowed_origins' => [
    'http://localhost:3000',
    'http://localhost:5173',
],

For Laravel 11+:

php artisan config:publish cors

Then edit config/cors.php. Most frameworks have built-in CORS support — look for config files or middleware.

Issue 2: Credentials with Wildcard Origins

The 'Access-Control-Allow-Origin' header value must not be '*' when the
request's credentials mode is 'include'.

Using withCredentials: true with allowed_origins: ['*'] is not allowed by browsers. Specify exact trusted origins:

const api = axios.create({
  baseURL: "http://127.0.0.1:8000",
  withCredentials: true,
});

'allowed_origins' => ['https://yourdomain.com'], // NOT ['*']
'supports_credentials' => true,

Issue 3: Wrong API Endpoint

Calling /login instead of /api/login — accidentally hitting the web route instead of the API route.

# Check your routes first
php artisan route:list | grep login

// Fix the endpoint
const response = await api.post('/api/login', data); // Add /api prefix

Issue 4: Config Changes Not Applied

# Clear all cache in Laravel
php artisan optimize:clear

# Restart dev server
ctrl + c
npm run dev

Most problems stem from configuration mismatches rather than complex setup issues.

Need help building your app?
I'm available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky