4

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??

Mojtaba Barari
  • 1,127
  • 1
  • 15
  • 49
  • What did you tried so far? Does this codesandbox help: https://codesandbox.io/s/79cm0 Looks like it's totally configured already. There is this one also: https://github.com/MexsonFernandes/nuxt-ionic-capacitor-app – kissu May 31 '21 at 09:56
  • Hmmm... , the serverMiddleware ! huh! gonna try that. tanx – Mojtaba Barari May 31 '21 at 11:33
  • Yes, this is only related to server and some Node.js. – kissu May 31 '21 at 12:09
  • 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 – Jonathan Robbins Jul 07 '21 at 15:08
  • @JonathanRobbins you don't ever need to touch to `.nuxt` (cache) nor `dist` (final built directory). – kissu Jul 07 '21 at 15:16
  • 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 – Jonathan Robbins Jul 07 '21 at 15:26
  • @JonathanRobbins maybe you can get inspired from what Quasar is doing. – kissu Jul 07 '21 at 15:27

1 Answers1

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;
Kalnode
  • 9,386
  • 3
  • 34
  • 62
  • 1
    Additionally Dan Pastori seems to have a ton of knowledge on this topic. Here's a relevant reddit dicussion: https://www.reddit.com/r/Nuxt/comments/qo0i19/comment/hjp0fnx/?utm_source=share&utm_medium=web2x&context=3 – Kalnode Dec 17 '21 at 21:50