How does meteor run server and client on same port?

Hi and apologies if this is a stupid question, but I’m new to Meteor and programming in general.

I started with Meteor straight away, without really learning much about how things work. I’ve now started playing around with MEAN/MERN to learn more about how everything works, and have a question.

When you create a server with ExpressJS, it runs on a specific port (e.g. 3000), whereas the client works on a different port (e.g. 4000).

With Meteor however, both run on the same port - 3000 by default.

Can anyone explain how and why that is?

Meteor server usually listens on port 3000 while in development, mostly by convention. In production this can still be 3000, or any other port. I’m not familiar with the concept of a client running on port 4000 at all, please elaborate if deemed important. In a typical Meteor scenario the client is a browser, and as such, it doesn’t listen on any port, it just connects to a url, in development usually http://localhost:3000. That’s it.

The client runs in the browser and so can’t bind to a port or listen for connections.
The server both provides the client bundle to the browser and processes api/rpc and pub/sub requests from the client.

Specifically for Meteor it looks like this:

  • Server listens on port 3000
  • Browser navigates to localhost:3000 and sends a HTTP GET request to the server with path /
  • Server responds by sending a html document and js/css files
  • Browser builds page with html and runs the JS client application
  • Client JS creates a new connection to the server over a websocket
  • Server accepts websocket connection
  • Client uses websocket connection to request specific data needed or inform server of modifications to data
  • Server processes requests and returns data or performs modifications

This is the same for standard node apps that don’t use websockets, but use HTTP requests to api paths instead

2 Likes

Thank you for the prompt replies.

Hmm, perhaps I’m missing something, but from the tutorials I’ve seen on MEAN/MERN, they would create and access the server (backend), using Express, on one port (e.g. localhost:3000) and then create and access the client (using React or Angular) on a different port completely.

That’s what kind of threw me off and confused me a little bit…

Yes, it’s just a different way of doing things. It’s a separated architecture, where you can put your front end code on a server, such as an S3 bucket. Often the front end code will talk to more than one back end server. Being on a different url/port is ok, but there are CORS issues to get around with that. It’s a smoother experience if the front end code is served up by the server. Meteor does it that way, and so do other systems like Nuxt and NextJS

1 Like

I see now. Thank you for the clarification! :slight_smile: