Taking advantage of AWS Amplify Console for your projects
Before embarking on any project, typically a prototype or proof of concept will be designed. In Web Development, this is no different. As Developers, we want these prototypes to be easily deployed and quickly shareable with team members and clients. Hence, the best option is to host our prototype in the Cloud. In doing this, we avoid relying on our development environment right on our computer. Also, we get the benefit of being able to share our working prototype easily with anyone in the world. Now, the question is:
What can I use to deploy my project quickly?
Fortunately, there are tools that ease the deployment of applications. One of them is Amazons AWS Amplify Console, which will be covering below. Published in November 2018, it is one of AWS’s latest Web Services. It allows us to deploy applications quickly in a few steps. By following the documentation, it gives us a service aimed at implementing continuous deployment. Therefore, it can help us with small and quick projects, as well as any kind of project.
Benefits
- Automatically detects the framework used in your web application. Then, it builds and deploys the app to a globally available content delivery network (CDN).
- Creation of friendly URLs using your branch and app name.
- Update your app after merging the branch that is synchronised with AWS Amplify Console.
- Creation of atomic deployments. This ensures that your app will be always running even if the build process breaks after pushing new changes.
- Using Amazon Route 53 for creating your own custom domains or importing your own from a different registrar.
- Using IAM and CloudFormation to create service roles that let you deploy backend resources with your frontend settings.
Amplify Framework or AWS Amplify Console? 🤷♀
Amplify Framework is a JavaScript library and CLI that you can use to build your mobile or web applications in a cloud-powered environment. This framework provides you with support for React Native, ReactJS, Angular, Ionic and Vue.js. Also, it provides you with support for managing serverless backends and web hosting using the CLI. On the other hand, AWS Amplify Console is an AWS service that deploys your Single Page App or static site on the Cloud. In addition, your project may or not be using Amplify Framework to configure backend resources.
What do I need to start using it?
The most important thing is having an active AWS account. Also, having the project that you want to deploy in a Github, Bitbucket, Gitlab or CodeCommit repo.
Let’s start!
1. Login to your AWS account.
2. Search the Amplify Console service in the AWS Management Console.
3. Click on the Get Started button in the Deploy section.
4. Select the repository’s service of your choice, where the project is allocated. For this example, I chose Github. It will ask you to authorise the use of the AWS Amplify connector. Amplify may have access to public and private repositories.
5. Select the repo that will be listed and the branch that Amplify will use for the deployment.
6. Now, Amplify Console will detect the name of your app and the build-settings from the selected branch. You can also edit those configs and add environment variables if needed. In that case, just click on Edit and use the YML editor. Also, you can click on Download to edit the YML file locally and then add it to the root of your repo.
This YML file has a collection of build commands and settings that Amplify console uses to run your build. There you can find:
- The Amplify Console version number.
- A backend section where you can add commands to run a backend app through your frontend app.
- A frontend section that contains the build commands.
- The artifacts sections where you can specify the directory in which your build artifacts will be added.
- The environment variables.
7. Review the inputs and then click on Save and Deploy.
Deploying process
From this part, we should do nothing. Amplify will take control and will start the deployment. During this process, we can see how the deployment goes through the logs in the Build activity section that appears after the deployment starts. Furthermore, we can verify the details of the build environment that AWS provides us for our deployment.
It’s alive! 🙌
After the deployment is done, you would see all the steps checked and also a Verify section. This section shows your app displayed in different mobile resolution. This is a good way to verify the responsiveness of your app just how I did with my app.
Now we have our app deployed and a URL ready to share with others. 🎉
Updating your branch
If you continue working on your project and want to update your deployed app, you only have to push the changes to your repository branch. Amplify Console will rebuild and deploy automatically.
Conclusion
As you can see, this is a basic implementation of what we can do with AWS Amplify Console. Nonetheless, the idea is to explain how the tool lets you deploy applications in a few steps. In comparison to similar tools like Netlify or Firebase, Amplify Console provides the same service. It has the added benefit of integrating easily with other AWS Services. This makes it a go-to tool for any developer working on the AWS Cloud Infrastructure.
AWS Amplify Console is useful for creating quick deployments of static apps. Also, it generates a URL to share with our colleagues and clients. Amazon has simple documentation that easily guides you through the setup steps. Therefore, we can be focused on our product and not get bogged down dealing with web app deployment.
At the beginning of this post, we were focused on prototypes and POCs because they usually need to be handled quickly. However, this is a service that can be used for any type of project. For example, your personal portfolio or a web app assignment from a new job opportunity.
