Production Build Not Displaying in Browser

[peniswafflexd]

So I've basically got payload set up the way I would like now. However, after trying to make a production build:
yarn build || npm run build
and then serving said build:
serve -s build -l 3000
Nothing will display in the browser, it seems as though there is nothing there at all, none of the css or js files are showing when I try navigate to the, although I'm not getting a 404 or other error status code. There is just a blank page.

I am serving the build package to the same port and address, so it shouldn't be an issue with any of the hardcoded environment variables.

I can't figure out for the life of me what the cause is, here is my build config and server.js files:
** config **

export default buildConfig({
    serverURL: 'http://localhost:3000',
    admin: {
        user: Users.slug,
        scss: resolve(__dirname, 'vars.scss'),
        css: resolve(__dirname, 'stylesheet.scss'),
    },
    collections: [
        Categories,
        Posts,
        Tags,
        Users,
        HeaderLinks,
        Pages,
        SocialLinks,
        Media,
        AboutCard,
        EmailList
    ],
    upload: {
        limits: {
            fileSize: 500000000, // 5MB, written in bytes
        }
    },
    csrf: [
        'http://localhost:3001'
    ],
    cors: [
        'http://localhost:3001'
    ],
});

** server.js **

const transport = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: 25,
  tls:{
    rejectUnauthorized: false
  }
});

transport.use('compile', inlineBase64())
// 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()}`);
  },
  email: {
    fromName: "Devon",
    fromAddress: "Devon <devon@myEmailServer>",
    transport
  }
});

app.get('/unsubscribe/:emailID', (req, res) => {
  fetch(process.env.HOST+`/api/emaillist/${req.params.emailID}`, {
    method: 'DELETE'
  }).then(() => {
    res.status(200)
    res.send("You've successfully unsubscribed")
  }).catch(err => {
    res.status(503)
    res.send({error: err})
  })
})

app.listen(process.env.PORT || 3000)

[jmikrut]

Hey @peniswafflexd —

Few questions for you:

1. What route are you hitting in your browser to receive a blank page?
2. What does your build script do? Can you paste your package.json, or at least the scripts from it?

There is nothing wrong with your Payload config, or your server, from what I can see. It's probably related to your serve command or your build command.

Let me know!

[DanRibbens]

From a windows machine it is working using yarn serve. I don't have an m1 mac to try. I'm testing on wsl and npm next.

[peniswafflexd]

Ahh, so yes, I can serve it fine using yarn serve. My issue is that I created a production build, ‘yarn build’ so I can serve the static files directly, opposed to running a service.
basically I was hoping not to have to actually run node on my server and just serve the static files via Apache virtual hosts

[DanRibbens]

That would be okay to serve the /admin route statically.

I can see that you were able to build that, it is in your repo here: https://github.com/peniswafflexd/payload_blog/blob/main/build/index.html

You'll still need node for the API of course.

[peniswafflexd]

Ahh I see… well it looks like I’ve had us chasing down a rabbit hole for no reason then haha sorry about that, I obviously didn’t think too hard when I thought that I’d be able to host the entire backend statically….

Well I appreciate all the help nonetheless!

[DanRibbens]

Ah, no worries!

[DanRibbens]

Hi @peniswafflexd,
Try removing the serverURL. I think the production it won't be on port 3000 and this is likely the issue. Payload can start up without the serverURL property so just take that out and see what happens.

[peniswafflexd]

Sure I can take it out, but it was being hosted on port 3000 still. Ill try it out

[peniswafflexd]

I'm actually getting build errors if i try to remove the serverURL:

devon@Devons-MacBook-Pro personal-blog % npm run build

> [email protected] build
> payload build

[13:01:07] ERROR (payload): There were 2 errors validating your Payload config
[13:01:07] ERROR (payload): 1: "serverURL" is required
[13:01:07] ERROR (payload): 2: "csrf[1]" must not be a sparse array item

[DanRibbens]

In a more recent version of Payload serverURL is no longer required, after you upgrade it should build.

[peniswafflexd]

I just updated to v0.16.2 and removed the serverURL and it did build, but sadly it didnt seem to fix the issue