MacOS Port Conflicts in Development

It’s been a while since I last worked with Node.js and React. I’m trying to build a hobby project using these technologies again. Last time, I created a simple UI to call the Pokemon Trading Card API. This time, I’m trying to build a full-stack project using PERN (Postgresql, Express, React, and Node JS). It seems like my skills have gotten a bit rusty, so I’ve been stuck on localhost for a while. The last time I built a full-stack project was during my Fintech course, where I built one using the typical MERN stack. That time, I built on a Windows machine. This time, I’m using a Mac, and it’s been a bit of a challenge. I thought both Windows and Mac were the same, but they’re not!

Localhost for backend

I’m having a bit of a snag. It seems like I can’t use port 5000 on my Mac because it’s reserved for MacOS Control Center. I’m puzzled why I keep having trouble pushing my code to both my browser and terminal on Mac, but I can successfully curl and retrieve my output from my Docker container. Apparently, the main culprit is this port 5000, and a quick check also shows that port 7000 is another port that was reserved. So, I’ll keep that in mind and never use those two ports for development again.

Localhost for frontend

This is another little thing that seems simple but might have slipped my mind. When I build my React app using Vite, I need to make a small change to the vite.config.ts file to forward the port from the container to my local machine.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    host: true
  }
})