Running an Express server middleware alongside Nuxt

Question

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')

Answer 1

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).

---

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.