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 [email protected]
2018-08-11T07:07:44.802032+00:00 app[api]: Release v1 created by user [email protected]
2018-08-11T07:07:45.115146+00:00 app[api]: Enable Logplex by user [email protected]
2018-08-11T07:07:45.115146+00:00 app[api]: Release v2 created by user [email protected]
2018-08-11T07:08:38.000000+00:00 app[api]: Build started by user [email protected]
2018-08-11T07:09:04.343597+00:00 app[api]: Deploy d0dc068e by user [email protected]
2018-08-11T07:09:04.343597+00:00 app[api]: Release v3 created by user [email protected]
2018-08-11T07:09:04.364525+00:00 app[api]: Scaled to web@1:Free by user [email protected]
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
– Philip Feldmann, Commented Aug 11, 2018 at 8:58
So does that mean that in package.json I put "start":"index.html"? — cozimo
– cozimo, Commented Aug 11, 2018 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
– Philip Feldmann, Commented Aug 11, 2018 at 17:53

Wassim Mriri · Accepted Answer · 2022-04-04 17:34:30Z

1

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

answered Apr 4, 2022 at 17:34

Wassim Mriri

786 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs Heroku deployment application error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related