Astro: How to proxy service calls

Viewed 156

I am setting up an Astro site which will display data fetched from a simple service running on the same host but a different port.

The service is a simple Express app. server.js:

const express = require('express')
const app = express()
const port = 3010

const response = {
  message: "hello"
}
app.get('/api/all', (_req, res) => {
  res.send(JSON.stringify(response))
})

app.listen(port, () => {
  console.log(`listening on port ${port}`)
})

Since the service is running on port 3010, which is different from the Astro site, I configure a server proxy at the Vite level. astro.config.mjs:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis'
        }
      }
    },
    server: {
      proxy: {
        '/api/all': 'http://localhost:3010'
      }
    }
  },
});

Here is where I am trying to invoke the service. index.astro:

---
const response = await fetch('/api/all');
const data = await response.json();
console.log(data);
---

When I run yarn dev I get this console output:

Response {
  size: 0,
  [Symbol(Body internals)]: {
    body: Readable {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      _read: [Function (anonymous)],
      [Symbol(kCapture)]: false
    },
    stream: Readable {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      _read: [Function (anonymous)],
      [Symbol(kCapture)]: false
    },
    boundary: null,
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    type: 'default',
    url: undefined,
    status: 404,
    statusText: '',
    headers: { date: 'Tue, 02 Aug 2022 19:41:02 GMT' },
    counter: undefined,
    highWaterMark: undefined
  }
}

It looks like the network request is returning a 404.

I'm not seeing in the doc much more about server configuration. Am I going about this the right way?

I have this working correctly with a vanilla Vite app and the same config/setup.

How can I proxy local service calls for an Astro application?

0 Answers
Related