In several projects I have worked I have faced the challenge to deliver a sample of what will be done at the end of the project. Usually, this will be after some sessions where the requirements will be gathered and brainstorming of ideas will take place 🤔.
As a result, sometimes we will have a whiteboard full of comments and some meeting notes with a quick summary, from which the developer team needs to start the analysis and development. For this, the deployment of the infrastructure can also take some time before we can actually see some samples running ⏲️.
All of this can take some time, depending on the expertise of our teams, but we would still lose time during this initial setup. Luckily on one of my past projects, I got the opportunity to work with AWS Amplify
This means that our teams can leverage the deployment of both the frontend and the backend components to Amplify 🧐.
I will use React for my frontend, which will be requesting ChatGPT to generate some HTML mock files which then we can use as a starting point.⚠️Please be aware that the use of the exact same code delivered by ChatGPT is not recommended for production use cases, as it might cause issues with plagiarism, and this is just for demo purposes to show the integration with the API from OpenAI⚠️.
Having said that, I used as a base this link from AWS to initialize the components for the demo.
I'm using a GitHub repository, which can be integrated with Cognito in order to deploy the latest commit as soon as it gets pushed.
We can also add the backend components with Amplify Studio. The UI is quite intuitive and in just a few clicks we can have the components for Authentication (Cognito), Data (AppSync and DynamoDB), Storage (S3), and Functions (Lambda).
And the great part is that it also provides a CLI to use in our console to make these deployments also. For the demo, I added just the above components and modified the data schema to support the description, image, and HTML code of the mock file we want to deploy.
Following the Getting Started link I shared before, all of this took me less than an hour. This means I can focus my time on what my webpage needs to do, instead of breaking my head deploying all services needed! 😎
The sad part is that my frontend skills are not so great, so my modifications were quite simple and were the ones that took me a little more time than expected 🤯.
To begin with, I needed to modify the Lambda function, to read the description of each item and the uploaded image, which has a draft of what we want as a mock file. Based on that, I send a request to ChatGPT to generate the HTML file and store the response on the HTML attribute of the item. In the meantime, the HTML attribute has the name of the item. I also added 2 more columns, one to reflect the value of the HTML attribute of our items and another one for an external link (a little more about that in a moment)
The request to ChatGPT is quite simple for this demo, but this could be also completely parametrized and of course we can train our own model based on our needs, but I keep it simple for the demo and use one of the default ones.
The Lambda function is configured to be triggered by an S3 Event, whenever an image is uploaded with our front end. The best part of this is that with the AWS CLI, we can add this trigger configuration since the trigger happens from the S3 bucket that acts as storage for our amplify project. This step is then asynchronous and will take some time to be reflected on our site, but once we click on refresh we will see the mock HTML.
Now coming back to the external link. I created manually a CloudFront distribution to expose the HTML files generated by ChatGPT. I needed also to modify the Lambda function to store the HTML file also in S3, which acts as the origin for CloudFront.
Here is worth mentioning I'm using Amplify Hosting as a solution to expose my React App. It is also possible to use instead CloudFront + S3 and let Amplify do also this deployment. If we would want more control with setting up a CDN and hosting buckets, that would be the option to use, but for this demo, Amplify Console (Hosting) is more than enough... but I might change the deployment later to just use CloudFront + S3 😼.
Anyways, now if we follow the link, we can actually see the HTML mock file, and the great part is that it is automatically generated after we submit our idea in our frontend 🤖.
Another sample
Another HTML mock file was automatically generated
Lessons learned
Amplify can help us to reduce the development time for our apps. It provides not only support for React but also for other popular frameworks for both web and mobile development.
If we lack a deep knowledge of all the AWS services needed for this kind of application, this can save us from a lot of problems, but if we are an enterprise company where we have several kinds of projects in the same account (for any reason), things get tricky.
Even though we can import existing AWS resources as Amplify components, it might get quite complex to manage the shared resources and not mess with other projects. On top of that, if our application would require specific requirements like being able to access our app only from the Intranet of our company, this solution might not be the recommended way, as we would need to deal with network configuration, maybe adding a WAF for IP filtering or choosing another solution that provides compatibility with VPC + DirectConnect integration, which would make the deployment quite a mess 🙀.
Aside from that, ChatGPT is a tool that can help us in some situations, keeping heavily in mind we should still interpret the results that it gives us. The potential it provides is great if we also consider custom models, but that was out of the scope of the demo.
I hope these lessons are helpful for those who want to try Amplify and leave a comment if you would want to play with the demo.
Top comments (0)