Set Up AWS Amplify with JS websites

 

AWS Amplify is an easy-to-use service provided by Amazon Web Services (AWS) and helps build full-stack web and mobile apps efficiently with extensibility.  You can achieve the following purposes using AWS Amplify

  • Develop full-stack apps with authentication, data, storage, and many more services
  • Add new or existing AWS resources through code
  • Build, deploy and host in just a few commands
  • Access more than a hundred and seventy (170) services to set up custom use cases or DevOps
In this writing, steps to set up AWS Amplify with JS websites i.e. ReactJS, NextJS, Vuex/Vue, Angular will be discussed with examples portrayed visually.

Dependencies

  1. Git / Any Git Client to clone your app locally from Github e.g. gitKraken
  2. Editor to edit and write code efficiently e.g. VS Code
  3. Node and NPM to manage and build node modules in your app
  4. AWS Amplify CLI to use AWS Amplify features. You may install it from here or just run the following command in your command prompt (windows) or terminal (iOS).
npm install -g @aws-amplify/cli

Pre-requisites

  1. Clone your repository from GitHub if already not set up locally.
  2. Open the project and terminal (ctrl + `) in your desired code editor i.e. vs code editor
  3. Run the following command to install node modules in your terminal.
npm install

 

Configure AWS Credentials

  • To configure AWS credentials, you need to create secret credentials for your AWS User from the AWS console. To create these secret credentials follow the following steps
    • Sign in to the console from here.

    • After Signing in, create and download your secret credentials from here.

  • After downloading your secret credentials, go to the home directory of the current user in your operating system.
  • In your home directory create a folder named ".aws".
  • In this ".aws" folder you need to create two files; config and credentials.
  • Now create a named profile for your secret credentials downloaded from AWS by adding your credentials to config and credentials files like this
config

credentials

Set up AWS Amplify

  • After setting up AWS credentials, go to your project's directory and write the following command in the terminal.

  • You will be prompted to name your project, in my case I named my project "temp".
  • You will be prompted to confirm your project's configuration, press Enter or Y if your project configuration is correct.

  • Your amplify environment will be configured after selecting your desired named profile configured earlier and you are ready to use AWS Amplify for your project. Find the steps followed in the following video.


Add Desired Service With AWS Amplify

  • As you have set up AWS Amplify with your project, now you can add supported AWS services to your project by running the following command

  • After this command, you will be prompted to choose settings for the desired service and then you can sync the local changes to the cloud by simply running the following command

Deploy Local Changes in Backend to the Cloud

  • You can simply sync your local changes to the resources in the cloud by running amplify push command as follows

This writing covered the steps to initialize amplify with JS apps (web + mobile) and add the supported services to the apps using AWS Amplify. In case of any queries, feel free to contact me via Twitter, email, or comment section of this writing.

Comments

Post a Comment

Popular posts from this blog

Urdu Poetry: Writing and Following the Aruuz

Image
Urdu Poetry (Urdu Shayari) is the most inspiring bit of life for people speaking the Urdu language regardless of their region. Even most of the poetry in the Urdu language falls under the category of sad poetry but yet the readers enjoy it because they relate to it and get the hope feeling that they are not alone in this, Mirza Ghalib's poetry is there too. Moreover, the love for love poetry or any other genre of poetry is not new for humans, we feel and want to express or be expressed. Expression Through Poetry Human is more emotional being rather than social one that's why emotions have a strong emphasis on one's life and they play a vital role in the making of a living. If emotions are not channeled properly they may cause psychic issues and lack of their express results in if not mental diseases at least mental exhaustion. One of the ways to express these emotions is through words: if these words are in the best order (inducing rhythms) and portray their meaning perfect...
Read more

Holy Trinity vs Wahdat ul Wajood: An Attempt to Understand

Image
Jesus of Nazareth--the son of the Virgin Mary-- (Peace be upon him) is equally revered in two of three Abrahamic religions (Christianity and Islam) but the religions have different views on the deity of Jesus and the concept of God. Fundamentally both religions believe that there is only one God referred to as Allah in Quran and The Father in The New Testament. Oneness of God Isiah 44:6 says: Thus says the Lord, The King of Israel and his redeemer, the Lord of hosts: "I am the first and I am the last; besides me there is no God". Quran says: "He is the First and the Last, the Highest and the Most Near, and He has 'perfect' knowledge of all things" (57:3) and "Verily, I am Allah: There is no God but I" (20:14). From the above examples, the oneness of God is depicted with the utmost certainty but their interpretation induces different beliefs in both religions. Islam derives the concept of Tawheed and Christianity proposes the concept of the Holy Tri...
Read more