Advanced LaravelPro· 35 min read

Building an API

Serve JSON from Laravel — so a React front-end (or mobile app) can consume it.

What you will learn

  • Create API routes
  • Return JSON
  • Connect to a front-end

First, two new words: API and JSON

An API (Application Programming Interface — a way for two programs to talk to each other) is like a waiter in a restaurant: another program asks it for something, and it brings back the answer. So far your Laravel app has returned HTML pages for a human to look at. An API instead returns raw data for another program to use — for example, a phone app or a React website asking your server "give me the list of products".

JSON (JavaScript Object Notation — a simple text format for data) is the language that data is sent in. It is just text made of keys and values, easy for any program to read. A single product sent as JSON looks like this:

One product written as JSON — keys and values as plain text
{ "id": 1, "name": "Keyboard", "price": "499.00", "in_stock": true }

See how it mirrors your database row? Each column name becomes a key (in quotes), followed by its value. A program on the other end can read this instantly. The good news: Laravel writes this JSON for you automatically — you just return your data.

JSON endpoints

Laravel can serve a JSON API as easily as web pages. API routes go in routes/api.php (a separate routes file just for your API) and return data, not views — perfect for a React or mobile front-end. Here are two API routes:

API routes return JSON automatically
// routes/api.php
Route::get('/products', function () {
    return Product::all();    // automatically returned as JSON
});

Route::get('/products/{id}', function ($id) {
    return Product::findOrFail($id);
});

Both routes live in routes/api.php and return data instead of a view. The first returns Product::all(); because it is an Eloquent collection, Laravel automatically turns it into a JSON array. The second uses findOrFail($id) — it returns the one product as JSON, or, if that id does not exist, it automatically sends back a 404 "not found" response (404 is the standard code that means "page or item not found"). You never call a "convert to JSON" function yourself; returning the model is enough.

Note: Output (visiting /api/products in the browser, with two products in the database): [ { "id": 1, "name": "Keyboard", "price": "499.00", "in_stock": true }, { "id": 2, "name": "Mouse", "price": "199.00", "in_stock": true } ] The square brackets [ ] mean it is a list (array); each { } inside is one product. That is the JSON your front-end receives.

Note: Returning an Eloquent model or collection auto-converts it to JSON. This closes the loop with everything you have learned: a React front-end could fetch from this Laravel API, just like it fetched from the Express API in the MERN course.

How a front-end talks to your Laravel API, request to response:

  1. A front-end (React, a mobile app, or even the browser bar) sends a request to an API URL like /api/products.
  2. Laravel matches it to a route in routes/api.php.
  3. The route runs and returns an Eloquent model or collection.
  4. Laravel automatically converts that data to JSON and sends it back.
  5. The front-end receives the JSON and displays it — for example, rendering a list of products.

Tip: For bigger APIs, use API Resources (php artisan make:resource) to control exactly which fields are returned and how they are shaped.

Q. Where do Laravel API routes live?

Answer: API routes are defined in routes/api.php and typically return JSON for front-ends or mobile apps.

✍️ Practice

  1. Create an API route that returns all records as JSON.
  2. Fetch it from a small front-end page with JavaScript.

🏠 Homework

  1. Build a small JSON API for a resource and test it in the browser or Postman.
Want to learn this with a mentor?

CodingClave runs guided, project-based training (28-day, 45-day & 6-month batches).

Explore Training →