Codeigniter 16: Integrating a CodeIgniter REST API with Front-End Frameworks (e.g., React or Angular)

Integrating a REST API with modern front-end frameworks such as React or Angular is a common requirement for building dynamic, data-driven web applications. In this guide, we’ll walk through how to connect a CodeIgniter REST API with React or Angular.

Why Integrate Front-End Frameworks with a REST API?
  

1. Dynamic User Interfaces: Front-end frameworks enable responsive and interactive user experiences.
2. Separation of Concerns: Decouple the front end from the back end for better scalability.
3. Reusability: APIs can serve multiple platforms, including web and mobile applications.

Step 1: Prepare Your CodeIgniter REST API
 

Ensure your API is ready and accessible:

1. Test Your Endpoints: Use tools like Postman to verify that your API endpoints return the expected data.
2. Enable CORS: Allow cross-origin requests by enabling CORS in your CodeIgniter application:

   namespace App\Filters;
   
   use CodeIgniter\HTTP\RequestInterface;
   use CodeIgniter\HTTP\ResponseInterface;
   use CodeIgniter\Filters\FilterInterface;
   
   class Cors implements FilterInterface {
       public function before(RequestInterface $request, $arguments = null) {
           $response = service('response');
           $response->setHeader('Access-Control-Allow-Origin', '*')
                    ->setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                    ->setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
       }
   
       public function after(RequestInterface $request, ResponseInterface $response, $arguments = null) {
           // No additional actions needed
       }
   }

3. Secure Your API: Implement authentication (e.g., JWT) to restrict unauthorized access.

Step 2: Setting Up React
 

1. Create a React Application: Install React using Create React App:

   npx create-react-app react-codeigniter-app
   cd react-codeigniter-app

2. Install Axios: Axios is a popular library for making HTTP requests:

   npm install axios

3. Create an API Service: Create a file src/api.js:

   import axios from 'axios';
   
   const api = axios.create({
       baseURL: 'http://localhost:8080/api', // Replace with your API URL
   });
   
   export default api;

4. Fetch Data from the API: Use the API service in a component:

   import React, { useEffect, useState } from 'react';
   import api from './api';
   
   const Users = () => {
       const [users, setUsers] = useState([]);
   
       useEffect(() => {
           api.get('/users')
              .then(response => setUsers(response.data))
              .catch(error => console.error(error));
       }, []);
   
       return (
           <div>
               <h1>User List</h1>
               <ul>
                   {users.map(user => (
                       <li key={user.id}>{user.name}</li>
                   ))}
               </ul>
           </div>
       );
   };
   
   export default Users;

5. Run the Application:

   npm start

Step 3: Setting Up Angular
 

1. Create an Angular Application: Install Angular CLI and create a new project:

   npm install -g @angular/cli
   ng new angular-codeigniter-app
   cd angular-codeigniter-app

2. Generate a Service for API Requests:

   ng generate service api

3. Configure the API Service: Edit src/app/api.service.ts:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
       providedIn: 'root',
   })
   export class ApiService {
       private baseUrl = 'http://localhost:8080/api'; // Replace with your API URL
   
       constructor(private http: HttpClient) {}
   
       getUsers(): Observable<any> {
           return this.http.get(`${this.baseUrl}/users`);
       }
   }

4. Fetch Data in a Component: Update src/app/app.component.ts:

   import { Component, OnInit } from '@angular/core';
   import { ApiService } from './api.service';
   
   @Component({
       selector: 'app-root',
       template: `
           <h1>User List</h1>
           <ul>
               <li *ngFor="let user of users">{{ user.name }}</li>
           </ul>
       `,
   })
   export class AppComponent implements OnInit {
       users: any[] = [];
   
       constructor(private apiService: ApiService) {}
   
       ngOnInit(): void {
           this.apiService.getUsers().subscribe(
               (data) => (this.users = data),
               (error) => console.error(error)
           );
       }
   }

5. Run the Application:

   ng serve

Best Practices for Integration
 

1. Environment Management: Store API URLs in environment files for flexibility.
2. Error Handling: Implement global error handling in your front-end application to handle API failures gracefully.
3. Authentication: Pass authentication tokens securely in headers for protected API endpoints.
4. Pagination and Filtering: Handle API pagination and filtering dynamically in the front-end.

Conclusion
 

Integrating a CodeIgniter REST API with modern front-end frameworks like React or Angular creates a powerful full-stack application. By following this guide, you can seamlessly connect your API to dynamic front-end interfaces. In the next blog, we’ll explore debugging common issues in CodeIgniter REST APIs.