Express server in nuxt, how to set up?

Question

Express.js

All the best evening. I started to deal with nuxt, according to video tutorials, and ran into one trouble, in the video tutorials, when installing nuxt, Sansey was asked whether it was necessary to install express .. and then a separate folder appeared, in the general structure - server, inside which further work was already taking place. And during installation, I didn’t have such a question, respectively, by default there is no server folder, please tell me how to solve this problem. I already installed express separately, but I don't understand how to make it all work? How and where to make routes, models? I have an express folder, in nuxt modules. the content of the index.js file in this folder is

'use strict';

module.exports = require('./lib/express');

I need somewhere to register mongoose settings and connection to mongodb. And how and where, I unfortunately don’t understand .. explain who can .. Maybe someone also had such difficulties ..

Answer 1

If the question doesn't appear, you probably didn't select SSR when generating the application (mode: 'universal' in nuxt.config.js should be)
This is how the files should look like. In app.js, we work as with regular express further, only we start the server in index.js, so we don’t need to run it in app.js, we just export and import it into index.js in which we launch it (everything has already been done here, just explained)
Structure:
server/index.js
server/app.js

index.js

const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = require('./app')

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

async function start () {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  await nuxt.ready()
  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host, () => {
    consola.ready({
      message: `Server listening on http://${host}:${port}`,
      badge: true
    })
  })
}
start()

app.js

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

module.exports = app

New way:

nuxt.config.js

serverMiddleware: {
    '/api': '~/api'
  },

api/index.js

const express = require('express')

// Create express instance
const app = express()

app.get('/', (req, res) => res.status(200).json([{name: "Robert"}, {name: "John"}]))

// Export express app
module.exports = app

// Start standalone server if directly running
if (require.main === module) {
  const port = process.env.PORT || 3001
  app.listen(port, () => {
    console.log(`API server listening on port ${port}`)
  })
}

pages/index.vue

<template lang="pug">
  div
    p(v-for="user in users") {{ user.name }}
</template>
<script>
export default {
  async asyncData({ $axios }) {
    const users = await $axios.$get('/api/')

    return {
      users,
    }
  },
}
</script>

Answer 2

If you are taking a course, it is better to take the same versions of technologies as the author. To avoid situations like this.
The template with express can now be installed so
express will be in the api folder

npm install -g @vue/cli
npm install -g @vue/cli-init
vue init nuxt-community/express-template <project-name>

https://github.com/nuxt-community/express-template