I came back and revisited an app I was working on a few months back, its currently still working from its deployed site on Render, but when I try to run it locally, I’m encountering this 500 error response in dev tools.
This is my terminal response
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)
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,
},
});
My server.js
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`);
});
});
};
// Call the async function to start the server
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"
},
"dependencies": {
"@apollo/client": "^3.11.4",
"@vitejs/plugin-react": "^4.3.1",
"bootstrap": "^5.3.3",
"graphql": "^16.9.0",
"jwt-decode": "^4.0.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.0",
"vite": "^5.4.0"
},
"devDependencies": {
"@testing-library/react": "^14.2.2",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"autoprefixer": "^10.4.19",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"happy-dom": "^14.3.8",
"vitest": "^2.0.5"
}
}
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"",
"install": "cd server && npm i && cd ../client && npm i",
"seed": "cd server && npm run seed",
"build": "cd client && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^8.2.2",
"react-icons": "^5.0.1"
},
"dependencies": {
"autoprefixer": "^10.4.19",
"hero-slider": "^3.2.1"
}
}
I’ve spent a few hours looking up suggestions. I’ve tried the following;
Adding a proxy setting in package json like…
"proxy": "http://localhost:5000"
Adjusting my server and PORT settings in my vite config and in the server.js
Updating all of my dependencies.
