Nuxtjs on Heroku

vilce

Ștefan Vîlce

Posted on August 30, 2022

Nuxtjs on Heroku

I've been developing a Nuxtjs application on node.js. I have developed the app on my local computer. Because the client has been needed to see it well functioning before to allow some space on their server I had to find a solution to show them how it is working. And to test it before.

For this scope I found that it is good to put it on Heroku. This way the client, which is not in my city, can test the webapplication.

You perhaps know that the Nuxtjs is based on Vue.js framework. And you can see details about what it is and how functions here: https://nuxtjs.org/.

About Heroku you maybe know that it is a cloud/PaaS platform which offers to the companies the possibility to build, deliver, monitor and scale apps — we're the fastest way to go from idea to URL, bypassing all those infrastructure headaches. And you can get a free DYNO to deploy your application. And this is the best thing on Heroku.

Let's get back to my challenge with Heroku and my app. I've created the dyno for my app and I put the code on it. I pushed the code with git on master branch first,

$ git push heroku master
Enter fullscreen mode Exit fullscreen mode

The dyno startet to deploy the app, but I got this error:

Image description

And then, I thought that it is happening because of the master/main problems in git. And I run then:

$ git push heroku master:main
Enter fullscreen mode Exit fullscreen mode

But the problem have persisted. And I found this Stackoversflow - Delete package-lock.son can solve your problem. So, I have deleted the package-lock.json file and the error disappeared. But I still had on problem. The deploying of the code generated a fail in the app. I had to dig more.

In package.json I had this:

Image description

And then, I added this: "dev": "NUXT_PORT=process.env.PORT nuxt", s.u.

Image description

And it was not enough. I heroku concole I run:

$ heroku config:set NPM_CONFIG_PRODUCTION=false
Enter fullscreen mode Exit fullscreen mode

and

$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production
Enter fullscreen mode Exit fullscreen mode

After this I added this line in package.json:

"heroku-postbuild": "npm run build"

And I run this

$ git push heroku master:main

The deploy went well, so I have now the app up and running.

Latest:

Heroku will not be free anymore. This is a bit sad.
https://dev.to/lukeecart/more-heroku-changes-that-will-definitely-affect-you-10o8

💖 💪 🙅 🚩
vilce
Ștefan Vîlce

Posted on August 30, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Nuxtjs on Heroku
nuxt Nuxtjs on Heroku

August 30, 2022