1

My app

I have Vue3 application created with Vue CLI and added SSR support using the documentation on https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr.

The express server code uses the env variable "process.env.PORT" to determine what port to run the server on.

const port = process.env.PORT ? process.env.PORT : 8080;
server.listen(port, () => {
  console.log(`Application is accesssible on : http://localhost:${port}`);
});

I have a .env file with the PORT specified.

PORT=8080

I have changed the application using vue.config.js so that the express server.js is bundled within the application.

After building I have the following in the dist folder

  • client : contains the built client code
  • server : contains the built server code in a serverBundle.js

I run the application using

node dist/server/serverBundle.js

The application is available on GIT

https://github.com/se22as/vue3ssr-beer-sample-app-using-serverbundle

Deploying to Heroku

I am now trying to deploy this application to Heroku. It builds but does not run, the error in the logs shows

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

When the application builds on Heroku I believe the "process.env.PORT" is not set, therefore the "serverBundle.js" is created with a value of "undefined" for its port instead of an actual value.

When the application is then run, the port is invalid.

Similar App I have the same application written slightly differently so the Express Server is NOT bundled in with the server bundle. In this case the Express Server code is not built, therefore it does not have its process.env.PORT replaced with "undefined". When the application is run on Heroku the process.env.PORT has a value so the application runs perfectly OK.

ISSUE How can I deploy my Vue app with the Express Server built into the serverBundle and deploy on Heroku using the PORT specified by Heroku

se22as
  • 2,282
  • 5
  • 32
  • 54
  • 1
    Does this answer your question? [Setting the port for node.js server on Heroku](https://stackoverflow.com/questions/28706180/setting-the-port-for-node-js-server-on-heroku) – theusaf Aug 25 '21 at 21:06

1 Answers1

0

Change

const port = process.env.PORT ? process.env.PORT : 8080;

to

const port = process.env.PORT || 80;

Then remove the PORT=8080 from your .env file. Heroku will dynamically set the port by itself and the template literal expression on the console.log call will bind to that dynamic port and stop throwing the error.

(Meanwhile how were you able to have a .env file? I suppose .env configuration is set in heroku dashboard settings or via heroku config:set command)

Ilesanmi John
  • 194
  • 2
  • 4