Express listen port won't change

[theuargb]

Bug Report

Can't run the app on a different port than 3000

Expected Behavior

Port is configurable

Current Behavior

Port isn't configurable

Possible Solution

Steps to Reproduce

export default buildConfig({
  serverURL: 'http://localhost:8080',
  ...
});

// Initialize Payload
payload.init({
  secret: process.env.PAYLOAD_SECRET,
  mongoURL: process.env.MONGODB_URI,
  express: app,
  onInit: () => {
    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)
  },
})

// Add your own express routes here
app.listen(8080);

resulting to

[20:43:56] INFO (payload): Starting Payload...
[20:43:58] INFO (payload): Payload Admin URL: http://localhost:3000/admin
[20:43:58] INFO (payload): Connected to Mongo server successfully!

[denolfe]

Hey @theuargb , I'm not able to recreate this using your steps. Updating the serverURL and app.listen lines gives me the correct link to the Payload admin UI.

[21:08:21] INFO (payload): Starting Payload...
[21:08:22] INFO (payload): Payload Admin URL: http://localhost:8080/admin
[21:08:22] INFO (payload): Connected to Mongo server successfully!

http://localhost:8080/api/users/me also resolves for me directly.

• What version of Payload?
• Is it possible an extension is interfering with rendering in the browser?

[jmikrut]

@theuargb — one more note, this is because in your provided example, you have not changed the port in the following line:

app.listen(8080);

That will sort this out!

[theuargb]

no, I have changed this line in the example above

[jmikrut]

Ah, my bad, doing too many things at once right now. This does have to do with your environment, but I am now seeing that you are properly setting 8080 in both your serverURL and your app.listen.

All that the payload.getAdminURL function does is the following:

getAdminURL = (): string => `${this.config.serverURL}${this.config.routes.admin}`;

Does this have to do with the way that you're building, say, with TypeScript? I will move this to a discussion to keep the conversation going!

[theuargb]

oh, you were completely right. just switched to another node version and back - magic had happened - port is fine).

I had some dev runs and builds before on 3000 port, mb this value was "cached" somehow. very strange behavior. Seems like no connection between error and the payload itself

[s-en-o]

Hi James and Payload team, I encountered the same issue, would be helpful if you can point me into the right direction.

For some reason when the port is hard coded it will work but when you using value from env, i.e process.env.APP_PORT it doesn't seems to work.

My yarn dev script look like this:

cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts MONGODB_URI=mongodb://localhost/db APP_PORT=3001 nodemon

I have this on my server.ts

import express from 'express';
import payload from 'payload';

require('dotenv').config();
const PORT = process.env.APP_PORT || 3000;
const app = express();

// ... other code

// Add your own express routes here
app.listen(PORT, () => {
    console.log('Port:', PORT); // this log as 3001
});

In my payload.config.ts:

const PORT = process.env.APP_PORT || 3000;

export default buildConfig({
    serverURL: `http://localhost:${PORT}`, // this shown as http://localhost:3001/admin
   // ... other code
})

when opening the url at http://localhost:3001/admin and opening up the browser's console I saw this:

It still pointing to port 3000, any idea why this happen?

Cheers,
Seno

[s-en-o]

Ok, it seems the serverURL port doesn't work when it supplied dynamically from process.env.APP_PORT but works when it's hard coded. Any work way around to make serverURL port can take argument from process.env.APP_PORT?

[s-en-o]

Removing optional serverURL from payload.config.ts seems does the trick.