Trying to host a VueJS app on Heroku. Getting "npm ERR! missing script: start" in heroku logs and "Application error" on my page

Question

I just put my site up on Heroku. Expected result: A live version of my VueJS app, "Twitter Clone". The data got there by syncing my GitHub to Heroku.

Now I have a problem.

https://rolys-twitter-clone.herokuapp.com/ This is my site, not much to see because there's an error message

It reads:

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command heroku logs --tail

So I went into the heroku logs for my app (by typing "heroku logs --tail --app my-app-name" into cmd, for anyone wondering how to check them)... and I found error messages.

The specific error I get is buried in this log data:

2020-01-09T04:17:41.201106+00:00 heroku[web.1]: Starting process with command `npm start`
2020-01-09T04:17:44.040787+00:00 heroku[web.1]: State changed from starting to crashed
2020-01-09T04:17:43.902074+00:00 app[web.1]: npm ERR! missing script: start
2020-01-09T04:17:43.921370+00:00 app[web.1]:
2020-01-09T04:17:43.925728+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-01-09T04:17:43.926046+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-01-09T04_17_43_903Z-debug.log
2020-01-09T04:17:44.002368+00:00 heroku[web.1]: Process exited with status 1

"npm ERR! missing script: start"

Dunno what to do.

Solutions I've tried from various other StackOverflow pages about this error: 1) Adding "scripts": { "start": "node app.js" } to my package.json's scripts section, reuploading to GitHub, redeploying. Result: "Error: Cannot find module '/app/app.js'" (No surprise!).

2) Adding "scripts": { "start": "npm run serve" } to my package.json's scripts section, reup, redeploy. I figure npm run serve works for the local server, why not try it? Result: "sh: 1: vue-cli-service: not found // npm ERR! code ELIFECYCLE // npm ERR! syscall spawn "

3) Adding "scripts": { "start": "node server.js" }. Result: Error: Cannot find module '/app/server.js'

Note I've been through about 4 different StackOverflow links about this error, nothing seems relevant (I've even tried a few solutions, as shown above). They're all for other versions of this bug as far as I can tell.

If this page contains a solution, I can't tell how to make it work for my situation. "Where index.js is your entry point"? What's the VueJS equivalent of index.js? My project's root directory only contains: App.vue, db.js, main.js, index.html (under the public folder), and some config files.

Send help! Thanks in advance everyone who reads this.

edit: Following Muljayan's advice I now get:

2020-01-09T06:43:41.857621+00:00 heroku[web.1]: Starting process with command `npm start`
2020-01-09T06:43:44.546969+00:00 heroku[web.1]: State changed from starting to crashed
2020-01-09T06:43:44.413480+00:00 app[web.1]:
2020-01-09T06:43:44.413503+00:00 app[web.1]: > twitter-clone@0.1.0 start /app
2020-01-09T06:43:44.413505+00:00 app[web.1]: > node server.js
2020-01-09T06:43:44.413506+00:00 app[web.1]:
2020-01-09T06:43:44.466287+00:00 app[web.1]: internal/modules/cjs/loader.js:796
2020-01-09T06:43:44.466291+00:00 app[web.1]: throw err;
2020-01-09T06:43:44.466294+00:00 app[web.1]: ^
2020-01-09T06:43:44.466296+00:00 app[web.1]:
2020-01-09T06:43:44.466300+00:00 app[web.1]: Error: Cannot find module '/app/server.js'
2020-01-09T06:43:44.466302+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
2020-01-09T06:43:44.466304+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:686:27)
2020-01-09T06:43:44.466306+00:00 app[web.1]: at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
2020-01-09T06:43:44.466308+00:00 app[web.1]: at internal/main/run_main_module.js:17:11 {
2020-01-09T06:43:44.466311+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',

Answer 1

Easy 4 Steps: Auto Deploy Vue.js App on Heroku

I was searching to deploy my Vue.js app on Heroku in best possible way. found articles which were now old to deploy Vue.js app on Heroku. Here, I am writing this to deploy your Vue.js app with continuous integration delivery and deploy your Vue.js app on Heroku.

Prerequisites:

basic npm knowledge basic git knowledge basic Vue.js knowledge Topic covered in this tutorial:

Create a Vue.js project

Configure Vue.js app to serve app on express server locally Create a git repository on GitHub and push your code Create and configure Heroku app Configure Vue.js project and Heroku app with GitHub, so that Heroku can serve our app on every new push

Step 1. Create a Vue.js Project

if you don’t have Vue locally. first install Vue.js (instructions here). We’ll also need Vue’s CLI to easily crate project. I believe, you are already familiar with npm package manager:

npm install vue
npm install -g @vue/cli
vue create <YOUR-PROJECT-NAME>
cd <YOUR-PROJECT-NAME>
npm install
npm run serve

Now your project should be up and running at localhost:8080

Step 2. Configure app to serve on express server locally

Go back to terminal and stop running app using ctrl+c command.

Now install express and add a server.js file to serve Vue.js app

npm install express serve-static --save

Create a server.js file under you YOUR-PROJECT-NAME dir, it should look like below:

Add following script to serve your app on express static server in server.js file.

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

const app = express()

//here we are configuring dist to serve app files
app.use('/', serveStatic(path.join(__dirname, '/dist')))

// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) {
    res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const port = process.env.PORT || 8080
app.listen(port)
console.log(`app is listening on port: ${port}`)

Now we can run run our server.js file to test our app running on configured port.

Note: before running server.js. we must need to build our vue.js app to create dist dir

npm run build

your dist directory should be build and ready to serve.

Run following command to test your server.js file locally

node server.js

test this on your browser navigating at localhost:8080

Now edit your package.json file to tell heroku to serve app from your server.js file.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js" <--- add this line under scripts block
  },

you are done now with your project locally. no more work here.

Step 3. Create a git repository on GitHub and push your code

GitHub is a Git repository hosting service, but it adds many of its own features. 
While git is a command line tool, GitHub provides a Web-based graphical interface. 
It also provides access control and several collaboration features, such as a wikis 
and basic task management tools for every project.

Create a git repository on GitHub and setup with your created project

setup remote GitHub repository in your project terminal using command as follows:

git remote add origin https://github.com/<your-user-name>/<repo-name>.git

Push your code to GitHub

Tip: Don’t forget saving all edited files before pushing on GitHub.

git push -u origin master

cool!! 🙂 you should have your source code on GitHub now.

Step 4. Create and configure Heroku app

Heroku is a cloud platform as a service. That means you do not have to worry 
about infrastructure; you just focus on your application. ... Full Logging and 
Visibility - easy access to all logging output from every component of your app
and each process.

Create an app on Heroku(if you don’t have an account yet, signup for one.)

here is snip to add a new app:

When app is created, it will redirect you to app deploy tab on Heroku dashboard.

• connect your Heroku account to GitHub if you haven’t already connected.
• Under deployment method choose connect to GitHub option
• search your repository name, after successful search, you should have your GitHub repository as follows:

connect to it and enable auto deploy option on Heroku. first time it does not deploy because there was no new push. it would deploy automatically on every next new push on selected branch.

Do a manual deploy for now and open your app from Heroku dashboard.

Kudos!!! 👏 you are finally done.

If deployment is successful, test out your project’s URL https://.herokuapp.com and you’re done!

I hope this tutorial was helpful to anyone looking to auto deploy your Vue.js app from GitHub to heroku on every new push.

Source: https://www.codementor.io/@ravianand1988/easily-4-steps-to-continuous-delivery-auto-deploy-vue-js-app-on-heroku-xljk977pq

Answer 2

Install express add the following code in server.js in the root folder

const express = require('express');
const app = express();

// Serve all the files in '/dist' directory
app.use(express.static('dist'));


app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

In your package.json add the following scripts

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js"
  },