The video demonstrates troubleshooting a web application deployment. It covers configuring Stripe webhooks, fixing environment variable issues for redirects, updating Next.js image configurations to support custom domains, and identifying persistent storage limitations on Elastic Beanstalk that necessitate migrating images to AWS S3.
Length 8:05
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #websocket #stripe #deployment #next.js #aws #webhook #environment variables #s3 #software development #debugging
0:00 So for the simple WebSocket test, I've just opened up two clients here, 0:05 and let's go ahead and create a new product 0:09 in one tab 0:11 so that we can see it immediately populate in the second client. So this is great. 0:15 We can see our WebSocket connection working as expected end to end. 0:19 Let's go ahead and continue this by clicking on a product and trying to 0:23 check out with it in Stripe. I'll go ahead and fill out my test 0:27 payment card details. So I'll go ahead and finish paying for this 0:31 product, 0:34 and you can see we've successfully checked out, but now we're being redirected to 0:37 the wrong URL here, which is localhost:3000. 0:41 Now, the reason for this is because we haven't set up our redirect 0:45 URL 0:45 environment variables correctly in our Elastic Beanstalk 0:48 environment. But now that we have a UI running on our custom 0:52 domain, 0:52 let's go ahead and do this by going to our configuration 0:56 and wait until we can edit the bottom block here, which is where we can add 1:00 environment variables. So go ahead and edit this and scroll to the 1:04 bottom, so we can add new environment variables. 1:07 So of course, from our back end, we know we need our Stripe success URL, 1:11 which we now know is going to be pointing to 1:15 our UI URL, which is gonna be 1:18 shoppyapps.com. 1:22 Let's go ahead and add the same URL for our cancel URL here, 1:26 so we go back to our URL after we have completed checking out. 1:30 So go ahead and apply these changes to have them rolled out. 1:34 All right, so after our environment has updated 1:36 successfully, let's go 1:38 back to our UI and 1:41 check this product out again, so we can give this another go. 1:46 I'll copy my test payment details and fill this out.
The rest of the transcript is for members.
Sign in 