Nuxt 3 SSR Constuct - or Generic SSR Construct as base?

[jamieowen]

Hi,

Apologies for requesting features via a Github Issue!

However i was wondering what plans ( if any ) there were for supporting a Vue/ Nuxt 3 SSR construct. Nuxt 3 uses the Nitro engine to generate lambda code ( in .mjs format )?

Or another alternative, do you have any plans for creating a generic SSR Site construct that could be extended?

I have used the generic SSR serverless-lift construct with Nuxt 3 so far.

Cheers,

Jamie

[fwang]

With the generic SSR serverless-lift construct, did u have to write an adapter to translate between Lambda request/response and Nuxt's SSR request/response? Frank

…

-- <https://seed.run/> Founder at SST <https://sst.dev> SST <https://github.com/serverless-stack/serverless-stack> - OS framework for building serverless apps SEED <https://seed.run/> - Deploy, manage, and monitor serverless apps

On Mon, Jan 9, 2023 at 10:30 PM Jamie Owen ***@***.***> wrote: Hi, Apologies for requesting features via a Github Issue! However i was wondering what plans ( if any ) there were for supporting a Vue/ Nuxt 3 <https://nuxt.com/> SSR construct. Nuxt 3 uses the Nitro engine <https://nitro.unjs.io/> to generate lambda code ( in .mjs format )? Or another alternative, do you have any plans for creating a generic SSR Site construct that could be extended? I have used the generic SSR serverless-lift construct <https://github.com/getlift/lift/blob/master/docs/server-side-website.md> with Nuxt 3 so far. Cheers, Jamie — Reply to this email directly, view it on GitHub <#2314>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAUMO5527MPXJ2AFPWCD33WRTJVXANCNFSM6AAAAAATWE6U4E> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[jamieowen]

Hey Frank,

No not that i'm aware of.

Essentially - Nuxt 3 / Nitro generates the Lambda handler from the nuxt build command. ( .mjs modules )
This is with the aws-lambda preset. https://nitro.unjs.io/deploy/providers/aws

It generates output folders /output/server & /output/public.
I bundled the server into a server.zip file.

Then configured the Serverless Lift plugin minimally with the following in the serverless.ts, with the runtime set to nodejs16.x:

  constructs: {
    nuxt: {
      type: "server-side-website",
      apiGateway: "http",
      assets: {
        "_nuxt/*": `${NUXT_OUTPUT}/public/_nuxt`,
        // and all other top level folders/files found in public folder
        // these are copied to S3 and used as CloudFront origin paths by the Lift Plugin
      },
    },
  },

Then the function handler looked like :

  functions: {
    nuxtHandler: {
      package: {
        artifact: `${NUXT_OUTPUT}/server.zip`,
      },
      handler: "index.handler",
      events: [
        {
          httpApi: {
            method: "GET",
            path: "/{any+}",
          },
        },
      ],
    }
  },

I haven't seen any errors so far. But early days :)

[fwang]

Hey @jamieowen, quick update. SST now has an SsrSite construct that does the heavy lifting of setting up CloudFront distribution, Lambda/Lambda@Edge, domains, etc. NextjsSite, RemixSite, AstroSite, and SolidStartSite all extend from it.

If you'd like to give it a go, u can try using SsrSite to put something together for Nuxt. We can then turn that into the official NuxtSite construct. Here's the code for AstroSite — https://github.com/serverless-stack/sst/blob/master/packages/sst/src/constructs/AstroSite.ts

Let me know if there's anything I can help w/.

[jdevdevdev]

For anyone trying this I had success with the methods Frank and Jamie have mentioned.

1. Build with the env NITRO_PRESET=aws-lambda set.
2. Create a construct using SsrSite, AstroSite's format can be reused.

I managed to get it working in this test repo .

Caveat is lambda@edge support is waiting on this pr from the nuxt unjs team.

Edit:
I had some success adding a lambda edge adapter (preset in nitro) to the nuxt project. Seen here. Unfortunately I was unable to package this into it's own npm package.

[Hebilicious]

For anyone trying this I had success with the methods Frank and Jamie have mentioned.

1. Build with the env NITRO_PRESET=aws-lambda set.
2. Create a construct using SsrSite, AstroSite's format can be reused.

I managed to get it working in this test repo .

Caveat is lambda@edge support is waiting on this pr from the nuxt unjs team.

Edit: I had some success adding a lambda edge adapter (preset in nitro) to the nuxt project. Seen here. Unfortunately I was unable to package this into it's own npm package.

Hi @jdevdevdev, thanks for working on this 🙏🏽 As you mention, there's 2 nitro PR open for lambda-edge support. Just to confirm, for SST support, you need an aws-lambda-edge without the cdk, correct ?

[jdevdevdev]

@Hebilicious Correct. In my test repo deployment was handled by sst.

Thanks for looking into it!

[robokozo]

I'm hoping this can be official supported at sometime because at viteconf Solidjs announced they were going to leverage nitrojs, the webserver that powers nuxt too.

[robokozo]

Hey @jdevdevdev! Is your test repo still working for you?

[jdevdevdev]

@robokozo No, SsrSite was restructured. I don't think it will work the the most current version.

[EnzoAlbornoz]

@robokozo No, SsrSite was restructured. I don't think it will work the the most current version.

I made a simple PoC for a simple NuxtSite with no edge support but handling IPX (for @nuxt/image, i.e., image compression). Here's the gist: https://gist.github.com/EnzoAlbornoz/b7a72f4651d404e756e18f8ca9fdde97

[robokozo]

Thanks @EnzoAlbornoz ! I'll give it a try in a few days...

[jdevdevdev]

If you need edge support I have an experimental plugin.

I used this construct.

[Hebilicious]

@jdevdevdev just to let you know I did start a PR based mostly on your existing work unjs/nitro#1557

[robokozo]

@EnzoAlbornoz hmm.. I couldn't get it working. The amplify gen 2 stuff looks promising though. It worked right away

[8bu]

@robokozo No, SsrSite was restructured. I don't think it will work the the most current version.

I made a simple PoC for a simple NuxtSite with no edge support but handling IPX (for @nuxt/image, i.e., image compression). Here's the gist: https://gist.github.com/EnzoAlbornoz/b7a72f4651d404e756e18f8ca9fdde97

Sorry, I keep getting this when I'm trying to deploy

AWS::CloudFront::Distribution: The parameter globPattern can only contain these characters: [a-zA-Z0-9_-.*$/~"'&@:?+\].
(Service: CloudFront, Status Code: 400, Request ID: 017def16-e275-4374-821a-108f929703d4)"

Any idea how to debug this? I'm trying to search all the places but maybe it's not correct direction...

[frdwhite24]

@robokozo No, SsrSite was restructured. I don't think it will work the the most current version.

I made a simple PoC for a simple NuxtSite with no edge support but handling IPX (for @nuxt/image, i.e., image compression). Here's the gist: https://gist.github.com/EnzoAlbornoz/b7a72f4651d404e756e18f8ca9fdde97

Sorry, I keep getting this when I'm trying to deploy

AWS::CloudFront::Distribution: The parameter globPattern can only contain these characters: [a-zA-Z0-9_-.*$/~"'&@:?+\].
(Service: CloudFront, Status Code: 400, Request ID: 017def16-e275-4374-821a-108f929703d4)"

Any idea how to debug this? I'm trying to search all the places but maybe it's not correct direction...

@8bu I keep getting this too! did you manage to solve it?