Nuxt Heroku what to fill baseurl for it to run? - heroku

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