Vuejs Heroku deployment application error

Question

Couldn't find this issue with search. I tried to deploy my vue.js/node.js/Snipcart application with heroku but kept getting an application error. Below are the console logs. I'm not really sure what's going on. I had no trouble running the app locally on http://localhost:8080. Thanks for your time!

2018-08-11T07:07:44.802032+00:00 app[api]: Initial release by user dan@gmail.com
2018-08-11T07:07:44.802032+00:00 app[api]: Release v1 created by user dan@gmail.com
2018-08-11T07:07:45.115146+00:00 app[api]: Enable Logplex by user dan@gmail.com
2018-08-11T07:07:45.115146+00:00 app[api]: Release v2 created by user dan@gmail.com
2018-08-11T07:08:38.000000+00:00 app[api]: Build started by user dan@gmail.com
2018-08-11T07:09:04.343597+00:00 app[api]: Deploy d0dc068e by user dan@gmail.com
2018-08-11T07:09:04.343597+00:00 app[api]: Release v3 created by user dan@gmail.com
2018-08-11T07:09:04.364525+00:00 app[api]: Scaled to web@1:Free by user dan@gmail.com
2018-08-11T07:09:07.000000+00:00 app[api]: Build succeeded
2018-08-11T07:09:08.483855+00:00 heroku[web.1]: Starting process with command `npm start`
2018-08-11T07:09:10.294446+00:00 app[web.1]: npm ERR! missing script: start
2018-08-11T07:09:10.302269+00:00 app[web.1]:
2018-08-11T07:09:10.302466+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-08-11T07:09:10.302627+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-08-11T07_09_10_296Z-debug.log
2018-08-11T07:09:10.353951+00:00 heroku[web.1]: Process exited with status 1
2018-08-11T07:09:10.472803+00:00 heroku[web.1]: State changed from starting to crashed
2018-08-11T07:09:10.475796+00:00 heroku[web.1]: State changed from crashed to starting
2018-08-11T07:09:14.554504+00:00 heroku[web.1]: Starting process with command `npm start`
2018-08-11T07:09:16.939135+00:00 app[web.1]: npm ERR! missing script: start
2018-08-11T07:09:16.944995+00:00 app[web.1]:
2018-08-11T07:09:16.945175+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-08-11T07:09:16.945260+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-08-11T07_09_16_940Z-debug.log
2018-08-11T07:09:17.037163+00:00 heroku[web.1]: State changed from starting to crashed
2018-08-11T07:09:17.013310+00:00 heroku[web.1]: Process exited with status 1
2018-08-11T07:09:22.111996+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=protected-inlet-82689.herokuapp.com request_id=7197fb1e-7a43-4b08-ab4b-0be1fc41df8e fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:20.398260+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=protected-inlet-82689.herokuapp.com request_id=e1e711ff-e06c-4fab-a107-8cfe1f4bdea5 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:33.653501+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=protected-inlet-82689.herokuapp.com request_id=609f4e2f-d48c-4dfb-bdf0-d9467076ee56 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https
2018-08-11T07:09:35.360365+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=protected-inlet-82689.herokuapp.com request_id=c8066642-72a4-40f9-9bb9-d3f570306fd8 fwd="184.64.174.60" dyno= connect= service= status=503 bytes= protocol=https

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font -->

    <!-- Snipcart CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="Y2Q3MmNiOWQtZDczMS00OWYxLThlOWQtODMzNmUzYzc3MjkyNjM2Njc5OTIyOTkxMTg5MjEw" id="snipcart"></script>
    <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />


    <title>oceancloud</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <landing-page></landing-page>
  </div>
</template>

<script>
import LandingPage from './components/LandingPage.vue';
export default {
  name: 'app',
  components:{
    'landing-page':LandingPage
  }
}
</script>

<style>
</style>

LandingPage.vue

<template>
  <div id='landing-page'>
    <header>
      <nav class="navbar navbar-expand-lg navbar-light shadow" style="background-color: #d7ccc8;">
        <a id="" class="navbar-brand">Honeymask</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a id="navText" class="nav-item nav-link align-self-right" href="#">Features</a>
            <a id="navText" class="nav-item nav-link" href="#">About</a>
            <a id="navText" class="nav-item nav-link" href="#">Find Us</a>
          </div>
        </div>
      </nav>

      <div class="fullPage attachBackground">
        <div class="overlay d-flex justify-content-center">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <div class="py-5"></div>
                <p class="pt-5">
                  Harvested from the praries of northern Alberta. <br/>
                  Lorem ipsum dolor sit amet, consectetur, <br/>
                  sed do eiusmod tempor incididunt.
                </p>
              </div>
            </div>
            <div class="row pt-2 pb-5 mb-5">
              <div class="col-md-1">
                <button class="btn btn-warning shadow snipcart-add-item"
                data-item-id="1"
                data-item-name="Honeymask"
                data-item-price="15.00"
                data-item-weight="350"
                data-item-url="/"
                data-item-description="Fresh honey face mask">
                Buy Now
                </button>
              </div>
              <div class="col-md-2">
              </div>
              <div class="col-md-8 py-5 mb-5">
              </div>
            </div>
            <div class="row pb-5">
              <a class="scroll-down shadow" address="true"></a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <main></main>
    <footer></footer>

  </div>
</template>

"Starting process with command `npm start`" - your app doesn't need to be started after it's compiled, only the index.html needs to be delivered to any requesting client. There is no need for any additional code to run on your server just to deliver your frontend. — Philip Feldmann, Aug 11 '18 at 08:58
So does that mean that in package.json I put "start":"index.html"? — cozimo, Aug 11 '18 at 17:46
You don't deploy your package json. You don't need an Express or Node server for production at all. Just a normal web server that can deploy HTML like Apache — Philip Feldmann, Aug 11 '18 at 17:53

score 1 · Accepted Answer · answered Apr 04 '22 at 17:34

This happens because heruko can't deploy your project on its own it needs a server to do that so I suggest you add a server. In this case, I will show you how to configure it properly: first you need to create a .js file in the project directory where package.json is, call it server.js for example then put this code inside it :

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

app.use('/',serveStatic(path.join(__dirname,'/dist')))

const port = process.env.PORT || 8080

app.listen(port)

after that go to package.json file and add this line in the scripts :

"start":"node server.js"

this should solve your problem

Vuejs Heroku deployment application error

1 Answers1

Linked