Struggling with getting my Vue-CLI app deployed on Heroku

After diligently following all the steps outlined in this tutorial:

https://codeburst.io/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8

I encountered an error message when checking my app at:

The error indicated:

Method Not Allowed

Despite following the tutorial to push only the 'dist' folder to Heroku, I faced difficulties with deployment.

Various methods were attempted over a few days, which unfortunately led to confusion and left me seeking assistance for deploying the app successfully on Heroku.

The development and production environments functioned smoothly, but hurdles emerged specifically while deploying on Heroku.

You can find the link to my repository here:

Prior attempts involved deploying the entire root directory with the usage of this 'server.js' file:

// server.js

const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')

const app = express()

const staticFileMiddleware = express.static(path.join(__dirname + '/dist'))

app.use(staticFileMiddleware)
app.use(history({
  disableDotRule: true,
  verbose: true
}))
app.use(staticFileMiddleware)

app.get('/', function (req, res) {
  res.render(path.join(__dirname + '/dist/index.html'))
})

var server = app.listen(process.env.PORT || 8080, function () {
  var port = server.address().port
  console.log('App now running on port', port)
})

Upon executing 'git push heroku master,' logs revealed:

[Logs Content]

Alternatively, trying 'git subtree push --prefix dist heroku master' resulted in:

No new revisions found

Including 'Procfile' details:

web: node server.js

Further updates involved using 'heroku open' command, triggering:

Cannot GET /

Performing 'heroku logs --tail' displayed:

[Logs Content]

To address build issues, modifications were made in 'package.json':

[package.json content]

Despite these adjustments, the Heroku deployment process remained stuck in a continuous loop. Any attempts to halt it through the Heroku CLI proved ineffective, necessitating the recreation of the app each time.

An amended 'Procfile' configuration:

[Updated Procfile content]

Still could not resolve the building issues encountered during deployment.

Answer №1

No worries, I managed to resolve the issue last night by including "heroku-postinstall": "npm install && npm run build" in the scripts section of my package.json file. This did the trick and now everything is functioning as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with ejs.filters?

I'm having trouble grasping ejs filters and getting them to work correctly: Server.js var ejs = require('ejs'); ejs.filters.example = function() { //placeholder for example }; Routes.js app.get('/home', function(req, res) { ...

Populate a dropdown menu in jQuery with options generated from an array

I'm planning to include 4 dropdowns in my project. My approach involves creating 3 arrays (the first dropdown is hardcoded). The idea is that based on the selection made in the first array, the options for the second dropdown will be populated. How ca ...

What is the best way to differentiate between a JSON object and a Waterline model instance?

Note: I have posted an issue regarding this on the Waterline repo, but unfortunately, I have not received a simpler solution than my current workaround. Within my User model, along with default attributes such as createdDate and modifiedDate, I also have ...

Challenges with retrieving all text records in a profile using ethers.js

Currently, I am facing difficulties in retrieving all ENS text records from a profile due to issues with the logic or potential approaches... With ethers.js v6, my current strategy involves fetching all the log data and then sifting through it. However, t ...

When switching windows or tabs, the user interface of the browser extension vanishes

As someone who is new to web application development and browser extension creation, I have encountered a challenge with my browser extension. When the extension popup is open and I switch browser windows, the UI (popup.html) disappears. It reappears whe ...

Maintain the modifications in NPM software dependencies

Currently, I am developing a REACT web application and have integrated the react-datasheet library using NPM. To ensure compatibility with IE11, I made modifications to the JavaScript file installed via NPM. While these changes work perfectly on my local m ...

Leverage the power of require() beyond the confines of Node

I'm currently exploring how to integrate an Angular.js application with Node.js. At the moment, I have the following code in the file MY-PROJECT/public/js/controllers.js function LoginController( $scope ) { // fetch waiters var Waiter = require( ...

jQuery sorting function is utilized to organize a table after its rows have been modified through an ajax

My website features an election section that displays updated election numbers in real-time. Previously, users had to refresh the page to see new results. I have implemented code that utilizes a custom REST API to fetch live numbers and jQuery to dynamica ...

Transforming a JSON string into an object within a variable amount of nested JSON structures

I'm encountering an issue with modifying JSON strings within JSON objects for varying numbers of objects. Allow me to elaborate further with my code and explanations. I have a factory that supplies JSON objects //Factory for products app.factory(&ap ...

Encountered an issue when trying to run 'npm install' immediately after running 'npx nuxi init <project name>' in Nuxt 3

Today, when attempting to create a new Nuxt 3 project using npx nuxi init <project name> as usual, I encountered a lengthy error in the terminal while trying to install the dependencies with npm install. Despite deleting the lock file and experimenti ...

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Is there a way to delay the appearance of the "text-container" div after the image is displayed? I have attempted to achieve this using JavaScript with the following code: <script> window.onload = function(){ var timer = setTimeout("showText()",700 ...

Error occurred while attempting to execute the method

Here's a MongoDB Mongoose query we're dealing with: sampleSchema.find({ $where: "expired <= " + (new Date()) }) .limit(9) // Problems may arise from here .sort({ postedDate: -1 }) .then((docs) => { console.log(&apos ...

What sets array of middlewares apart from compose-middleware?

Someone recommended that I utilize the compose-middleware module in order to have an array of middlewares. After trying it out, I discovered that it works seamlessly with express.js: router.post('/editPassword', doAction ); var doAction = [ ...

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

Using vue-select: In VueJs, how to pass an option slot from a grandparent component

Utilizing a custom dropdown component called 'vue-select', there is an option to customize the options view using slots as detailed in this documentation -> https://vue-select.org/guide/slots.html I am aiming to achieve a similar customizatio ...

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...

Retrieving Outdated Information through the Express Framework

Whenever I make a fetch request to a node express server, it sometimes returns old data that was previously fetched from the same endpoint. This issue occurs sporadically but seems to happen more often than not. Even after disabling Cache-Control in the f ...

The React live search functionality is operational, however, it is not effectively canceling previous requests in the

Currently, I am in the process of following a helpful tutorial over at "alligator.io". You can check out the specific link here: https://alligator.io/react/live-search-with-axios/ The code snippet below belongs to App.js: import React, { Component } from ...

What is the correct method for integrating jQuery libraries into an Angular project version 10 or higher?

Currently, I am facing difficulties while attempting to install the jquery and jquery-slimscroll packages into an Angular project (version greater than 10). It appears that the installation of these packages has not been successful. In light of this issue, ...

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

I'm having trouble understanding how this code snippet works. Can someone please provide a demonstration? Thanks in advance.... It seems that the code is subtracting 'start' from the current date with new Date, resulting in 0 which is less t ...