Lovable and Microsoft Dynamics 365 integration: Step-by-Step Guide 2025

 

Setting Up Dependencies

 

• Open your Lovable project and locate the file named package.json in the project root.
• Manually add the dependency for axios (a popular HTTP client) by inserting the following line in the "dependencies" section. (No terminal is available, so ensure you update this file yourself.)

  
  "axios": "0.21.1"
      

• Save the file. Lovable will recognize the updated dependency and include it automatically.

 

Creating the Dynamics Integration File

 

• In your project’s code structure, create a new folder called integrations within the src directory.
• Inside the integrations folder, create a new file named dynamicsIntegration.ts. This file will contain all the code required to connect and communicate with Microsoft Dynamics 365.
• Copy and paste the following code snippet into dynamicsIntegration.ts. This code sets up the configuration, obtains an OAuth access token from Microsoft, and provides a function to query Dynamics data.

  
  import axios from 'axios';
  
  const dynamicsConfig = {
    instanceUrl: 'https://yourInstance.crm.dynamics.com',
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
    tenantId: 'your-tenant-id',
    resource: 'https://yourInstance.crm.dynamics.com'
  };
  async function getDynamicsAccessToken(): Promise {
    const tokenUrl = https://login.microsoftonline.com/${dynamicsConfig.tenantId}/oauth2/token;
    const params = new URLSearchParams();
    params.append('granttype', 'clientcredentials');
    params.append('client_id', dynamicsConfig.clientId);
    params.append('client_secret', dynamicsConfig.clientSecret);
    params.append('resource', dynamicsConfig.resource);
    try {
      const response = await axios.post(tokenUrl, params);
      return response.data.access_token;
    } catch (error) {
      console.error('Error fetching access token:', error);
      throw error;
    }
  }
  export async function queryDynamics(entity: string, query: string): Promise {
    const accessToken = await getDynamicsAccessToken();
    const url = ${dynamicsConfig.instanceUrl}/api/data/v9.1/${entity}?${query};
    try {
      const response = await axios.get(url, {
        headers: {
          'Authorization': Bearer ${accessToken},
          'OData-MaxVersion': '4.0',
          'OData-Version': '4.0',
          'Accept': 'application/json'
        }
      });
      return response.data;
    } catch (error) {
      console.error('Error querying Dynamics 365:', error);
      throw error;
    }
  }
      

  
  


• 
  Replace the placeholder values (for instance, yourInstance, your-client-id, your-client-secret, and your-tenant-id) with the actual credentials and instance information provided by your Microsoft Dynamics 365 administrator.
  

 

Integrating Dynamics Calls in Your Main Code

 

• Open the main file of your Lovable project where you handle business logic, for example, main.ts.
• Import the queryDynamics function at the top of the file by adding:

  
  import { queryDynamics } from './integrations/dynamicsIntegration';
      

• Where you need to retrieve data from Dynamics 365, add the following code snippet as an example of usage. This snippet queries the Dynamics 365 "contacts" entity selecting full name and email fields:

  
  async function handleDynamicsData() {
    try {
      const data = await queryDynamics('contacts', '$select=fullname,emailaddress1');
      console.log('Dynamics data:', data);
    } catch (error) {
      console.error('Error in Dynamics integration:', error);
    }
  }
  
  handleDynamicsData();
      

  
  


• 
  Save the changes to integrate Microsoft Dynamics 365 API responses into your existing Lovable project.
  

 

Testing and Verification

 

• Run your Lovable project as you normally would (if there is a Run button or similar option in the Lovable environment).
• Check the console/log output to verify that the connection to Dynamics 365 is working properly and that data is being fetched successfully.
• If there are errors, review the console output and ensure that your credentials and URLs in dynamicsIntegration.ts are correct.

 

Deployment and Maintenance

 

• Once verified, the integration code will work alongside the existing logic of your Lovable project.
• For any subsequent changes (like updating credentials or modifying the queried entities), revisit dynamicsIntegration.ts and adjust as needed.
• Save and redeploy the project by using your Lovable platform's built-in deployment or update functionalities.