Using Capacitor 3 with Nuxtjs SSR

Question

I'm on Nuxtjs 2.15.4 ssr mode and I wanna add Capacitorjs 3 to my project. As I read the doc, I found out for webDir we should add dist directory that is created by npm run generate which is for static mode target: static not npm run build (for ssr apps).

So what is the correct way of configurating Capacitor for SSR Nuxt??

Polychromy

What did you tried so far? Does this codesandbox help: codesandbox.io/s/79cm0 Looks like it's totally configured already. There is this one also: github.com/MexsonFernandes/nuxt-ionic-capacitor-app – Elmaleh

Hmmm... , the serverMiddleware ! huh! gonna try that. tanx – Polychromy

Yes, this is only related to server and some Node.js. – Elmaleh

I'm encountering the same issue with my Nuxt SSR - did you figure out what webDir needs to be set as? I've tried setting it to .nuxt and dist (which doesn't exist as it's srr) but no luck – Schalles

@JonathanRobbins you don't ever need to touch to .nuxt (cache) nor dist (final built directory). – Elmaleh

It's not the .nuxt or dist directory that I am touching, its value of webDir in capacitor.config.json @MojtabaBarari used to solve the original issue I want to know – Schalles

@JonathanRobbins maybe you can get inspired from what Quasar is doing. – Elmaleh

Answer 1

Define a server url

I have a Nuxt app in SSR mode, with CapacitorJS. Ultimately after relevant steps, it successfully runs in my Android Studio emulator and on my physical Pixel 2 (manual apk install). I haven't yet fully tested in production or in iOS XCode.

Defining a server URL was the trick. Initially I was wrestling with webdir like everyone else, although this doesn't seem to be needed if using the server: {url: } property.

capacitor.config.json:

{
    "appId": "io.mysillyapp.app",
    "appName": "My Silly App",
    "server": {
        "url": "https://mysillyapp.myapphosting.io"
    },
    "linuxAndroidStudioPath": "/snap/bin/android-studio"
}

Optionally wrap in a condition, like so (link):

{
  ...
  server: process.env.HOST ? { url: `${process.env.HOST}:${process.env.PORT ?? 8100 }` : undefined
  ...
}

After running npx cap copy, you'll see a warning:

 Web asset directory specified by webDir does not exist. This is not an error because server.url is set in config.

If you care about this warning and think you need it, then define webDir; I have it pointing to .nuxt:

{
    ...
    "webDir": ".nuxt",
    ...
}

NOTES:

Capacitor docs for server url says "This is not intended for use in production" without additional explanation. What does it mean, I don't know. My first thought is they're being conservative here with the presumption that Apple may not like this in an app submission (From a high-level, Apple wants real apps, not websites-wrapped-as-apps).

However, a commenter seems to be successfully using server url in production, having passed app store submissions.

https://capacitorjs.com/docs/v3/config

  /**
     * Load an external URL in the Web View.
     *
     * This is intended for use with live-reload servers.
     *
     * **This is not intended for use in production.**
     *
     * @since 1.0.0
     */
    url?: string;

Pyroelectric

Additionally Dan Pastori seems to have a ton of knowledge on this topic. Here's a relevant reddit dicussion: reddit.com/r/Nuxt/comments/qo0i19/comment/hjp0fnx/… – Pyroelectric