Сервер Express в nuxt, как настроить?

Question

[zininil]

Всем добрейший вечерочек. Я начал разбираться с nuxt, по видеоурокам, и уперся в одну неприятность, на видеоуроках при установке nuxt у сансея было предложено нужно ли устанавливать express.. и тогда появлялась отдельная папка, в общей структуре - server, внутри которой уже происходила дальнейшая работа. А у меня при установке, такого вопроса не было, соответственно по умолчанию и папки server нет, пожалуйста подскажите мне как можно решить эту проблему. Я уже установил експресс отдельно, но мне не понятно как это все заставить работать? Как и где делать маршруты, модели? У меня есть папка express, в модулях nuxt. содержимое файла index.js в этой папке такое

'use strict';

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

Мне нужно где то прописать настройки mongoose и подключение к mongodb. А как и где , я к сожалению не понимаю.. объясните кто может.. Может у кого то тоже такие сложности были..

Comments

[Vspon1]

Для меня этот вопрос тоже очень актуален. Если найдете решение, большая просьба, поделиться результатом. Еще месяц-полтора назад nuxt генерировал нужную структуру папок, в т.ч. и сервер. Сейчас даже вопрос о сервере не задает при развертывании структуры.

[Andrey Shock]

Видимо мы тут все от одного учителя идем, мда, а я из за этой проблемы столько времени теряю на тестовое задание компании

Answer 1

[FinGanapre]

Если вопроса не появилось, возможно вы не выбрали SSR при генерации приложения (mode: 'universal' в nuxt.config.js должно быть)

Примерно так должны выглядеть файлы. В app.js работаем как с обычным express далее, только запуск сервера у нас в index.js, так что в app.js его запускать не нужно, просто экспортируем и импортируем в index.js в котором и запускаем (тут уже всё сделано, просто объяснил)

Структура:
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

Новый способ:

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>

Comments

[Andrey Shock]

а как его запускать, ну я понял что node server/index.js, но тогда nuxt не запустится, я смотрел видос по nuxt , и там после того как тип установит nuxt и выберет express в качестве сервера(в консоли), и при запуске npm run dev у него и express запускается

[FinGanapre]

shock_rd, Запуститься всё. nuxt я просто передал как middleware в файле index.js (app.use(nuxt.render)). Если посмотрите в конце после инициализации nuxt у вас запуститься app.listen. Можно не выносить express в отдельный файл (app.js), но я так делаю для большей чистоты

[Alex]

shock_rd, у меня так и не запустилось. подскажите, пожалуйста, если нашли решение
курс у вас, случайно не от минина?

[Reinvented]

shock_rd, Alex, удалось решить проблему?

[Alex]

Reinvented, пока нет. Но я активно не решал, есть другая работа. Немного накоплал инфы, но ещё не разобрал. Надо смотреть в сторону middlewear.

[lodas]

Alex, https://bithacker.dev/use-express-with-nuxt-js

[Alex]

Reinvented, на всякий случай напишу, может ещё кому пригодиться.
В современном nuxt, express выпилен, но да его можно подключить через serverMiddleware, как выше писали. Это можно считать за ответ.

У кого курс от Минина:
express я запустил, mongodb подключается... но всё равно есть ошибки с этим serverMiddleware

~/server/index.js

const express = require('express')
const bodyParser = require('body-parser')
const mongoose = require('mongoose')
const passport = require('passport')
const passportStrategy = require('./middleware/passport-strategy.js')
const keys = require('./keys')
const app = express()

mongoose.connect(keys.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
  .then(() => console.log('MongoDB connected...'))
  .catch(error => console.error(error))

app.use(passport.initialize())
passport.use(passportStrategy)

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

// Подключаем роуты
const authRoutes = require('./routes/auth.routes.js')
const postRoutes = require('./routes/post.routes.js')
const commentRoutes = require('./routes/comment.routes.js')

app.use('/api/auth', authRoutes)
app.use('/api/post', postRoutes)
app.use('/api/comment', commentRoutes)

// Запускаем приложение
if (require.main === module) {
  const port = process.env.PORT || 3001
  app.listen(port, () => {
    console.log(`API server listening on port ${port}`)
  })
}

в nuxt.config.js прописал, но не уверен, что правильно

serverMiddleware: [{ path: '/server', handler: '~/server/index.js' }],

В mongodb atlas добавились три коллекции. Но сделать запись я почему-то не могу.

Answer 2

[Алекс Глебов]

Если проходите курс, то лучше брать те же версии технологий, что и у автора. Чтоб не ловить подобные ситуации.

Шаблон с express сейчас можно установить так
express будет находиться в папке api

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