An Experience with AWS Amplify & ReactJs
3 months ago my knowledge about AWS was very limited. I have used lots of tools and programming languages in my previous company. But because of regulations, we could not use any cloud platform such as AWS. I’ve decided to work myself but to be honest learning AWS was coming very difficult. Also, I knew that if I learned I could not use it in my company. That is why I gave up learning.
I wish I did not give up.
In July of this year, I resigned from my previous company, I’ve come to Softtech Ventures Co. When I started my colleagues were on eve of the decision to change their technology and infrastructure. I’ve joined their research process to decide on one cloud platform. Then, we’ve decided to use AWS. We have two main reasons for choosing AWS; the first reason was my colleague has knowledge that will give us quick learning about AWS. Another reason was AWS has all solutions for our needs. Because of these main reasons we’ve chosen AWS.
We have to needed to develop web pages and service API for our main project.
We have chosen AWS Amplify that has excellent compatibility with the web pages. Also, AWS Cognito is a great solution for authentication authorization. That is why we chose Cognito. We’ve used ReactJs for the front end. Learning ReactJs was very easy and that was very important to me. Now I want to share my experience with both learning AWS, ReactJs and using them.
First; I want to share my experience with AWS Amplify. As many developers do the same, For learning I looked at the AWS tutorial of course. But very soon, I have realized that the tutorial is very complicated. There’s tons of information in the tutorial, which is causing confusion. If you are a newbie the tutorial may not be a good starting point for you. When I researched for choosing a cloud platform, I was encountered that some articles said that learning AWS a bit hard more than others, and yes they are right :) Really If you decide to learn AWS, you need to time and effort seriously. Luckily, I have a friend who is a maestro about AWS. Thanks to my friend that I was learning and applying to the project faster.
As I mentioned before; We needed a web application that has admin pages and a service API which is called from the client. For this, we have used AWS Amplify, AppSync, DynamoDB, and Cognito services. Also, we developed web pages with ReactJs which is simple and has great compatibility with Amplify.
Yes, we have created our first ReactJs project with Amplify. We followed instructions such as given in the link.
Now I want to explain in a two-step. 1st step will be about admin pages and structure. 2nd step will be about service API.
Step 1- Admin Pages
We developed the pages that we need with ReactJs.
After configuring our project via console, we created our database via AWS console. For the database, we used DynamoDB which is NoSQL.
We made a bit mistake here. Because we configured via console and then we want to change some of that configuration with code. But doing this required extra effort. So, as possible do your all configuration at the same place.
When we created the project, we chose GraphQL API. Some files were created automatically. One of them is schema.graphql that looked like following;
schema.graphql ;
You can define your table and attributes in schema.graphql. After adding all your requirements, then with amplify codegen created queries.js, mutations.js, and subscriptions.js files under src/graphql folder according to schema.graphql defines automatically. If you need you can create your custom queries in src/graphql folder. Also, you can customize your schema.graphql as your requirement also.
I want to say that understanding GraphQL comes more complex than I expected. Because I was not familiar with GraphQL structure. That is why I gave extra effort and time to understand(I confess some points are blurred still).
When we built our code via amplify api gql — compile .req.vtl and .res.vtl files were created in the resolvers folder automatically. You can customize those folders as your requirements. The folder structure is as follows;
I was not familiar with Stack and Resolver concept also. So, I had a bit difficulties to understand.
.req.vtl extension file something like following;
and .res.vtl ;
Step 2- Service API
After completion of step 1, we developed GraphQL API that called from clients. The structure is as follows simply;
We used AWS Cognito for authentication for both steps.
Second, now I will mention about ReactJs. We used ReactJs for the frontend. ReactJs is a declarative, component-based javascript library. Why did we choose ReactJs? Because it is very simple and very powerful. ReactJs has tons of examples and rich sources on the internet. Also, understanding ReactJs is very easy. I was adapted very quickly.
Summary; As a first-time user of both ReactJs and AWS services, it has been a great experience for me.
Thank you for your patience to read. Hope you have fun…
* I want to thank my mentor and friend Kemal Bayer for helping me to easily understand.
İbrahim Halil Ateş
Senior Software Engineer
