API Endpoint Configuration Tutorial

Overview

This tutorial will guide you through implementing a centralized API endpoint configuration system in your Next.js + Rails application. By the end of this tutorial, you'll have a robust, maintainable system that eliminates brittle hardcoded API paths.

Prerequisites

Basic knowledge of Next.js and React
Understanding of Axios for HTTP requests
Familiarity with TypeScript (optional but recommended)

What You'll Learn

How to set up a centralized API configuration system
How to eliminate hardcoded API paths
How to add new endpoints following best practices
How to migrate existing hardcoded paths
How to maintain and debug the system

Step 1: Understanding the Problem

The Problem with Hardcoded Paths

Before implementing the solution, let's understand why hardcoded API paths are problematic:

// ❌ BAD: Hardcoded paths scattered throughout your codebase
const response = await api.get('/api/v1/users');
const response = await api.post('/api/v1/assets', data);
const response = await api.get('/api/v1/drop_zones/123');

Problems:

Brittle: Change the API structure? Update every file manually
Error-prone: Easy to make typos in paths
Inconsistent: Different developers might use different path formats
Hard to maintain: No single source of truth
Environment issues: Hard to switch between dev/staging/prod URLs

The Solution: Centralized Configuration

// ✅ GOOD: Centralized configuration
const response = await api.get(API_ENDPOINTS.USERS.LIST);
const response = await api.post(API_ENDPOINTS.ASSETS.CREATE, data);
const response = await api.get(API_ENDPOINTS.DROP_ZONES.SHOW('123'));

Benefits:

Single source of truth: All paths defined in one place
Type safety: TypeScript autocomplete and validation
Easy refactoring: Change paths in one location
Consistent: All developers use the same pattern
Maintainable: Easy to update and debug

Step 2: Setting Up the Configuration System

2.1 Create the Configuration File

Create src/lib/config.ts (or apps/web/src/lib/config.ts in a monorepo):

// src/lib/config.ts

// Environment detection function
function detectApiUrl(): string {
  if (typeof window === 'undefined') {
    // Server-side rendering
    return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8081';
  }
  
  // Client-side
  if (process.env.NODE_ENV === 'production') {
    return process.env.NEXT_PUBLIC_API_URL || 'https://your-api-domain.com';
  }
  
  return 'http://localhost:8081';
}

// Main API configuration
export const API_CONFIG = {
  BASE_URL: detectApiUrl(),
  VERSION: 'v1',
  PREFIX: '/api/v1'
} as const;

// All API endpoints defined in one place
export const API_ENDPOINTS = {
  // Authentication endpoints
  AUTH: {
    SIGN_IN: '/users/sign_in',
    SIGN_UP: '/users',
    ME: '/users/me',
    SIGN_OUT: '/users/sign_out'
  },
  
  // User management
  USERS: {
    LIST: '/users',
    SHOW: (id: string) => `/users/${id}`,
    UPDATE: (id: string) => `/users/${id}`,
    DELETE: (id: string) => `/users/${id}`
  },
  
  // Asset management
  ASSETS: {
    LIST: '/assets',
    CREATE: '/assets',
    SHOW: (id: string) => `/assets/${id}`,
    UPDATE: (id: string) => `/assets/${id}`,
    DELETE: (id: string) => `/assets/${id}`,
    SEARCH: '/assets/search',
    ADD_TAG: (id: string) => `/assets/${id}/add_tag`,
    REMOVE_TAG: (id: string) => `/assets/${id}/remove_tag`
  },
  
  // Tag management
  TAGS: {
    LIST: '/tags',
    CREATE: '/tags',
    SHOW: (id: string) => `/tags/${id}`,
    UPDATE: (id: string) => `/tags/${id}`,
    DELETE: (id: string) => `/tags/${id}`
  },
  
  // Drop Zones (example of a complex feature)
  DROP_ZONES: {
    LIST: '/drop_zones',
    CREATE: '/drop_zones',
    SHOW: (id: string) => `/drop_zones/${id}`,
    UPDATE: (id: string) => `/drop_zones/${id}`,
    DELETE: (id: string) => `/drop_zones/${id}`,
    SUBSCRIBE: (id: string) => `/drop_zones/${id}/subscribe`,
    UNSUBSCRIBE: (id: string) => `/drop_zones/${id}/unsubscribe`,
    FILES: (id: string) => `/drop_zones/${id}/files`,
    UPLOAD: (id: string) => `/drop_zones/${id}/upload`
  }
} as const;

2.2 Create the Axios Instance

Create src/lib/api.ts:

// src/lib/api.ts
import axios from 'axios';
import { API_CONFIG } from './config';

// Create axios instance with base configuration
export const api = axios.create({
  baseURL: `${API_CONFIG.BASE_URL}${API_CONFIG.PREFIX}`, // 'http://localhost:8081/api/v1'
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  withCredentials: true,
});

// Request interceptor for authentication
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('auth_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Response interceptor for error handling
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Handle unauthorized access
      localStorage.removeItem('auth_token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Step 3: Using the Configuration System

3.1 Basic Usage in Components

Here's how to use the centralized configuration in your React components:

// src/components/UserList.tsx
import React, { useState, useEffect } from 'react';
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config';

interface User {
  id: string;
  email: string;
  name: string;
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      // ✅ Using centralized configuration
      const response = await api.get(API_ENDPOINTS.USERS.LIST);
      setUsers(response.data.data || []);
    } catch (error) {
      console.error('Failed to fetch users:', error);
    } finally {
      setLoading(false);
    }
  };

  const createUser = async (userData: Partial<User>) => {
    try {
      // ✅ Using centralized configuration
      const response = await api.post(API_ENDPOINTS.USERS.CREATE, { user: userData });
      setUsers(prev => [response.data.data, ...prev]);
    } catch (error) {
      console.error('Failed to create user:', error);
    }
  };

  const updateUser = async (id: string, userData: Partial<User>) => {
    try {
      // ✅ Using centralized configuration with dynamic ID
      const response = await api.patch(API_ENDPOINTS.USERS.UPDATE(id), { user: userData });
      setUsers(prev => prev.map(user => user.id === id ? response.data.data : user));
    } catch (error) {
      console.error('Failed to update user:', error);
    }
  };

  const deleteUser = async (id: string) => {
    try {
      // ✅ Using centralized configuration with dynamic ID
      await api.delete(API_ENDPOINTS.USERS.DELETE(id));
      setUsers(prev => prev.filter(user => user.id !== id));
    } catch (error) {
      console.error('Failed to delete user:', error);
    }
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h2>Users</h2>
      {users.map(user => (
        <div key={user.id}>
          {user.name} ({user.email})
          <button onClick={() => updateUser(user.id, { name: 'Updated Name' })}>
            Update
          </button>
          <button onClick={() => deleteUser(user.id)}>
            Delete
          </button>
        </div>
      ))}
    </div>
  );
};

export default UserList;

3.2 Advanced Usage with Dynamic Endpoints

For endpoints that require parameters, use the function syntax:

// src/components/AssetDetail.tsx
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config';

const AssetDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [asset, setAsset] = useState(null);
  const [tags, setTags] = useState([]);

  useEffect(() => {
    if (id) {
      fetchAsset();
      fetchAssetTags();
    }
  }, [id]);

  const fetchAsset = async () => {
    try {
      // ✅ Dynamic endpoint with ID parameter
      const response = await api.get(API_ENDPOINTS.ASSETS.SHOW(id!));
      setAsset(response.data.data);
    } catch (error) {
      console.error('Failed to fetch asset:', error);
    }
  };

  const addTag = async (tagId: string) => {
    try {
      // ✅ Dynamic endpoint with ID parameter
      await api.post(API_ENDPOINTS.ASSETS.ADD_TAG(id!), { tag_id: tagId });
      fetchAssetTags(); // Refresh tags
    } catch (error) {
      console.error('Failed to add tag:', error);
    }
  };

  const removeTag = async (tagId: string) => {
    try {
      // ✅ Dynamic endpoint with ID parameter
      await api.delete(API_ENDPOINTS.ASSETS.REMOVE_TAG(id!), { 
        data: { tag_id: tagId } 
      });
      fetchAssetTags(); // Refresh tags
    } catch (error) {
      console.error('Failed to remove tag:', error);
    }
  };

  // ... rest of component
};

Step 4: Adding New Endpoints

4.1 Adding a New Feature

Let's say you want to add a "Notifications" feature. Here's how to do it:

Step 4.1.1: Add to Configuration

// src/lib/config.ts
export const API_ENDPOINTS = {
  // ... existing endpoints
  
  // New Notifications feature
  NOTIFICATIONS: {
    LIST: '/notifications',
    CREATE: '/notifications',
    SHOW: (id: string) => `/notifications/${id}`,
    UPDATE: (id: string) => `/notifications/${id}`,
    DELETE: (id: string) => `/notifications/${id}`,
    MARK_READ: (id: string) => `/notifications/${id}/mark_read`,
    MARK_ALL_READ: '/notifications/mark_all_read',
    UNREAD_COUNT: '/notifications/unread_count'
  }
} as const;

Step 4.1.2: Create the Component

// src/components/Notifications.tsx
import React, { useState, useEffect } from 'react';
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config';

interface Notification {
  id: string;
  title: string;
  message: string;
  read: boolean;
  created_at: string;
}

const Notifications: React.FC = () => {
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    fetchNotifications();
    fetchUnreadCount();
  }, []);

  const fetchNotifications = async () => {
    try {
      const response = await api.get(API_ENDPOINTS.NOTIFICATIONS.LIST);
      setNotifications(response.data.data || []);
    } catch (error) {
      console.error('Failed to fetch notifications:', error);
    }
  };

  const markAsRead = async (id: string) => {
    try {
      await api.patch(API_ENDPOINTS.NOTIFICATIONS.MARK_READ(id));
      setNotifications(prev => 
        prev.map(notification => 
          notification.id === id 
            ? { ...notification, read: true }
            : notification
        )
      );
      setUnreadCount(prev => Math.max(0, prev - 1));
    } catch (error) {
      console.error('Failed to mark notification as read:', error);
    }
  };

  const markAllAsRead = async () => {
    try {
      await api.patch(API_ENDPOINTS.NOTIFICATIONS.MARK_ALL_READ);
      setNotifications(prev => 
        prev.map(notification => ({ ...notification, read: true }))
      );
      setUnreadCount(0);
    } catch (error) {
      console.error('Failed to mark all notifications as read:', error);
    }
  };

  const fetchUnreadCount = async () => {
    try {
      const response = await api.get(API_ENDPOINTS.NOTIFICATIONS.UNREAD_COUNT);
      setUnreadCount(response.data.count || 0);
    } catch (error) {
      console.error('Failed to fetch unread count:', error);
    }
  };

  return (
    <div>
      <h2>Notifications ({unreadCount} unread)</h2>
      <button onClick={markAllAsRead}>Mark All as Read</button>
      
      {notifications.map(notification => (
        <div 
          key={notification.id} 
          style={{ 
            opacity: notification.read ? 0.6 : 1,
            fontWeight: notification.read ? 'normal' : 'bold'
          }}
        >
          <h3>{notification.title}</h3>
          <p>{notification.message}</p>
          <small>{new Date(notification.created_at).toLocaleString()}</small>
          {!notification.read && (
            <button onClick={() => markAsRead(notification.id)}>
              Mark as Read
            </button>
          )}
        </div>
      ))}
    </div>
  );
};

export default Notifications;

Step 5: Migrating Existing Hardcoded Paths

5.1 Finding Hardcoded Paths

Use these commands to find hardcoded API paths in your codebase:

# Find hardcoded /api/v1/ paths
grep -r "/api/v1/" src/

# Find hardcoded /v1/ paths  
grep -r "/v1/" src/

# Find any hardcoded endpoint paths
grep -r "api\.get.*'/.*'" src/
grep -r "api\.post.*'/.*'" src/
grep -r "api\.patch.*'/.*'" src/
grep -r "api\.put.*'/.*'" src/
grep -r "api\.delete.*'/.*'" src/

5.2 Migration Process

Before (❌ Hardcoded):

// src/components/OldComponent.tsx
import { api } from '@/lib/api';

const OldComponent = () => {
  const fetchData = async () => {
    // ❌ Hardcoded paths
    const users = await api.get('/api/v1/users');
    const assets = await api.get('/api/v1/assets');
    const tags = await api.get('/api/v1/tags');
  };

  const createAsset = async (data) => {
    // ❌ Hardcoded path
    return await api.post('/api/v1/assets', data);
  };

  const updateAsset = async (id, data) => {
    // ❌ Hardcoded path with string interpolation
    return await api.patch(`/api/v1/assets/${id}`, data);
  };
};

After (✅ Centralized):

// src/components/NewComponent.tsx
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config'; // ✅ Import configuration

const NewComponent = () => {
  const fetchData = async () => {
    // ✅ Using centralized configuration
    const users = await api.get(API_ENDPOINTS.USERS.LIST);
    const assets = await api.get(API_ENDPOINTS.ASSETS.LIST);
    const tags = await api.get(API_ENDPOINTS.TAGS.LIST);
  };

  const createAsset = async (data) => {
    // ✅ Using centralized configuration
    return await api.post(API_ENDPOINTS.ASSETS.CREATE, data);
  };

  const updateAsset = async (id, data) => {
    // ✅ Using centralized configuration with dynamic ID
    return await api.patch(API_ENDPOINTS.ASSETS.UPDATE(id), data);
  };
};

5.3 Migration Checklist

Add missing endpoints to API_ENDPOINTS in config.ts
Import API_ENDPOINTS in components that need it
Replace hardcoded paths with API_ENDPOINTS references
Test all API calls to ensure they work correctly
Remove any unused imports
Run the search commands to verify no hardcoded paths remain

Step 6: Best Practices and Patterns

6.1 Naming Conventions

export const API_ENDPOINTS = {
  // Use UPPER_CASE for feature names
  USERS: {
    // Use UPPER_CASE for action names
    LIST: '/users',           // GET /users
    CREATE: '/users',         // POST /users
    SHOW: (id) => `/users/${id}`,     // GET /users/:id
    UPDATE: (id) => `/users/${id}`,   // PATCH/PUT /users/:id
    DELETE: (id) => `/users/${id}`,   // DELETE /users/:id
    
    // Use descriptive names for custom actions
    CHANGE_PASSWORD: (id) => `/users/${id}/change_password`,
    UPLOAD_AVATAR: (id) => `/users/${id}/upload_avatar`,
    DEACTIVATE: (id) => `/users/${id}/deactivate`
  }
} as const;

6.2 Grouping Related Endpoints

export const API_ENDPOINTS = {
  // Group by feature/resource
  AUTH: {
    SIGN_IN: '/users/sign_in',
    SIGN_UP: '/users',
    SIGN_OUT: '/users/sign_out',
    REFRESH_TOKEN: '/users/refresh_token'
  },
  
  USER_MANAGEMENT: {
    PROFILE: '/users/profile',
    PREFERENCES: '/users/preferences',
    NOTIFICATIONS: '/users/notifications'
  },
  
  ASSET_MANAGEMENT: {
    UPLOAD: '/assets/upload',
    BULK_DELETE: '/assets/bulk_delete',
    EXPORT: '/assets/export'
  }
} as const;

6.3 Error Handling Patterns

// src/hooks/useApi.ts
import { useState } from 'react';
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config';

export const useApi = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const makeRequest = async <T>(
    requestFn: () => Promise<T>
  ): Promise<T | null> => {
    try {
      setLoading(true);
      setError(null);
      const result = await requestFn();
      return result;
    } catch (err: any) {
      const errorMessage = err.response?.data?.message || 'An error occurred';
      setError(errorMessage);
      return null;
    } finally {
      setLoading(false);
    }
  };

  const fetchUsers = () => 
    makeRequest(() => api.get(API_ENDPOINTS.USERS.LIST));

  const createUser = (data: any) => 
    makeRequest(() => api.post(API_ENDPOINTS.USERS.CREATE, data));

  return {
    loading,
    error,
    fetchUsers,
    createUser
  };
};

Step 7: Testing and Debugging

7.1 Testing API Calls

// src/__tests__/api.test.ts
import { api } from '@/lib/api';
import { API_ENDPOINTS } from '@/lib/config';

// Mock axios
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe('API Configuration', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('should use correct base URL', () => {
    expect(api.defaults.baseURL).toBe('http://localhost:8081/api/v1');
  });

  it('should construct correct endpoint URLs', () => {
    expect(API_ENDPOINTS.USERS.LIST).toBe('/users');
    expect(API_ENDPOINTS.USERS.SHOW('123')).toBe('/users/123');
    expect(API_ENDPOINTS.ASSETS.ADD_TAG('456')).toBe('/assets/456/add_tag');
  });

  it('should make correct API calls', async () => {
    mockedAxios.get.mockResolvedValue({ data: { users: [] } });
    
    await api.get(API_ENDPOINTS.USERS.LIST);
    
    expect(mockedAxios.get).toHaveBeenCalledWith('/users');
  });
});

7.2 Debugging Tips

Check Network Tab

Open browser DevTools → Network tab
Look for requests to the correct base URL (http://localhost:8081/api/v1/...)
Verify endpoint paths match your configuration

Console Logging

// Add temporary logging to debug API calls
const fetchUsers = async () => {
  console.log('🔍 Fetching users from:', API_ENDPOINTS.USERS.LIST);
  console.log('🔍 Full URL will be:', `${api.defaults.baseURL}${API_ENDPOINTS.USERS.LIST}`);
  
  const response = await api.get(API_ENDPOINTS.USERS.LIST);
  console.log('✅ Response:', response.data);
  return response.data;
};

Environment Variables

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8081

# .env.production
NEXT_PUBLIC_API_URL=https://your-api-domain.com

Step 8: Advanced Features

8.1 Environment-Specific Configuration

// src/lib/config.ts
const getApiConfig = () => {
  const environment = process.env.NODE_ENV;
  
  switch (environment) {
    case 'development':
      return {
        BASE_URL: 'http://localhost:8081',
        TIMEOUT: 10000,
        RETRY_ATTEMPTS: 3
      };
    case 'staging':
      return {
        BASE_URL: 'https://staging-api.yourdomain.com',
        TIMEOUT: 15000,
        RETRY_ATTEMPTS: 2
      };
    case 'production':
      return {
        BASE_URL: 'https://api.yourdomain.com',
        TIMEOUT: 20000,
        RETRY_ATTEMPTS: 1
      };
    default:
      return {
        BASE_URL: 'http://localhost:8081',
        TIMEOUT: 10000,
        RETRY_ATTEMPTS: 3
      };
  }
};

export const API_CONFIG = {
  ...getApiConfig(),
  VERSION: 'v1',
  PREFIX: '/api/v1'
} as const;

8.2 Type-Safe Endpoints

// src/lib/types.ts
export interface ApiEndpoint {
  path: string;
  method: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';
  requiresAuth?: boolean;
}

export interface ApiEndpoints {
  [key: string]: ApiEndpoint | ((...args: any[]) => ApiEndpoint);
}

// src/lib/config.ts
export const API_ENDPOINTS: ApiEndpoints = {
  USERS: {
    LIST: { path: '/users', method: 'GET' },
    CREATE: { path: '/users', method: 'POST', requiresAuth: true },
    SHOW: (id: string) => ({ path: `/users/${id}`, method: 'GET' }),
    UPDATE: (id: string) => ({ path: `/users/${id}`, method: 'PATCH', requiresAuth: true }),
    DELETE: (id: string) => ({ path: `/users/${id}`, method: 'DELETE', requiresAuth: true })
  }
} as const;

8.3 Request/Response Interceptors

// src/lib/api.ts
import axios from 'axios';
import { API_CONFIG } from './config';

export const api = axios.create({
  baseURL: `${API_CONFIG.BASE_URL}${API_CONFIG.PREFIX}`,
  timeout: API_CONFIG.TIMEOUT,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

// Request interceptor
api.interceptors.request.use(
  (config) => {
    // Add timestamp to prevent caching
    config.params = {
      ...config.params,
      _t: Date.now()
    };
    
    // Add authentication token
    const token = localStorage.getItem('auth_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    // Log request in development
    if (process.env.NODE_ENV === 'development') {
      console.log(`🚀 ${config.method?.toUpperCase()} ${config.url}`, config.data);
    }
    
    return config;
  },
  (error) => {
    console.error('Request error:', error);
    return Promise.reject(error);
  }
);

// Response interceptor
api.interceptors.response.use(
  (response) => {
    // Log response in development
    if (process.env.NODE_ENV === 'development') {
      console.log(`✅ ${response.config.method?.toUpperCase()} ${response.config.url}`, response.data);
    }
    return response;
  },
  (error) => {
    // Log error in development
    if (process.env.NODE_ENV === 'development') {
      console.error(`❌ ${error.config?.method?.toUpperCase()} ${error.config?.url}`, error.response?.data);
    }
    
    // Handle specific error cases
    if (error.response?.status === 401) {
      localStorage.removeItem('auth_token');
      window.location.href = '/login';
    }
    
    if (error.response?.status === 403) {
      // Handle forbidden access
      console.error('Access forbidden');
    }
    
    if (error.response?.status >= 500) {
      // Handle server errors
      console.error('Server error occurred');
    }
    
    return Promise.reject(error);
  }
);

Step 9: Maintenance and Updates

9.1 Regular Maintenance Tasks

Monthly Review: Check for any new hardcoded paths that might have been introduced
Endpoint Updates: When backend API changes, update only the configuration file
Performance Monitoring: Monitor API response times and error rates
Documentation Updates: Keep endpoint documentation current

9.2 Adding New Features

When adding a new feature:

Plan the endpoints you'll need
Add them to API_ENDPOINTS in config.ts
Create components using the centralized configuration
Test thoroughly to ensure all endpoints work
Update documentation if needed

9.3 Common Issues and Solutions

Issue: 404 Errors

Solution: Check that the endpoint is defined in API_ENDPOINTS and the path is correct

Issue: CORS Errors

Solution: Verify the BASE_URL is correct for your environment

Issue: Authentication Failures

Solution: Check that the token is being added correctly in the request interceptor

Issue: TypeScript Errors

Solution: Ensure you're importing API_ENDPOINTS correctly and using the right types

Conclusion

By following this tutorial, you've implemented a robust, maintainable API endpoint configuration system that:

✅ Eliminates brittle hardcoded paths
✅ Provides a single source of truth for all API endpoints
✅ Makes it easy to add new endpoints
✅ Simplifies maintenance and updates
✅ Improves code consistency across your team
✅ Reduces bugs and typos in API calls

Next Steps

Apply this system to your existing codebase
Train your team on the new patterns
Set up monitoring to track API performance
Create automated tests for your API configuration
Document any custom patterns specific to your application

Resources

Remember: The key to success is consistency. Once you establish these patterns, stick to them throughout your application. Your future self (and your teammates) will thank you!

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
README.md		README.md

scervera/api-configuration-tutorial

Folders and files

Latest commit

History

Repository files navigation

API Endpoint Configuration Tutorial

Overview

Prerequisites

What You'll Learn

Step 1: Understanding the Problem

The Problem with Hardcoded Paths

The Solution: Centralized Configuration

Step 2: Setting Up the Configuration System

2.1 Create the Configuration File

2.2 Create the Axios Instance

Step 3: Using the Configuration System

3.1 Basic Usage in Components

3.2 Advanced Usage with Dynamic Endpoints

Step 4: Adding New Endpoints

4.1 Adding a New Feature

Step 4.1.1: Add to Configuration

Step 4.1.2: Create the Component

Step 5: Migrating Existing Hardcoded Paths

5.1 Finding Hardcoded Paths

5.2 Migration Process

Before (❌ Hardcoded):

After (✅ Centralized):

5.3 Migration Checklist

Step 6: Best Practices and Patterns

6.1 Naming Conventions

6.2 Grouping Related Endpoints

6.3 Error Handling Patterns

Step 7: Testing and Debugging

7.1 Testing API Calls

7.2 Debugging Tips

Check Network Tab

Console Logging

Environment Variables

Step 8: Advanced Features

8.1 Environment-Specific Configuration

8.2 Type-Safe Endpoints

8.3 Request/Response Interceptors

Step 9: Maintenance and Updates

9.1 Regular Maintenance Tasks

9.2 Adding New Features

9.3 Common Issues and Solutions

Issue: 404 Errors

Issue: CORS Errors

Issue: Authentication Failures

Issue: TypeScript Errors

Conclusion

Next Steps

Resources

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Packages