3

My endpoints aren't working, and most likely because the server on which express is isn't running correctly. I run my files with npm run dev and my express files are in /middleware. The endpoint which I'm trying to fetch data from is in a route in /middleware/routes/crash.js. In my vue file I have axios preforming a get request to localhost:3000/api/crash/:id, however axios returns a 400 error indicating that the file hasn't been found running on the server.

package.json:

"scripts": {
  "dev": "nuxt"
}

/middleware/index.js:

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

const crash = require('./routes/crash')
app.use(crash)

module.exports = {
  path: '/middleware',
  handler: app
}

/middleware/routes/crash.js:

const { Router } = require('express')
const router = Router()
const crypto = require("crypto");
...
router.get('/api/crash/:id')
kissu
  • 40,416
  • 14
  • 65
  • 133
gggggggggg
  • 77
  • 2
  • 9
  • Is it a 400 error or a 404? – Robbe Claessens May 03 '22 at 14:02
  • Do you have a [repro] or a github repo for this one? – kissu May 03 '22 at 14:42
  • 1
    Also, did you pay attention to `Do not add serverMiddleware to the middleware/ directory` in the documentation regarding the link I gave you on your latest question? https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware#servermiddleware-vs-middleware – kissu May 03 '22 at 14:44
  • Hi, did my answer helped somehow? – kissu May 04 '22 at 13:03
  • @kissu Somehow, yes. I'm still having issues with initializing express.js. Absolutely no clue what the cause of it is. I made a new post and a github repo regarding it. – gggggggggg May 04 '22 at 23:21

1 Answers1

5

You need to have at least this in your
nuxt.config.js file

export default {
  ssr: true,
  target: 'server',
  modules: [
    '@nuxtjs/axios',
  ],
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/rest.js' },
  ],
}

And a /server-middleware/rest.js file with

const app = require('express')()

app.get('/what-is-my-name/:name', (req, res) => {
  res.json({ name: req.params.name, age: 12 })
})

module.exports = app

Then, you can use it like this in any .vue file

<template>
  <div>
    <input id="name" v-model="name" type="text" name="name" />
    <button @click="callNuxtApi">try local Nuxt API</button>
    <div>
      Response from the backend:
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccordionList',
  data() {
    return {
      name: 'bob',
      response: {},
    }
  },
  methods: {
    async callNuxtApi() {
      const response = await this.$axios.$get(
        `/api/what-is-my-name/${this.name}`
      )
      this.response = response
    },
  },
}
</script>

Then, this will successfully work locally (I'm using a dynamic name here).

enter image description here

Then, you'll need to deploy it on a VPS, but there is a small gotcha: you will need to deploy your app and push the server-middleware directory yourself as explained here: https://github.com/nuxt/nuxt.js/issues/9158#issuecomment-820676790

Hence why, platform like Render.com or Heroku are probably not the easiest ones for this kind of task (I'm not even sure that this is possible).

Some homemade VPS or using Nuxt3 would probably be more easily overall IMO.

kissu
  • 40,416
  • 14
  • 65
  • 133