Netlify & SPA Integration

ImgNodus is fully compatible with static sites and SPAs hosted on Netlify, Vercel, or any CDN. Secure your API key using environment variables or serverless functions.

Setting Up on Netlify

In your Netlify Dashboard → Site Settings → Build & Deploy → Environment Variables, add:

IMGNODUS_API_KEY = IR_KEY_xxxxxxxxxxxxxxxxxxCopy

Option A: Netlify Function (Recommended)

Create netlify/functions/upload.js to proxy requests and hide your API key:

const fetch = require('node-fetch');
const FormData = require('form-data');

exports.handler = async (event) => {
  const body = Buffer.from(event.body, 'base64');
  
  const fd = new FormData();
  fd.append('image', body, 'upload.png');

  const res = await fetch('https://imgnodus-api-411853553644.us-central1.run.app/v1/upload', {
    method: 'POST',
    headers: {
      'X-API-Key': process.env.IMGNODUS_API_KEY,
      ...fd.getHeaders()
    },
    body: fd
  });

  const data = await res.json();
  return { statusCode: 200, body: JSON.stringify(data) };
};Copy

Option B: Vite / React Frontend

Call via /.netlify/functions/upload from your frontend — your key never leaves the server:

async function uploadImage(file) {
  const formData = new FormData();
  formData.append('image', file);

  const res = await fetch('/.netlify/functions/upload', {
    method: 'POST',
    body: formData
  });
  return await res.json();
}Copy

Option C: Vercel API Route

// pages/api/upload.js (Next.js / Vercel)
export default async function handler(req, res) {
  // Forward multipart/form-data to ImgNodus
  const response = await fetch('https://imgnodus-api-411853553644.us-central1.run.app/v1/upload', {
    method: 'POST',
    headers: { 'X-API-Key': process.env.IMGNODUS_API_KEY },
    body: req.body
  });
  const data = await response.json();
  res.status(200).json(data);
}Copy