Managing Multiple Environments with Angular and AWS Amplify Made Easy

Today I going to discuss how you can manage a single environment in AWS Amplify & obviously with multiple backends in GraphQL. What does diff based backend mean? In a simple way, Let's say, You start developing an application in the dev branch initially and you entried many dummy data and also have dummy user credentials for test purposes, but now you want to deploy a fresh build into prestage mode this app, Now how you do that? This is the agenda for today. Let’s get into it.

Technology that I am using : Angular, AWS Amplify

Initial Scenario : I suppose you do it well in dev with the aws-amplify setup and rest of the things, like - Add GraphQL api, completing CURD, user Authentication using AWS Amplify auth components also dev deployment. Now you stuck into how you can build a fresh build into a fresh environment without the dev's branch dummy data.

If you are beginner I'm sure that you are frustrated that you can't get solution also after reading the docs. No worries. Here the steps you can go through

• 1 Step
  Check the environment status first amplify status you can saw current environment is set to dev
  Here you can note down the GraphQL api endpoint and API KEY, just for later check purpose.

  note : If you tried before to create environment before for the same project you can check that's are created or not via the amplify env list.

• 2 Step
  Once you sure about the which environment you are, then you need to create a new environment in aws-amplify, it will be better if you checkout
  git branch with a fresh copy of dev, because if any thing goes wrong you can start again from the stage you are going to be start now.
  run command 'amplify init`,it will ask you several questions

  Answer as follow :

  • Do you want to use an existing environment ? - No
  • Enter name for the environment - TYPE_YOUR_ENV_NAME_HERE
  • Select the authentication method you want to use : AWS profile [ But you can choose another ]
  • Choose the profile you want to use - SELECT_CURRENT_USED_PROFILE Then you gonna see "Your project has been successfully initialized and connected to the cloud"

• 3 Step

  • Now try to add api amplify add api you gonna see soon that amplify tell you to go with the update command which is amplify update api

  • Run amplify update api, then it will show you some default pre-setuped information & ask you some question to answer. You can answer these as bellow :

    • Select a setting to edit Authorization modes
    • Choose the default authorization type for the API - YOUR_CHOOICE
    • Enter a description for the API KEY : ENTER_THE_GRAPHQL_API_KEY (that you saved earlier)
    • After how many days from now the api key should expire : YOUR_CHOOICE
    • Configure additional auth types ? YOUR_CHOOICE Now run amplify status you can see that all the operations now are in create mode. That's mean you are almost done. ┌──────────┬────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Auth │ ampyt48e9a487 │ Create │ awscloudformation │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Hosting │ amplifyhosting │ Create │ awscloudformation │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Api │ ampyt │ Create │ awscloudformation │ └──────────┴────────────────┴───────────┴───────────────────┘ all the operation are in create mode.
    • now run amplify push it will give an new GraphQL API endpoint and API KEY or you can check it after amplify push then you will able to see the same key it will given. You have to remember that, that's key only for the new environment that you created now not for another environment.

• 4 Step

  • Note : This is crusal part of this blog if you failed here you cant able to do diff based backend. So, try to understand step 4 in cool mind.
  • now you have to checkout one more time via 'amplify env checkout ENV_NAME'
  • after checkout update the API via amplify update api rest of the things are same as step 3 but here you just need to put this API KEY which you got earlier when you push new environment into cloud the GraphQL API KEY. Just paste it there and go on.

• 5 Step

  • Now push it into cloud by amplify push
  • Deploy the frontend amplify publish

Check it out that is it works or not.

If in some end point you got access denied error you can check this solution