Nuxt Heroku what to fill baseurl for it to run?

Question

This is my nuxt.config.js file

env: {
  baseUrl: process.env.BASE_URL || "http://localhost:3000"
},
  
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  baseURL: process.env.baseUrl,
  browserBaseURL: "http://localhost:3000"
},

Heroku logs

Listening on: http://localhost:21411/
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch.

What's env variable I need to add to heroku admin for it to work, the port heroku is hosting on keeps changing each time I try to run it.

EDIT here is my Nuxt config:

     export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    script: [
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-core.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-service.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-ui.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-clustering.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-data.js"
      }
    ],
    title: "Restaurants-D-System",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [
      {
        rel: "stylesheet",
        type: "text/css",
        href: "https://js.api.here.com/v3/3.1/mapsjs-ui.css"
      },
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
        rel: "stylesheet"
      },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Ribeye&display=swap",
        rel: "stylesheet"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  CSS: ["~/assets/normalize.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/style-resources",
    // https://go.nuxtjs.dev/buefy
    "nuxt-buefy",
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios"
  ],
  styleResources: {
    scss: ["./assets/main.scss"],
    CSS: ["./assets/normalize.css"]
  },


  axios: {
    baseURL: "http://localhost:4000" // Used as fallback if no runtime config is provided
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
  serverMiddleware: [{ path: "/api", handler: "~/api/index.js" }],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
};

and here is my json:

{
  
  "version": "1.0.0",
  "engines": {
    "node": "14.16.1"
  },
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "@vonage/server-sdk": "^2.10.8",
    "core-js": "^3.9.1",
    "express": "^4.17.1",
    "firebase-admin": "^9.8.0",
    "infobip-nodejs": "^0.1.0-alpha.1",
    "lodash.debounce": "^4.0.8",
    "normalize.css": "^8.0.1",
    "nuxt": "^2.2.0",
    "nuxt-buefy": "^0.4.4"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^10.2.0"
  }
}

and here is my Express javascript file API:

const express = require("express");
const sms = require("./infoSms/index");
const router = require("../api/routes/routesIndex");
const { db, auth, timestamp } = require("./dataBase/index");

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
port = process.env.PORT || 3000;

app.use(router);

if (require.main === module) {
  app.listen(port, () => {
    console.log(`server is up ` + port);
  });
} else {
  console.log("server is up by Nuxtjs");
}
module.exports = app;

Answer 1

The setup is explained pretty well in the official @nuxtjs/axios documentation

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://localhost:4000', // Used as fallback if no runtime config is provided
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
}

Also, as explained there

The use of runtime config is mandatory in case of using environment variables in production, otherwise, the values will be hard coded during build and won't change.

---

Usually, webservices are running on port 80 (https) or 443 (https), double-check that this is what you do have in your dashboard (https://dashboard.heroku.com/apps/<your-app>/settings). Even tho you probably don't even need to specify it.

Give a read to the deployment page to see the few steps required so far aka

heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
git push heroku master // git push heroku develop:master if working on develop and not master

Moreover, prefer using this approach for env variables in Nuxt: https://stackoverflow.com/a/67705541/8816585