Express server and frontend runs on same port?

I have set up an Express server to start on port 3000. However, I can also run the frontend on localhost:3000.

Does the server and frontend run on same port? I had this notion and had read somewhere that “To run these two servers(frontend and backend) on same system you need to have two different ports assigned to them. (since one port at a time can only accommodate one process).”

Also, I always associated servers with the backend. What is a frontend server?

The two processes can’t run on the same port on the same machine as you mentioned. If you tried to run the front-end, then the back-end, the back-end process would fail to run due to being unable to gain access to the port.

Usually a “front-end server” manages serving the static content to the end user. During development most modern frameworks provide a “development server” that not only serves the files to you so you can see them in your browser, but also reloads whenever you make changes. This way you don’t have to manually refresh the page all the time.

In a production environment its possible to have the back-end server (an express powered app for example) also serve the static content along with any api calls. However, this does mean nodejs (or whatever backend) is essentially “pulling double duty” in that it has to focus on providing the static content and handling api calls. Due to this, its common for larger systems to “split” the serving of static content to one server (say using software like nginx), which serves up the static content and potentially redirect api calls to the correct backend, and another “back-end” server that manages more of the dynamic data processing.

So to summarize:
A “front-end server” can be the development server used during development.
Or it could be an actual server that focuses on serving static content directly to the user. (among other things)
Also, you could have your express/back-end server serve the static content itself.

Hope that helps clear things up :slight_smile:

1 Like

Lots of things in this answer helped me understand things especially the thing about modern frameworks providing their own server . However, I am just building a plain vanilla express app and I find that both express server and the localhost frontend runs on port 3000. How is that possible?

If your building a plain vanilla express app and have it serving on port 3000, whats your front-end? Its possible the port isn’t actually 3000 for one of the processes, or are you talking about seeing localhost:3000 in your browser’s url?
Or something else?

Are you using a front-end framework of some kind along with your vanilla express app?

Yes I am talking about seeing localhost:3000 . Attaching the image here with the yellow boxes marking same port numbers on frontend and server terminal.

Yup the localhost:3000 you see in your browser is the express app returning some data to the client (from what I can tell)

So in this setup the express app is serving up the static files, and you browser is getting them at localhost:3000. There is no “front-end server” in this scenario, or there is “only” the front-end server, if you want to think of it that way*.

Main thing is, there is only 1 server and your browser is getting what its returning at localhost:3000 :slight_smile:

1 Like

Thanks a lot ! I am amazed how I never came to think about these things earlier. Its like opening a pandora’s box for me. Now , need for frontend frameworks make a lot more sense with regard to handling bigger apps .

1 Like