Lovable and Freightos integration: Step-by-Step Guide 2025

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

How to integrate Lovable with Freightos?

Step 1: Adding the Axios Dependency

Since Lovable doesn’t have a terminal, we must include any external libraries via a CDN. Open your main HTML file (for example, index.html) and insert the following script tag within the <head> section to add Axios to your project:


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

This loads Axios so that your TypeScript code can use it for HTTP requests.

Step 2: Creating the Freightos Service TypeScript File

In your Lovable project’s source folder (for example, the src folder), create a new file named freightosService.ts. This file will contain the code to interact with the Freightos API. Insert the following code into this file:


import axios from 'axios';

export interface FreightosQuote {
  id: string;
  price: number;
  transitTime: string;
  currency: string;
  // Add other fields provided by Freightos API as needed.
}

export class FreightosService {
  private apiKey: string;
  private baseUrl: string;

  constructor(apiKey: string) {
    this.apiKey = apiKey;
    // Replace with the actual Freightos API base URL if different.
    this.baseUrl = 'https://api.freightos.com';
  }

  // Fetch shipping quotes using provided parameters.
  async getShippingQuotes(params: { origin: string; destination: string; weight: number; }): Promise {
    const url = ${this.baseUrl}/quotes;
    try {
      const response = await axios.get(url, {
        params: {
          origin: params.origin,
          destination: params.destination,
          weight: params.weight
        },
        headers: {
          'Authorization': Bearer ${this.apiKey}
        }
      });
      // Assume the API returns an object with a 'quotes' field.
      return response.data.quotes;
    } catch (error) {
      console.error('Error fetching quotes:', error);
      throw error;
    }
  }
}

This code defines an interface for the quotes and a service class that uses Axios to call the Freightos API. Remember to replace the base URL or extend the interface fields as required by Freightos’ documentation.

Step 3: Creating an Integration File to Use the Freightos Service

Create a new TypeScript file called shippingCalculator.ts in the same src folder. This file will demonstrate how to instantiate the Freightos service and use it to retrieve shipping quotes. Insert the following code:


import { FreightosService } from './freightosService';

// Replace 'YOURFREIGHTOSAPI_KEY' with your actual Freightos API key.
const apiKey = 'YOURFREIGHTOSAPI_KEY';
const freightosService = new FreightosService(apiKey);

// Example function to fetch and log shipping quotes.
async function fetchQuotes() {
  try {
    const quotes = await freightosService.getShippingQuotes({
      origin: 'NYC',         // Use the appropriate origin code.
      destination: 'LON',    // Use the appropriate destination code.
      weight: 1000           // Weight in the units required by the API.
    });
    console.log('Shipping Quotes:', quotes);
    // You may add code here to update your UI with the retrieved quotes.
  } catch (error) {
    console.error('Failed to fetch shipping quotes', error);
  }
}

fetchQuotes();

This file demonstrates how to import the Freightos service, instantiate it with your API key, and call its method to retrieve shipping data.

Step 4: Integrating with the Main Application Code

To integrate the Freightos functionality with your main application, open your main TypeScript file where you handle core functionalities (for example, app.ts or main.ts). Then, import and call the function from shippingCalculator.ts so that the shipping quotes are fetched when needed. For example, you might add the following lines at the appropriate place in your main file:


import './shippingCalculator';

// Any additional initialization code for your Lovable project can go here.

This ensures that the Freightos integration is executed as part of the startup process or in response to a user action.

Step 5: Testing the Integration

After inserting the above code snippets, make sure to save all the files. Since Lovable doesn’t offer a terminal, perform the following steps to test the integration:

Open your project in the Lovable application interface.
Trigger the part of your application that executes the main file (for instance, by visiting the page where app.ts or main.ts is loaded).
Open the browser’s developer console to review the output from console.log statements.
If there are errors, verify that your API key is correct and that the Freightos API endpoint details match the Freightos documentation.

Once everything is set up correctly, you should see the shipping quotes logged in the developer console. You can then enhance the UI to display these quotes to the user.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022