Problem with js files path, NuxtJS+AWS Lambda

Question

Tried to deploy my nuxt app to aws lambda. Read this articles:

https://medium.com/@fernalvarez/serverless-side-rendering-with-aws-lambda-nuxtjs-b94d15782af5

https://dzone.com/articles/a-crash-course-on-serverless-side-rendering-with-v

All works but have some js errors in console. Tried multiple variants for "router.base" and "build.publicPath" config with no luck.

Here is my env:

nuxt.config.js: https://pastecode.xyz/view/69ad1f00

package.json: https://pastecode.xyz/view/2401a6d2

server.js: https://pastecode.xyz/view/48012477

handler.js: https://pastecode.xyz/view/b59848a5

serverless.yml: https://pastecode.xyz/view/5916f406

So, when I visit deployed app, all is nice except errors in js console:

As I checked in html code, the path for this js is generated as:

https://*******.execute-api.eu-central-1.amazonaws.com/dev/_nuxt/7881ea044902e4092627.js

which is 404, BUT! this one is present:

https://*******.execute-api.eu-central-1.amazonaws.com/dev/dev/_nuxt/7881ea044902e4092627.js

You can see additional /dev/ which I added manually. So, what should I do to make it loaded? What am I missing in config (and in which one)?

Seems like second dev in there is the one defined in your config file. First dev is the stage name for the API. That seems to be the only explanation for your described behavior. build: { publicPath: '/dev/_nuxt/', //more code } — asr9
– asr9, Commented Feb 15, 2019 at 20:00
Have you tried setting publicPath as /_nuxt/? Or maybe you can append the URL path serverless returns with you publicPath. — asr9
– asr9, Commented Feb 16, 2019 at 13:35
@asr yeah, already tried. i tried these variants: router.base = ‘/’ && publicPath = ‘/dev/_nuxt/’ router.base = ‘/’ && publicPath = ‘/_nuxt/’ router.base = ‘/dev/’ && publicPath = ‘/dev/_nuxt/’ router.base = ‘/dev/’ && publicPath = ‘/_nuxt/’ neither one working. — Clark
– Clark, Commented May 16, 2019 at 9:42

Edison Harada · Accepted Answer · 2019-07-07 00:13:35Z

Just to try to explain what happens:

Probably the API Gateway is redirecting your application to run with the path "/dev", so when we access "/dev" it redirects inside to our Nuxt application and it returns as 200, and when Nuxt try to get the files it doesn't add the path "/dev". But if you change the "publicPath" to "/dev/_nuxt/", then you can access your file with the path "/dev/dev/_nuxt", the first "dev" probably is API Gateway adding it, and when your Nuxt app try to get the file it goes to "/dev/_nuxt/" and you get 404.

I couldn't really fix it, but if I start using the real domain I won't have those problems because API Gateway will stop adding this "/dev" to my path. To do it you can use the plugin to serverless "serverless-domain-manager".

I also created an article about how to create a Nuxt Application with Typescript, you can check there how to do it: https://www.linkedin.com/pulse/nuxt-typescript-koa-serverless-edison-harada

Collectives™ on Stack Overflow

Problem with js files path, NuxtJS+AWS Lambda

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related