Unable to load static assets in AWS Lambda #1566

Rizialdi · 2024-06-28T09:42:32Z

Rizialdi
Jun 28, 2024

Hi,
I recently started playing around with solid-start and I use the starter code with:

// entry-client
import { mount, StartClient } from "@solidjs/start/client";

mount(() => <StartClient />, document.getElementById("app")!);

// entry-server
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));

I learned about the fact that under the hood solid-start uses vinxi that is a smart way to combine vite and nitro. For the deployment I wanted to use terraform instead of solutions listed here and thanks to nitro preset I thought this could be as easy as:

import {defineConfig} from "@solidjs/start/config";

export default defineConfig({
  server: {
    preset: "aws-lambda",
  }
})

I did not really understand what to do with the outputs (public and server folder). Thanks to that guide I've use a Cloudfront distribution that points to S3 for static assets (example with favicon) and lambda for the rendering of the application but that is not working (Cannot read properties of undefined (reading 'file')).

I later found that defineNuxtConfig uses cdnURL for static assets but I was not able to find the same on vinxi.

// from https://towardsserverless.com/articles/nuxt3-ssr-on-aws-lambda
export default defineNuxtConfig({
  nitro: {
    preset: 'aws-lambda'
  },
  app: {
    cdnURL: 'https://example.cloudfront.net/'
  }
})

Do you guys have any ideas how to get the correct build for AWS Lambda with SSR and deliver static assets through a cdn ?
For the lambda code I've only used the server folder (vinxi outputs). Do I need to use the public one as well ?

Also posted here.

doeixd · 2024-06-28T13:12:33Z

doeixd
Jun 28, 2024

Hey, I'm not entirely sure if this'll work, vinxi looks like it as a property called base on the static router which corresponds to the base URL to find static assets at.

This could be wrong but, I'd try something like:

// app.config.ts
import { defineConfig } from "@solidjs/start/config";
import { App } from "vinxi";

const config = defineConfig();

changeStaticBasePath("https://example.cloudfront.net/", config)


export default config;


function changeStaticBasePath(basePath: string, config: App) {
  config.stack(async (app) => {
    const staticRouter = app.config.routers.find(router => router.name == 'public')
    if (staticRouter) {
      staticRouter.base = basePath
    } else { 
      throw new Error("Static router not found")
    }
  })
}

0 replies

Rizialdi · 2024-06-28T13:48:45Z

Rizialdi
Jun 28, 2024
Author

Thank you for your input @doeixd.

Digging a bit into the issue Cannot read properties of undefined (reading 'file'), the issue come from bundlerManifest[id].file in the runtime file:

} else if (router.target === "browser") {
	const id =
		input === router.handler && !input.endsWith(".html")
			? virtualId(handlerModule(router))
			: input;
	return {
		import() {
			return import(
				/* @vite-ignore */ joinURL(
					app.config.server.baseURL ?? "",
					router.base,
					bundlerManifest[id].file,
				)
			);
		},
		assets() {
			return createHtmlTagsForAssets(
				router,
				app,
				findAssetsInViteManifest(bundlerManifest, id),
			);
		},
		output: {
			path: joinURL(
				app.config.server.baseURL ?? "",
				router.base,
				bundlerManifest[id].file,
			),
		},
	};
}

It is a bit different that what I initially thought on delivering static assets.

0 replies

doeixd · 2024-06-28T14:07:30Z

doeixd
Jun 28, 2024

Hmmm. I think I got the purpose of base wrong. I think it only corresponds to the url on your site where the assets are. Maybe try the following, where i added a route rule to proxy to the cdn:

import { defineConfig } from "@solidjs/start/config";
import { App } from "vinxi";

const config = defineConfig();

changeStaticBasePath({ proxyTo: "https://example.cloudfront.net/"} , config)

export default config;


function changeStaticBasePath(basePath: {
  serveFrom?: `/${string}`
  proxyTo?: string
}, config: App) {
  if (!basePath.serveFrom) basePath.serveFrom = "/public"
  // @ts-expect-error
  basePath.serveFrom = '/' + basePath.serveFrom.replace(/\/$/, "").replace(/^\//, "")

  config.stack(async (app) => {
    const staticRouter = app.config.routers.find(router => router.name == 'public')
    if (staticRouter) {
      if (basePath.serveFrom) {
        staticRouter.base = basePath.serveFrom
      }
      if (basePath.proxyTo) {
        app.config.server.routeRules ||= {}
        app.config.server.routeRules[`${basePath.serveFrom}/**`] = {
          proxy: basePath.proxyTo
        }
      }
    } else { 
      throw new Error("Static router not found")
    }
  })
}

0 replies

Rizialdi · 2024-06-28T15:58:19Z

Rizialdi
Jun 28, 2024
Author

It turns out that there was no issue related to static assets. No need to even use changeStaticBasePath.

The line bundlerManifest[id].file cause an issue because in bundlerManifest array we want to get virtual:#vinxi/handler/client whereas we only have virtual:$vinxi/handler/client. Replacing solve the issue. However, I do not find the process that lead to the wrong notation.

if (id === "virtual:#vinxi/handler/client") {
    id =  id.replace("#", "$");
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to load static assets in AWS Lambda #1566

{{title}}

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Unable to load static assets in AWS Lambda #1566

Rizialdi Jun 28, 2024

Replies: 4 comments

doeixd Jun 28, 2024

Rizialdi Jun 28, 2024 Author

doeixd Jun 28, 2024

Rizialdi Jun 28, 2024 Author

Rizialdi
Jun 28, 2024

doeixd
Jun 28, 2024

Rizialdi
Jun 28, 2024
Author

doeixd
Jun 28, 2024

Rizialdi
Jun 28, 2024
Author