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

The functionalities of Google Maps are experiencing issues within AngularJS when utilizing the $route feature

Having Issues with Google Maps in AngularJS when using <ng-view></ng-view> Routing Configuration app.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/', { t ...

Adjusting image dimensions dynamically using JavaScript based on screen size

My bootstrap setup seems to be causing issues when using the @media (min-height: 1000px) rule as the image class does not respond as expected. I am looking to implement a JavaScript solution that will automatically resize images once the screen height exc ...

How can one display blog data (stored as a PDF) from a database alongside other different results (stored as

I have successfully displayed a PDF file from my database as a blob using the header("Content-type:application/pdf") method. Now, I am looking to also display some additional string results along with this PDF file. Is it feasible to achieve this while d ...

Encountering the "ExpressionChangedAfterItHasBeenCheckedError" in Angular 2

As I try to fill in multiple rows within a table that I've created, the table gets populated successfully. However, an error message pops up: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous valu ...

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

What could be causing the lack of response from PHP Ajax?

In the midst of tackling my college project, I find myself working on a webpage that is designed to showcase City and temperature information. To accomplish this task, I am delving into the realm of AJAX in order to dynamically update the temperature at sp ...

Implementing Ajax to Load Template-Part in Wordpress

Hey there! I'm currently working on enhancing my online store by adding a new feature. What I'd like to achieve is that when a customer clicks on a product, instead of being taken to the product page, the product details load using AJAX right on ...

Invoke the callback function before executing the next function

There is a function that calls an API: const response = fetch(APIfunctonName, { method: "POST", body: JSON.stringify(searchRequest), headers: { "Content-type": "application/json; charset=UTF-8", }, }) ...

Easy way to make a jQuery getJSON request to Twitter

After browsing through numerous Twitter and jQuery related questions, I have yet to find a solution to my specific issue. My goal is simple - to retrieve 5 "tweets" from a public user. At this stage, I am not manipulating the data in any way, but for some ...

Assistance with designing in JavaScript and Python

Currently, I have a setup where my external website is extracting data from an iframe within our internal company intranet using Javascript. The extraction process is successful, but now I am faced with the challenge of accessing this harvested data in ord ...

The lightbox fails to display in IE when a synchronous ajax request is triggered

I have a piece of code that displays a lightbox with the message 'Please Wait', followed by a synchronous ajax request that removes the lightbox once it's completed. This setup works perfectly in most browsers, but in Internet Explorer, the ...

The npm outdated -g command is producing an error message that states "Unable to read the length property of undefined"

I am currently facing an issue while trying to check the version status of my npm installed global packages. When I run the command npm outdated -g --depth=0 in the terminal, I encounter the following error: npm ERR! Cannot read property 'length&apos ...

mongojs implementation that allows for asynchronous query execution without blocking

Forgive me for asking what may seem like a silly question, but I am struggling to make this work. Currently, as part of my learning journey with node.js and mongojs, I have encountered the following issue: Below is my server.js file server.get("/", funct ...

The Vue feature responsible for displaying information on the webpage is currently not working as expected

I'm in the process of developing a settings page for a project. This particular page is based on HTML and utilizes JSON to store data, with Vue 3 being used to display the information on the page. However, I've encountered an issue where the data ...

When accessing nested objects in Props in Vue.js, an error may occur if the property of null/undefined

When I make an axios call, I receive an object which I pass to a child component. However, when I attempt to loop through the object in the child component to access a property of another nested object, I encounter an issue where the property is showing as ...

Exploring the process of retrieving data from localStorage in Next.js 13

Having recently delved into the realm of Next JS, I've encountered a hurdle when it comes to creating middleware within Next. My aim is to retrieve data from local storage, but I keep hitting roadblocks. middleware.ts import { key, timeEncryptKey, to ...

Experiencing difficulties in sending a post request to my express API

I am encountering an issue with my Heroku API where I am not receiving any response after sending a post request. Here is the section of code responsible for making the request: const [ user, setUser] = useState({ email:"", password:"" }) const h ...

What's the reason for not being able to customize classes for a disabled element in Material-UI?

Currently, I am utilizing Material-UI to style my components. However, I am facing challenges when trying to customize the label class for disabled buttons. Despite setting a reference as "&$disabled", it does not yield the desired results. import Rea ...

The DOM fails to reflect changes in the data variable in VueJS

I am facing an issue while trying to update an array of arrays and display it as a reactive variable, however the DOM does not seem to reflect those changes. To achieve this, I have two components - a parent component and a child component: Parent Compon ...