Add a custom CloudFormation stack output with CDK
Once we deploy static assets to an S3 bucket it's good to know, well, where are they exactly - saying that "they're in the cloud" is not a good answer.
We can find the S3 bucket and other resources in AWS Console manually but there's a better solution - creating custom CloudFormation stack outputs that are displayed in the terminal once we deploy.
In this quick lesson we're going to learn how to create a custom CloudFormation stack output in order to output the path to an egghead logo in order to add it to our app.
Instructor: [0:00] There's one more thing that we can and honestly should fix in our app. If you notice, over here, we are supposed to display the egghead logo. If we take a look at our app, we can see that right now, we are not displaying anything because the source property of our logo is empty.
[0:14] We can fix that. If we take a look at ToDo-App-stack, we can see that we are in fact creating a logo bucket to store the logo and also, we are deploying that using S3 bucket deployment. This is uploading the egghead logo from our assets directory to S3.
[0:27] How do we find that afterwards? Well, for instance, we could go to CloudFormation, click on our stack. Afterwards in the resources, we can search for our S3 bucket, click on the id of our logo bucket, and we can see our egghead logo over here. After you click on that, you can see the path to the file over here.
[0:42] Honestly, all of that is kind of manual. Luckily, we can automate that. If you notice, after we deploy, we can see an output section over here. Currently, this is containing our endpoint. This is an example of CloudFormation output and because CDK is built on top of CloudFormation, we can define our very own CloudFormation outputs.
[0:59] To do that, go back to our main stack. In order to define a CloudFormation output based on the logo bucket add new cdk CfnOutput. This is going to take this as the first argument. Next time, I'm going to call it logo-path.
[1:12] The only [inaudible] that we have to pass to CloudFormation output is the value. In this case, the value is going to be HTTPS. Next, we have to get the address of our logo bucket. I'm going to do logobucket.bucketdomainname, which is the DNS name of the specified bucket.
[1:28] Next, I'm going to add the name of our file. This is the eggheadlogo.png. Next, run cdk deploy in our terminal. After we deploy, we can see our local path CloudFormation output in the output section over here. This is the URL of our logo bucket. Let me click on that and we can see the egghead logo in the browser.
[1:45] Let's go ahead and add it to the app. Go back to our frontend app file and paste the source over here. Now, if we go back to our ToDo-App, we can see the egghead logo over here. Now, our app is finished, and it is ready to be deployed to the web.
This is still a bit manual. Is there a way to dynamically replace the logo url in the react app? Would react app have to be deployed using the same stack?