After a few months, I decided to revisit an app that was deployed on Render and noticed it was still working fine there. However, when I tried running it locally, I encountered a 500 error response in the developer tools.
This is what my terminal displayed:
VITE v5.4.0 ready in 125 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ press h + enter to show help
10:45:13 PM [vite] http proxy error: /graphql
AggregateError
at internalConnectMultiple (node:net:1114:18)
at afterConnectMultiple (node:net:1667:5)
Here's my vite config:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true,
proxy: {
"/graphql": {
target: "http://localhost:3001",
secure: false,
changeOrigin: true,
},
},
},
test: {
environment: "happy-dom",
globals: true,
},
});
This is my server.js file:
const express = require('express');
const path = require('path');
// Import the ApolloServer class
const { ApolloServer } = require('@apollo/server');
const { expressMiddleware } = require('@apollo/server/express4');
const { authMiddleware } = require('./utils/auth');
// Import the two parts of a GraphQL schema
const { typeDefs, resolvers } = require('./schemas');
const db = require('./config/connection');
const PORT = process.env.PORT || 3001;
const server = new ApolloServer({
typeDefs,
resolvers,
formatError(error) {
console.log(error);
return error;
},
});
const app = express();
// Create a new instance of an Apollo server with the GraphQL schema
const startApolloServer = async () => {
await server.start();
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(
'/graphql',
expressMiddleware(server, {
context: authMiddleware,
})
);
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, '../client/dist')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});
}
db.once('open', () => {
app.listen(PORT, () => {
console.log(`API server running on port ${PORT}!`);
console.log(`Use GraphQL at http://localhost:${PORT}/graphql`);
});
});
};
startApolloServer();
My client-side package.json:
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
...
}
This is my server-side package.json:
{
"name": "apollo-mern",
"version": "1.0.0",
"description": "boilerplate code for MERN application",
"main": "server/server.js",
"scripts": {
"start": "node server/server.js",
"develop": "concurrently \"cd server && npm run watch\" \"cd client && npm run dev\"",
...
},
...
}
I've spent hours researching solutions and have tried adding a proxy setting in the package.json file, adjusting server and PORT settings in both the vite config and server.js, as well as updating all dependencies.