Oh, wow, I'm really impressed. This is incredibly simple indeed. Some time ago I deployed Nuxt app to Firebase and it was an absolute nightmare to set up. This seems flawless! Please create a video with more details on how it works in the background, as requested in some other comment.
Did I miss a preset setting somewhere? Asking as the default is that it deploys to .nuxt/ without it rather then .amplify-hosting/ as configured / seen at 02:30 in the video.
It should just auto detect the preset. Without anything else needed. You have to make sure you are using the latest version of Nuxt though. Maybe you are using an older version?
Good to hear, thanks for the heads up. But TBH would have been nice if you'd gone into a bit more detail. There's no details in your video or the new docs on what will actually get deployed out when we run this for example. Assume it's setting up a Lambda for the SSR? Why `nypm` in the config and is that required? Will static assets be offloaded to S3, and are rewrites automatic if so? Etc... Thanks anyway, but could have given a bit more depth to be really useful.
The service is fully managed and the resources and deployment is managed by Amplify hosting. So it handles all the offloading of assets and configuration and resources. The log files are available in cloud watch.The nypm in the config just unifies the layer on top of the package manager.
I think it was great to quickly go over the amazing new feature and show it off. For me it got my interest and I'll go dig deeper into it. I think it was also great to show off the collaboration between AWS Amplify team and Nuxt team. I'm sure there is a discord server or some other avenue for you to ask questions. Your feedback is def valuable and I'm sure the AWS Amplify team will update their docs.
It’s amazing the work you made together! Last week I asked this question to Daniel Roe during a conference and he mentioned a feature yet to come with amplify! Is it possible to deploy lambda functions with it?
Thank you for the Video! I'm having a hard time getting my Nuxt 3 application to run with runtime environment variables. What's the best solution for that? In the AWS Documentation I only found an example for Next.js and as far as I understand this only works because Next.js has support for .env files. Nitro doesn't support .env for production or am I wrong?
Huh that really is seamless - Noob question: I wonder with nuxt having this universal rendering which leverages the benefits of SSR, does the amplify tooling allow direct integration to other aws resources, like say lambda, or perhaps even create direct resolvers on dynamodb tables? Or would you still access these resources in a more traditional way through an api gateway and classic fetches like on a pure static hosted site?
Thanks for the hard work Erik. Is there any way to setup branch previews automatically or would I just have to manually set that up for every branch? Also, happy Thanksgiving!
@@ProgramWithErik got it - that's what I figured. What would be dope is if you could configure it to hook into any branch and replicate Netlify and Vercel's branch previews. :o
Hello Erik, is there any way we can get the user-agent from headers on the requests? locally it works, but from the deployed site it doesn't. I suspect the internal cloudfront distribution set for the app doesn't forward all the headers. All I need to know is if the app is running on Android or iOS. How can I achieve this?
Hi Erik, could you give me some advice ? i can't go past the build, it just stops at "CustomerError: Artifact directory doesn't exist: .amplify-hosting.......terminating logging". do you know what might be the issue ?
Hello Erik, thank you for your response, i'v finally figured it out, i replace the npm run build with npm run generate and changed the route for the index.html directory to .output/public and it did the trick. @@ProgramWithErik
Erik, I'm a professor, and I teach web development and spend a considerable time on VueJs. I'd like to my students how to use AWS but I'm weary of having them sign up for accounts for two reasons. 1. I don't want to require something in my class that requires a credit card to sign up. 2. I'm afraid of them losing out on the 12 month free offering. I'm afraid that if they sign up for a free account and only use free services (which is what I'd like them to do while learning) then they won't be able to get the free year later. On the flip side, if they sign up for a free year before they are familiar with AWS then the time will go by without them being able to make use of it. Do you have solutions for either/both of those concerns?
Unfortunately right now, you have to use a credit card to sign up for AWS services. There is no way of getting around that. I would encourage them to use the 12 months free and test it out. Even then, after the 12 month free, most of the AWS amplify services are pay as you go, so there won't be any additional charges.
@@ProgramWithErik hello, thanks, i found out but it does not work (at least from my newbie exp. in the config is a echo "env" before running build.) as a workaround i've forced the .env from my source but is not the way. I've also put the conf of supabase in the nuxt.config.ts to test... it works. If you can do a tut on this matter it will help a lot of people. On my side, i like amplify, i think is straightfwd. What i also would like is to be able to clone fast in different zones, or maybe is using CDN automatically? I started in USA zone but i am based in EU
Zero-config is awesome! But I am having issues with setting this up with a monorepo (I have a web-app folder inside my repository, which contains the nuxt app) and I keep getting "Artifact directory doesn't exist" error. Anyone has any ideas?
cool what if we are using different bakcend such as flask how to do it we have to deploy it in different port and use it or any idea or suggestion whats the best way and also tell me if we are in devloping stage is there any way to check the project if its working without losing money lol coz im so afraid i would make mistake and lose a lot of money from aws
Amplify hosting has pay as you go pricing. You can find more information here. aws.amazon.com/amplify/pricing . It's not like an always on instance. You can always setup billing alerts if you like.
How to deploy nuxt app on Nginx? I'm have other vue.js projects running on nginx i run command of npm run build it's create dist folder in the root but when i run build in nuxt it's not create dist in the root directory so it's not running on nginx. if any one have deploy nuxt3 app on nginix please help me
Oh, wow, I'm really impressed. This is incredibly simple indeed. Some time ago I deployed Nuxt app to Firebase and it was an absolute nightmare to set up. This seems flawless!
Please create a video with more details on how it works in the background, as requested in some other comment.
Sure! Thanks
Lmao it still is, I'm turning to AWS because I'm desesperate right now :')
Did I miss a preset setting somewhere? Asking as the default is that it deploys to .nuxt/ without it rather then .amplify-hosting/ as configured / seen at 02:30 in the video.
It should just auto detect the preset. Without anything else needed. You have to make sure you are using the latest version of Nuxt though. Maybe you are using an older version?
Good to hear, thanks for the heads up. But TBH would have been nice if you'd gone into a bit more detail. There's no details in your video or the new docs on what will actually get deployed out when we run this for example. Assume it's setting up a Lambda for the SSR? Why `nypm` in the config and is that required? Will static assets be offloaded to S3, and are rewrites automatic if so? Etc... Thanks anyway, but could have given a bit more depth to be really useful.
The service is fully managed and the resources and deployment is managed by Amplify hosting. So it handles all the offloading of assets and configuration and resources. The log files are available in cloud watch.The nypm in the config just unifies the layer on top of the package manager.
I think it was great to quickly go over the amazing new feature and show it off. For me it got my interest and I'll go dig deeper into it. I think it was also great to show off the collaboration between AWS Amplify team and Nuxt team. I'm sure there is a discord server or some other avenue for you to ask questions. Your feedback is def valuable and I'm sure the AWS Amplify team will update their docs.
Awesome, so happy!! Thank you!!
Thanks man! Just what I needed.
It’s amazing the work you made together! Last week I asked this question to Daniel Roe during a conference and he mentioned a feature yet to come with amplify! Is it possible to deploy lambda functions with it?
Yup, you can add lambda functions with AWS Amplify!
When will Amplify support GitLab Enterprise Edition? Really need this one 🙏
Thank you for the Video! I'm having a hard time getting my Nuxt 3 application to run with runtime environment variables. What's the best solution for that? In the AWS Documentation I only found an example for Next.js and as far as I understand this only works because Next.js has support for .env files. Nitro doesn't support .env for production or am I wrong?
I have the exact same issue :(
Huh that really is seamless - Noob question: I wonder with nuxt having this universal rendering which leverages the benefits of SSR, does the amplify tooling allow direct integration to other aws resources, like say lambda, or perhaps even create direct resolvers on dynamodb tables? Or would you still access these resources in a more traditional way through an api gateway and classic fetches like on a pure static hosted site?
So AWS amplify is now supporting Nuxt SSR?
Yes
Thanks Erik, I'm really interested by the topics you cover
Thanks!
What's the difference between hosting a Nuxt app on an EBS vs. Amplify? (with SSR enabled)
Assuming you need to handle secrets how would you do that? Also, what do you use as DB and how do you connect to it? Thank you!
Can you provide more details on adding custom variables to in the build settings? I'm having trouble getting that to work on amplify
yeah I am stuck on getting the .env variables to work. I've tried to add in the build commands like - echo "VAR_NAME=$VAR_NAME" >> .env but no luck
Thanks for the hard work Erik. Is there any way to setup branch previews automatically or would I just have to manually set that up for every branch?
Also, happy Thanksgiving!
You set them up per branch.
@@ProgramWithErik got it - that's what I figured. What would be dope is if you could configure it to hook into any branch and replicate Netlify and Vercel's branch previews. :o
How can i give the server routes iam permissions ?
Hello Erik, is there any way we can get the user-agent from headers on the requests? locally it works, but from the deployed site it doesn't. I suspect the internal cloudfront distribution set for the app doesn't forward all the headers. All I need to know is if the app is running on Android or iOS. How can I achieve this?
which one is the best choice? Vercel or AWS?
Vercel for Small apps because it gets expensive if your app scales
Cloudflare pages
Does this work with Gen 2? Gen 2 docs seem to point to this video 🤔
Idk i tried it for 12 ours but i did not get it to work
It doesn't work when you have a api database inside server folder, why ?
It's work for me in static, but no mongo db connection detected... why ?
Hi Erik, could you give me some advice ? i can't go past the build, it just stops at "CustomerError: Artifact directory doesn't exist: .amplify-hosting.......terminating logging". do you know what might be the issue ?
Jump on the aws discord channel, and ask this question there…
The amplify discord that is
Hello Erik, thank you for your response, i'v finally figured it out, i replace the npm run build with npm run generate and changed the route for the index.html directory to .output/public and it did the trick.
@@ProgramWithErik
Erik, I'm a professor, and I teach web development and spend a considerable time on VueJs.
I'd like to my students how to use AWS but I'm weary of having them sign up for accounts for two reasons.
1. I don't want to require something in my class that requires a credit card to sign up.
2. I'm afraid of them losing out on the 12 month free offering. I'm afraid that if they sign up for a free account and only use free services (which is what I'd like them to do while learning) then they won't be able to get the free year later. On the flip side, if they sign up for a free year before they are familiar with AWS then the time will go by without them being able to make use of it.
Do you have solutions for either/both of those concerns?
Unfortunately right now, you have to use a credit card to sign up for AWS services. There is no way of getting around that. I would encourage them to use the 12 months free and test it out. Even then, after the 12 month free, most of the AWS amplify services are pay as you go, so there won't be any additional charges.
Deploying a Nuxt app to Vercel is a breeze
what about the envirnment variables? I have a headache with supabase atm.
You can add environmental variables
@@ProgramWithErik hello, thanks, i found out but it does not work (at least from my newbie exp. in the config is a echo "env" before running build.) as a workaround i've forced the .env from my source but is not the way. I've also put the conf of supabase in the nuxt.config.ts to test... it works. If you can do a tut on this matter it will help a lot of people. On my side, i like amplify, i think is straightfwd. What i also would like is to be able to clone fast in different zones, or maybe is using CDN automatically? I started in USA zone but i am based in EU
Is that better than netlify?
I think you'll have to decide that for yourself. I can tell you with going with AWS, you have the whole AWS ecosystem behind you.
Zero-config is awesome! But I am having issues with setting this up with a monorepo (I have a web-app folder inside my repository, which contains the nuxt app) and I keep getting "Artifact directory doesn't exist" error. Anyone has any ideas?
cool what if we are using different bakcend such as flask how to do it we have to deploy it in different port and use it or any idea or suggestion whats the best way and also tell me if we are in devloping stage is there any way to check the project if its working without losing money lol coz im so afraid i would make mistake and lose a lot of money from aws
Amplify hosting has pay as you go pricing. You can find more information here. aws.amazon.com/amplify/pricing . It's not like an always on instance. You can always setup billing alerts if you like.
Why is it better than other deployment adapters?
What other adapters have you used?
You made the claim, what adapters have you used?@@ProgramWithErik
How to deploy nuxt app on Nginx? I'm have other vue.js projects running on nginx i run command of npm run build it's create dist folder in the root but when i run build in nuxt it's not create dist in the root directory so it's not running on nginx. if any one have deploy nuxt3 app on nginix please help me
It looks like it's working only for the static websites...
It works for static and SSG sites!
@@ProgramWithErik which is static too. I thought it's possible to deploy NUXT 3 app with the backend, just like on Vercel.
now do it on a vps
add cpanel video
I'll look into it.