API Base URL

An API Base URL is the main URL from which API endpoints are created.

For example:

https://example.com/api/

Here, https://example.com/api/ can be used as the base URL for multiple API requests.

A base URL helps keep API addresses organized and avoids repeating the same server address throughout an application.

For example:

https://example.com/api/students
https://example.com/api/users
https://example.com/api/courses

The common base is:

https://example.com/api/

The base URL and endpoint work together to form the complete API URL.

Base URL:
https://example.com/api/

Endpoint:
students

Complete URL:
https://example.com/api/students

The endpoint identifies the resource that the application wants to access.

Suppose our PHP REST API is hosted at:

https://example.com/student_api/

This can be used as the base URL for student-related endpoints.

https://example.com/student_api/students
https://example.com/student_api/login
https://example.com/student_api/register

During local development, an API may use HTTP.

http://localhost/api/

This means the API is being accessed through the local development server.

A production API will commonly use HTTPS.

https://example.com/api/

HTTPS encrypts communication between the mobile application and the server.

A production API can use a domain name as its base URL.

https://api.example.com/

The API can then provide different endpoints under this domain.

https://api.example.com/users
https://api.example.com/students
https://api.example.com/courses

Some applications use a separate subdomain for their API.

https://api.example.com/

Here, api.example.com is a subdomain dedicated to API communication.

A PHP REST API may be placed inside a folder on the server.

https://example.com/my_api/

Endpoints can then be added after the folder path.

https://example.com/my_api/students
https://example.com/my_api/users

Some APIs include a version number in the base URL.

https://example.com/api/v1/

Here, v1 represents version 1 of the API.

Example endpoints:

https://example.com/api/v1/students
https://example.com/api/v1/users

A newer version of an API can use a different base URL.

https://example.com/api/v2/

For example:

https://example.com/api/v2/students

Versioning allows different API versions to be maintained when the API structure changes.

A resource represents the type of data that an API provides.

Base URL:
https://example.com/api/

Resource:
students

Complete URL:
https://example.com/api/students

Here, students represents the student resource.

Suppose the base URL is:

https://example.com/api/

The users endpoint can be:

https://example.com/api/users

This endpoint can be used to work with user data.

A student endpoint can be created from the same base URL.

https://example.com/api/students

The same base can support multiple resources.

/api/students
/api/users
/api/courses
/api/payments

In React Native, the base URL can be stored in a constant.

const BASE_URL =
    "https://example.com/api/";

The application can use this constant when making API requests.

The base URL can be combined with an endpoint when using Fetch.

const BASE_URL =
    "https://example.com/api/";

const response = await fetch(
    BASE_URL + "students"
);

const data = await response.json();

console.log(data);

JavaScript template literals can also be used to create the complete API URL.

const BASE_URL =
    "https://example.com/api/";

const endpoint = "students";

const url = `${BASE_URL}${endpoint}`;

console.log(url);

The resulting URL is:

https://example.com/api/students

Axios can be configured with a base URL.

import axios from "axios";

const api = axios.create({
    baseURL: "https://example.com/api/"
});

Requests can then use only the endpoint path.

api.get("students");

When using Axios, configuring a base URL avoids repeating the complete server address in every request.

Without a base URL:

axios.get(
    "https://example.com/api/students"
);

axios.get(
    "https://example.com/api/courses"
);

With a base URL:

api.get("students");
api.get("courses");

During PHP REST API development, you may have a local API such as:

http://localhost/myapi/

An endpoint could be:

http://localhost/myapi/students.php

The exact URL depends on how the PHP project is organized on the development server.

When a React Native application communicates with a development API, the API address must be reachable from the device or emulator.

For example, a development API may use a server address such as:

http://192.168.1.10/myapi/

The exact address depends on the network and development environment.

The base URL identifies the common API location, while the endpoint identifies a specific resource or operation.

Base URL:
https://example.com/api/

Endpoint:
students

Complete URL:
https://example.com/api/students

Keeping these concepts separate makes API development easier to understand.

Query parameters can be added after the endpoint.

https://example.com/api/students?course=react

Here:

• https://example.com/api/ is the base URL.
• students is the endpoint.
• course=react is a query parameter.

A resource ID can be added as part of the API path.

https://example.com/api/students/25

Here, 25 can represent the ID of a particular student.

The base portion remains:

https://example.com/api/

For larger React Native applications, the API base URL can be stored in a separate configuration file.

// config.js

export const BASE_URL =
    "https://example.com/api/";

Another file can import and use it.

import { BASE_URL } from "./config";

fetch(BASE_URL + "students");

An application may use different API servers during development and production.

Development:

http://localhost/myapi/

Production:

https://example.com/api/

Keeping the base URL configurable makes changing environments easier.

• Using the wrong domain name.
• Using the wrong API folder path.
• Forgetting the API version.
• Using HTTP when the server requires HTTPS.
• Adding an incorrect endpoint path.
• Using an unreachable local server address.
• Hard-coding the same complete URL everywhere.
• Incorrectly joining the base URL and endpoint.

React Native App
       ↓
Base URL
       ↓
API Endpoint
       ↓
Complete API URL
       ↓
HTTP Request
       ↓
PHP REST API
       ↓
Database
       ↓
JSON Response
       ↓
React Native App

The base URL provides the common location from which the application can access API resources.

Suppose our base URL is:

https://example.com/api/v1/

Different endpoints can be:

https://example.com/api/v1/students
https://example.com/api/v1/users
https://example.com/api/v1/courses
https://example.com/api/v1/login

All these URLs share the same base URL.

The API Base URL is the foundation for API communication in a mobile application.

Base URL
https://example.com/api/v1/

        +
        
Endpoint
students

        =

Complete API URL
https://example.com/api/v1/students

In the upcoming lessons, we will learn how to create and use different API endpoints for students, users, authentication, and other resources.