javascriptelectronipcrendereripcmain

How to send parameters to API url in electron?

I have created an Electron app and I am new at this. I am trying to get inputs from a user using HTML. Then, I want to send these inputs to main.js after clicking the button. In main.js I am trying to send a port using endpoint. This is HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron REST API</title>
</head>
<body>
  <h1>Hello from Electron!</h1>
  

  <label for="dx">dx:</label>
    <input type="number" id="dxInput"><br>

    <button id="fetchButton" >Submit</button>
    <div id="dataDisplay"></div>
    
    <script src="./renderer.js"></script>
</body>
</html>

This is main.js:

const { app, BrowserWindow,  } = require('electron');
const axios = require('axios');
const express = require('express');
const { dialog, ipcMain } = require("electron");
var http = require('http');

let mainWindow;
const appPort = 3000; // Change the port number if needed

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      
      
    }, });

    mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Start the Express.js server
  const app = express(); 

ipcMain.on('fetch-data', async (event, data) => {
  const { dx} = data;

 try {
    const response = await axios.get('http://localhost:3000/api/data2', {
      params: { dx }
    });
  
    const responseData = response.data;
    console.log('Received data from API:', responseData);
  
    // You can send the API response data back to the renderer process if needed
    mainWindow.webContents.send('api-response', responseData);
  } catch (error) {
    console.error('Error sending data to API:', error);
  
    // Log specific error details
    if (error.response) {
      console.error('Response Data:', error.response.data);
      console.error('Response Status:', error.response.status);
    } else if (error.request) {
      console.error('No response received:', error.request);
    } else {
      console.error('Error:', error.message);
    }
  }
  
});

mainWindow.webContents.openDevTools()
  
});

and this is renderer.js:

const { ipcRenderer } = require('electron');

const fetchButton = document.getElementById('fetchButton');
const dxInput = document.getElementById('dxInput');

fetchButton.addEventListener('click', async () => {
    const dx = parseFloat(dxInput.value);

    ipcRenderer.send('fetch-data', { dx });
});

For now, I can send the parameter from renderer.js to main.js. However, I can not send the parameter to API URL. When I tried this I got this error:

Error sending data to API: AxiosError: Request failed with status code 404

How can I fix this problem?

Solution

  • Finally, I solved the problem.

    const response = await axios.get('http://localhost:3000/api/data2', { params: { dx }

    Instead of using axios.get, I used get method (endpoint) for this. And get method fixed the problem. I added the code inside

    ipcMain.on('fetch-data', async (event, data) => {

    this function. The code is:

    app.get('/api/data', (req, res) => {
          // Replace this with your logic to get data
          
          const responseData = data;
          res.json(responseData);
        });
      
        app.listen(appPort, () => {
          console.log(`API server is running on 
         http://localhost:${appPort}`);
        });