title: Nuxt app failed heroku deployement code=H10 error
body: <p>I'm trying to deploy my ecommerce nuxt app to heroku.  Here's exactly what I did</p>
  <pre><code>heroku create myapplok
  heroku buildpacks:set heroku/nodejs -a myapplok
  heroku config:set HOST=0.0.0.0 -a myapplok
  /// everything works fine
  </code></pre>
  <p>then</p>
  <pre><code>$ git init
  $ heroku git:remote -a myapplok
  $ git add .
  $ git commit -am &quot;make it better&quot;
  $ git push heroku master
  </code></pre>
  <p>I followed exactly what the heroku website did list. Everything works</p>
  <pre><code>remote: -----&gt; Caching build
  remote:        - node_modules
  remote:        
  remote: -----&gt; 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: -----&gt; Build succeeded!
  remote: -----&gt; Discovering process types
  remote:        Procfile declares types -&gt; web
  remote: 
  remote: -----&gt; Compressing...
  remote:        Done: 305.4M
  remote: -----&gt; 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 -&gt; master
  
  </code></pre>
  <p>Once I visit the link, however, I get an error:</p>
  <p><a href="https://i.stack.imgur.com/PeSGN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PeSGN.png" alt="enter image description here" /></a></p>
  <p>After following the heroku tail command, the app keeps crashing with the following error</p>
  <pre><code>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=&quot;App crashed&quot; method=GET path=&quot;/&quot; host=myapplok.herokuapp.com request_id=b15eba30-cc5b-4d9c-9bf1-293ae69e017d fwd=&quot;197.115.205.238&quot; dyno= connect= service= status=503 bytes= protocol=https
  
  </code></pre>
  <p>Now i know that this problem has already been solved with this command in my nuxt config app</p>
  <pre><code>server: {
          port: process.env.PORT || 4002,
      },
  </code></pre>
  <p>I did add the process.env.port command but I'm still getting this error.</p>
  <p>my nuxt config file</p>
  <pre><code>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&amp;amp;amp;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', &quot;bootstrap-vue/nuxt&quot;],
      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: &quot;token&quot;,
                global: true,
              },
              redirect: {
                  &quot;login&quot;: &quot;/account/login&quot;,
                  &quot;logout&quot;: &quot;/&quot;,
                  &quot;home&quot;: &quot;/page/ajouter-produit&quot;,
                  &quot;callback&quot;: false
              },
              endpoints: {
                login: { url: &quot;http://localhost:5000/login&quot;, method: &quot;post&quot; },
                logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
                user:false
              }
            }
          }
        },
  };
  </code></pre>
  <p>my package.json file</p>
  <pre><code>{
      &quot;name&quot;: &quot;martfury_vue&quot;,
      &quot;version&quot;: &quot;1.3.0&quot;,
      &quot;description&quot;: &quot;Martfury - Multi-purpose Ecomerce template with vuejs&quot;,
      &quot;author&quot;: &quot;nouthemes&quot;,
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;nuxt&quot;,
          &quot;build&quot;: &quot;nuxt build&quot;,
          &quot;start&quot;: &quot;nuxt start&quot;,
          &quot;generate&quot;: &quot;nuxt generate&quot;,
          &quot;heroku-postbuild&quot; : &quot; npm run build&quot;
      },
  }
  </code></pre>