Nuxt app failed heroku deployement code=H10 error

I’m trying to deploy my ecommerce nuxt app to heroku. Here’s exactly what I did

heroku create myapplok
heroku buildpacks:set heroku/nodejs -a myapplok
heroku config:set HOST=0.0.0.0 -a myapplok
/// everything works fine

then

$ git init
$ heroku git:remote -a myapplok
$ git add .
$ git commit -am "make it better"
$ git push heroku master

I followed exactly what the heroku website did list. Everything works

remote: -----> Caching build
remote:        - node_modules
remote:        
remote: -----> Pruning devDependencies
remote:        removed 61 packages and audited 1552 packages in 10.915s
remote:        
remote:        80 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 991 vulnerabilities (2 low, 294 moderate, 694 high, 1 critical)
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 305.4M
remote: -----> Launching...
remote:  !     Warning: Your slug size (305 MB) exceeds our soft limit (300 MB) which may affect boot time.
remote:        Released v6
remote:        https://myapplok.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/myapplok.git
   9cca5b7d..2e1cd57d  master -> master

Once I visit the link, however, I get an error:

After following the heroku tail command, the app keeps crashing with the following error

2021-09-06T09:39:31.000000+00:00 app[api]: Build succeeded
2021-09-06T09:39:33.604061+00:00 heroku[web.1]: Starting process with command `: nuxt start`
2021-09-06T09:39:35.640203+00:00 heroku[web.1]: Process exited with status 0
2021-09-06T09:39:35.707305+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-06T09:39:35.716203+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-06T09:39:48.890905+00:00 heroku[web.1]: Starting process with command `: nuxt start`
2021-09-06T09:39:51.075210+00:00 heroku[web.1]: Process exited with status 0
2021-09-06T09:39:51.245879+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-06T09:39:52.472722+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=myapplok.herokuapp.com request_id=b15eba30-cc5b-4d9c-9bf1-293ae69e017d fwd="197.115.205.238" dyno= connect= service= status=503 bytes= protocol=https

Now i know that this problem has already been solved with this command in my nuxt config app

server: {
        port: process.env.PORT || 4002,
    },

I did add the process.env.port command but I’m still getting this error.

my nuxt config file

export default {
    ssr: false,
    head: {
        titleTemplate: 'Lokazz',
        title: 'Lokazz',
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content:
                    'Lokazz'
            }
        ],
        link: [
            {
                rel: 'stylesheet',
                href:
                    'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
            }
        ]
    },

    css: [
        'swiper/dist/css/swiper.css',
        '~/static/fonts/Linearicons/Font/demo-files/demo.css',
        '~/static/fonts/font-awesome/css/font-awesome.css',
        '~/static/css/bootstrap.min.css',
        '~/assets/scss/style.scss'
    ],

    plugins: [
        { src: '~plugins/vueliate.js', ssr: false },
        { src: '~/plugins/swiper-plugin.js', ssr: false },
        { src: '~/plugins/vue-notification.js', ssr: false },
        { src: '~/plugins/axios.js'},
        { src: '~/plugins/lazyLoad.js', ssr: false },
        { src: '~/plugins/mask.js', ssr: false },
        { src: '~/plugins/toastr.js', ssr: false },
    ],


    buildModules: [
        '@nuxtjs/vuetify',
        '@nuxtjs/style-resources',
        'cookie-universal-nuxt'
    ],

    styleResources: {
        scss: './assets/scss/env.scss'
    },

    modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next', "bootstrap-vue/nuxt"],
    bootstrapVue: {
        bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
        bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
       
    },

    i18n: {
        locales: [
            { code: 'en', file: 'en.json' },
            { code: 'fr', file: 'fr.json' }
        ],
        strategy: 'no_prefix',
        fallbackLocale: 'en',
        lazy: true,
        defaultLocale: 'en',
        langDir: 'lang/locales/'
    },

    router: {
        linkActiveClass: '',
        linkExactActiveClass: 'active',
    },

    server: {
        port: process.env.PORT || 4002,
    },
    auth: {
        strategies: {
          local: {
            token: {
              property: "token",
              global: true,
            },
            redirect: {
                "login": "/account/login",
                "logout": "/",
                "home": "/page/ajouter-produit",
                "callback": false
            },
            endpoints: {
              login: { url: "http://localhost:5000/login", method: "post" },
              logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
              user:false
            }
          }
        }
      },
};

my package.json file

{
    "name": "martfury_vue",
    "version": "1.3.0",
    "description": "Martfury - Multi-purpose Ecomerce template with vuejs",
    "author": "nouthemes",
    "private": true,
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "heroku-postbuild" : " npm run build"
    },
}

Answer

Remove heroku config:set HOST=0.0.0.0 -a myapplok

because your nuxt app runs in configured to run on localhost