Skip to main content

How to Use L5-Swagger for API Documentation in Laravel

Integrating Swagger in Laravel: Annotations, JSON, and YAML

What is Swagger?
Swagger (OpenAPI) is a powerful tool for generating interactive API documentation. It helps developers understand and test your API easily.

✅ Step-by-Step Guide to Setup L5-Swagger

1. Install L5-Swagger Package

composer require "darkaonline/l5-swagger"

2. Publish Config & View Files

This command publishes the config file to config/l5-swagger.php:

php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider"

3. Configure Swagger (Optional)

Edit the file config/l5-swagger.php to update:

  • API Title
  • Base Path
  • Directories to scan for annotations

4. Add Swagger Annotations

Add these before your controller class:

/**
* @OA\Info(
*     version="1.0.0",
*     title="Your API Title",
*     description="API documentation for your project",
*     @OA\Contact(
*         email="support@example.com"
*     )
* )
*
* @OA\Server(
*     url=L5_SWAGGER_CONST_HOST,
*     description="API Server"
* )
*/

Annotate methods with routes:

/**
* @OA\Get(
*     path="/api/users",
*     tags={"Users"},
*     summary="Get all users",
*     @OA\Response(
*         response=200,
*         description="Success"
*     )
* )
*/

Import Swagger annotations:

use OpenApi\Annotations as OA;

5. Generate Swagger Docs

php artisan l5-swagger:generate

🛠️ Example: Setting up API Routes & Controller

Create API and Controller

php artisan install:api
php artisan make:controller UserController

Define Routes

// routes/api.php
Route::get('/users', [UserController::class, 'index']);
Route::get('/users/{id}', [UserController::class, 'show']);

UserController with Swagger Annotations

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use OpenApi\Annotations as OA;

/**
* @OA\Info(
*     version="1.0.0",
*     title="Your API Title",
*     description="API documentation for your project",
*     @OA\Contact(
*         email="support@example.com"
*     )
* )
*
* @OA\Server(
*     url=L5_SWAGGER_CONST_HOST,
*     description="API Server"
* )
*/
class UserController extends Controller
{
    /**
    * @OA\Get(
    *     path="/api/users",
    *     tags={"Users"},
    *     summary="Get all users",
    *     @OA\Response(
    *         response=200,
    *         description="Success"
    *     )
    * )
    */
    public function index(Request $request) {
        return User::all();
    }

    /**
    * @OA\Get(
    *     path="/api/users/{id}",
    *     tags={"Users"},
    *     summary="Get User by ID",
    *     @OA\Parameter(
    *         name="id",
    *         in="path",
    *         required=true,
    *         description="ID of the user",
    *         @OA\Schema(type="integer")
    *     ),
    *     @OA\Response(
    *         response=200,
    *         description="Success"
    *     ),
    *     @OA\Response(
    *         response=404,
    *         description="User not found"
    *     )
    * )
    */
    public function show(Request $request, $id) {
        return User::find($id);
    }
}

🚀 Final Result

Visit /api/documentation in your Laravel app to see the interactive Swagger UI with all your documented endpoints.

🎯 Why Use L5-Swagger?

  • Auto-generates interactive API docs.
  • Improves API collaboration between frontend & backend teams.
  • Makes testing APIs easier with a user-friendly UI.

🔗 GitHub Project

You can find the full source code for this integration on GitHub:
👉 github.com/RanaGithub30/laravel-swagger-example

Comments

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...