1

I am trying to get started with Fly.io. I know Vue well and wanted to try Nuxt and Node.js. I cannot seem to figure out how to add server-side components and classes for handling AJAX requests.

I followed the official tutorial https://fly.io/docs/languages-and-frameworks/nuxtjs/

npm init nuxt-app@latest spec-land

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in spec-land
? Project name: spec-land
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Element
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? --
? Version control system: Git

  Successfully created project spec-land

$ touch pages/index.js
$ npm run dev

After adding some front-end code, is this generated project equipped to run JavaScript on the server in the same fly.io deploy?

kissu
  • 40,416
  • 14
  • 65
  • 133
macu
  • 379
  • 1
  • 4
  • 10
  • I have it working locally after following the steps on this page https://dev.to/dabit3/creating-api-routes-in-a-nuxt-app-1kg1 / https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/ but now I am getting another error trying to run fly deploy. – macu Nov 28 '22 at 22:57
  • I deleted the app and recreated it as a Go app which worked with almost no issue. I would not recommend using Nuxt since Node issues are difficult to troubleshoot. – macu Nov 29 '22 at 01:18
  • 1
    The issue mainly comes from JS and the fact that there is a lot to it to understand to have something functional. Regarding what you're trying to achieve and your needs/knowledge in Vue, Nuxt may not be the best tool in your case indeed. Consider Nuxt2 as being a nice front-end++ kind of meta-framework, not a fully-fledged custom solution for a back/frontend in one package. – kissu Nov 29 '22 at 02:11

1 Answers1

1

For a Nuxt2 app, you need to have Rendering Mode as Universal (SSR/SSG) or ssr: true in your nuxt.config.js file, otherwise, you will not have an isomorphic app.

Nuxt will run some code on the server side + client side (isomorphic), while some will be run only on the client side only.

The setup to have a serverMiddleware for Nuxt2 is as follows. Quite tricky and not working so well.
Nuxt3 handles that pretty well on the opposite side.

Overall, Nuxt2 does have some capabilities regarding server-side code but is not as flexible as Nuxt3. Tbh, if you want to use Nuxt2, I would recommend not trying to set up an actual database linked to it, but rather accessing it remotely via axios or like.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Thank you for adding clarity. The fly docs currently lead you to create a nuxt 2 app. It would be good if they could acknowledge your advice to host the API server in a separate app. That seems the way to go. – macu Nov 30 '22 at 19:01
  • @macu they are maybe not specialized into Nuxt apps. Glad my feedback helps! – kissu Nov 30 '22 at 19:48