Great! Now that the PORT environment variable has been added to your Vercel project, your WebSocket server will be able to use that port value when deployed.
Let's make a small update to the server code to ensure it properly uses the PORT environment variable:
Now that your environment variable is set up, here are some important considerations for deploying your WebSocket application:
localhost:8080.wss:// instead of ws://).Deployment Options:
Would you like me to make any additional changes to the code to prepare it for deployment, such as updating the WebSocket connection URL to use an environment variable instead of hardcoding it?
Modify the frontend to use environment variables for the WebSocket URL
I'll update the frontend to use environment variables for the WebSocket URL. This will make your application more flexible across different environments.
I've updated your frontend code to use environment variables for the WebSocket URL, making your application more flexible across different environments. Here's what changed:
Dynamic WebSocket URL Generation:
Added a getWebSocketUrl() function that:
wss://) based on the current protocolNEXT_PUBLIC_WEBSOCKET_URL environment variable if availablelocalhost:8080 for development if no environment variable is setEnvironment Variable Documentation:
.env.local.example file to document the required environment variablesFor Local Development:
Create a .env.local file in your project root with:
NEXT_PUBLIC_WEBSOCKET_URL=localhost:8080For Production:
In your Vercel project settings, add an environment variable:
NEXT_PUBLIC_WEBSOCKET_URL=your-websocket-server.comFor Different Environments:
Please make sure to add the following environment variable to your project: