How can I deploy my Vue project that uses JSON Server to Heroku?

Hi everyone! I am trying to deploy my Vue project to Heroku as I read that I can use JSON Server with Heroku but I’m stuck on how to go about it.

I first follow these steps:

but my app would fail and I would receive this in my console:

No default language could be detected for this app.

After some googling I decided to add the heroku/nodejs webpack to my project and now I get this in my console:

Building on the Heroku-20 stack
-----> Using buildpacks:

  1. heroku/nodejs
  2. GitHub - heroku/heroku-buildpack-static: Heroku buildpack for handling static sites and single page web apps
    -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/nodejs.tgz
    ! ERROR: Application not supported by ‘heroku/nodejs’ buildpack
    !
    ! The ‘heroku/nodejs’ buildpack is set on this application, but was
    ! unable to detect a Node.js codebase.
    !
    ! A Node.js app on Heroku requires a ‘package.json’ at the root of
    ! the directory structure.
    !
    ! If you are trying to deploy a Node.js application, ensure that this
    ! file is present at the top level directory. This directory has the
    ! following files:
    !
    ! bites-restaurant/
    ! README.md
    !
    ! If you are trying to deploy an application written in another
    ! language, you need to change the list of buildpacks set on your
    ! Heroku app using the ‘heroku buildpacks’ command.
    !
    ! For more information, refer to the following documentation:
    ! https:devcenter.heroku.com/articles/buildpacks
    ** ! htps://devcenter.heroku.com/articles/nodejs-support#activation
    ** More info: tps://devcenter.heroku.com/articles/buildpacks#detection-failure
    ! Push failed

Within bites-restaurant/ are all my files for my project but I’m not sure how to get into the folder and deploy my project from there. Here’s my project if you want to see my file structure:

I posted this over at the Vue.js forum and no bites. Any suggestions?

I have added a Procfile , a server.js, and added a “start”:“node server.json” to my package.json. I added heroku-buildpack-static and a static.json like it says here
https://cli.vuejs.org/guide/deployment.html#heroku

I have also learned that

git subtree push --prefix bites-restaurant heroku main

gets me into my subdirectory

But my nothings shows in my site. When I do https://bites-restaurant.herokuapp.com/menu I do see my json but that’s it.

I added both to my server.js

const serveStatic = require(‘serve-static’)

server.use(serveStatic(__dirname + “/dist”))

now I am able to see my site but I do get an error

Failed to Fetch

After googling I edited my fetch call

fetch(“bites-restaurant”, {
method: ‘GET’,
mode: ‘cors’,
headers: { ‘Content-Type’: ‘application/json’ }
})

which makes the error

Unexpected token < in JSON at position 0

So there is some progress? :slight_smile:

I figured out my issue. What I needed to do was deploy JSON-Server on Heroku and then my Vue project on Netlify.

This post helped me figure out my fetch request and that I needed to deploy Vue and Heroku separately.

Now I just need to do some clean up as I tried so many things and hopefully I don’t mess it up again :sweat_smile:
https://dev-clone.nuxtjs.app/raquii/721705

What I did (as far as I can remember)

  • added db.json to root

  • added Procfile → web: node server.js

  • change fetch call to database using the Heroku App URL

  • added _redirects file too root → # Netlify settings for single-page application /* /index.html 200

  • added vue.config.js to root → module.exports = { pwa: { workboxOptions: { exclude: [/_redirects/] } } }

  • added server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()


server.use(middlewares)
server.use(router)
server.listen(process.env.PORT || 4000, () => {
    console.log('JSON Server is running')
})```

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.