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:
{ "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:
// 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:
- A front-end (React, a mobile app, or even the browser bar) sends a request to an API URL like
/api/products. - Laravel matches it to a route in
routes/api.php. - The route runs and returns an Eloquent model or collection.
- Laravel automatically converts that data to JSON and sends it back.
- 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?
✍️ Practice
- Create an API route that returns all records as JSON.
- Fetch it from a small front-end page with JavaScript.
🏠 Homework
- Build a small JSON API for a resource and test it in the browser or Postman.