{"id":2258,"date":"2018-08-01T16:10:12","date_gmt":"2018-08-01T16:10:12","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2258"},"modified":"2023-07-18T13:03:41","modified_gmt":"2023-07-18T17:03:41","slug":"adding-aws-amplify-to-an-ionic-4-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app","title":{"rendered":"Adding AWS Amplify to an Ionic 4 App"},"content":{"rendered":"<p><a href=\"https:\/\/aws-amplify.github.io\/amplify-js\/index.html\" target=\"_blank\" rel=\"noopener\">AWS Amplify<\/a> is a JavaScript library that brings their backend services to web and mobile apps. At first glance, it appears to be a simple wrapper for their cloud services. In reality, it\u2019s so much more: a curated set of backend features that make getting started with AWS much easier than ever before.<\/p>\n<p>With a few simple CLI commands, you can easily supercharge your app with:<\/p>\n<ul>\n<li>Messaging<\/li>\n<li>Analytics<\/li>\n<li>User sign-in, sign-out, forgot password<\/li>\n<li>Databases<\/li>\n<li>Static website hosting (<a href=\"https:\/\/ionicframework.com\/pwa\" target=\"_blank\" rel=\"noopener\">PWAs<\/a>, anyone?!)<\/li>\n<li>File storage<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h2>Getting Started<\/h2>\n<p>The Amplify team recently published a guide on <a href=\"https:\/\/aws-amplify.github.io\/amplify-js\/media\/tutorials\/building-ionic-4-apps\/\" target=\"_blank\" rel=\"noopener\">how to build an Ionic 4 app with AWS Amplify<\/a>. By following along, you\u2019ll build a complete ToDo app. It\u2019s not just any ordinary ToDo app though: the user must sign into the app before creating todos. Also, the todos are saved in the cloud using services such as Amazon Cognito, DynamoDB, Lambda.<\/p>\n<p>I won\u2019t rehash the guide here; instead, let\u2019s take a look at what I liked and disliked about my initial experience, as well as the impact that adding AWS Amplify to your Ionic 4 app can have.<\/p>\n<p>The first part of the guide involves the creation of an Ionic 4 app that uses Ionic\u2019s <code>tabs<\/code> starter project. Three pages are provided: \u201cHome\u201d, \u201cAbout\u201d, and \u201cContact.\u201d The ToDo model and UI TypeScript classes are created next, with full Angular code samples provided for reference. The ability to add and remove items in the list are added as well. The interesting twist here is the inclusion of an authentication-based <a href=\"https:\/\/angular.io\/guide\/router#milestone-5-route-guards\" target=\"_blank\" rel=\"noopener\">route guard service<\/a>, which essentially blocks the user from viewing the ToDo list until after they have signed into the app via AWS. The purpose for doing so becomes clearer as you go through the guide &#8211; you\u2019ll eventually add a user sign-in experience. The resulting ToDo list page looks very nice:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-2271 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist.png\" alt=\"to do app\" width=\"80%\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist.png 1076w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-229x300.png 229w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-768x1005.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-783x1024.png 783w\" data-sizes=\"(max-width: 1076px) 100vw, 1076px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1076px; --smush-placeholder-aspect-ratio: 1076\/1408;\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-2271\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist.png\" alt=\"to do app\" width=\"80%\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist.png 1076w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-229x300.png 229w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-768x1005.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todolist-783x1024.png 783w\" sizes=\"(max-width: 1076px) 100vw, 1076px\" \/><\/noscript><\/p>\n<p>To add the sign-in experience and store ToDo items in the cloud, there\u2019s more work to be done. This is where the magic of AWS starts to shine!<\/p>\n<h2>Working with the AWS Mobile CLI<\/h2>\n<p>Similar to Ionic, AWS Amplify puts heavy emphasis on their command line interface tool (CLI), used to create and manage all AWS backend resources. Available commands are mostly intuitive, such as \u201cinit\u201d, which walks you through creating a backend project. I was a bit confused at first about some of the prompts regarding what to provide for source and distribution directories, but fortunately the guide provides suggested answers:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"139\" class=\"aligncenter size-full wp-image-2263 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init.png\" alt=\"AWS init command\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init.png 784w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init-300x53.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init-768x136.png 768w\" data-sizes=\"auto, (max-width: 784px) 100vw, 784px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 784px; --smush-placeholder-aspect-ratio: 784\/139;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"139\" class=\"aligncenter size-full wp-image-2263\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init.png\" alt=\"AWS init command\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init.png 784w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init-300x53.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-init-768x136.png 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/noscript><\/p>\n<p>Another concern arose quickly at the start of using the CLI. In order to provision AWS resources, you must configure an Identity Access Management (IAM) user. IAM is still a source of confusion for me. Given the dozens of policies available, I\u2019m always worried that I won\u2019t select the correct permissions. Fortunately, the steps are quite clear and connecting the user to the CLI is a one-time step.<\/p>\n<p>With the CLI installed and after running a couple of <code>npm install<\/code> commands, it\u2019s easy to add Amplify to an Ionic 4 app. We simply import Amplify into the project in src\/main.ts:<\/p>\n<pre><code class=\"typescript\">import { enableProdMode } from &#039;@angular\/core&#039;;\nimport { platformBrowserDynamic } from &#039;@angular\/platform-browser-dynamic&#039;;\nimport { AppModule } from &#039;.\/app\/app.module&#039;;\nimport { environment } from &#039;.\/environments\/environment&#039;;\n\n\n\/\/ Add AWS Amplify\nimport Amplify, { Analytics } from &#039;aws-amplify&#039;;\nimport aws_exports from &#039;.\/aws-exports&#039;;\nAmplify.configure(aws_exports);\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =&gt; console.log(err));\n<\/code><\/pre>\n<h2>Adding Authorization\/User Sign-in<\/h2>\n<p>With the boilerplate configuration in place, it\u2019s time for the best part: adding Amplify-specific features to our ToDo app such as a user sign-in experience. The first feature, authorization, uses Amazon Cognito behind-the-scenes. To enable it is quite straightforward:<\/p>\n<pre><code class=\"bash\">awsmobile user-signin enable \nawsmobile push\n<\/code><\/pre>\n<p>There\u2019s a lot to unpack in those two lines that isn\u2019t necessarily obvious. For one, there\u2019s no mention of the underlying services. Rather, a friendly name is used instead: \u201cuser-signin.\u201d This is a common pattern among all Amplify services: the AWS technology that powers the feature is abstracted away from the developer. This is certainly great for the beginner, but more advanced users may be put off as they try to figure out how to perform advanced configurations.<\/p>\n<p>The second command, referencing \u201cpush\u201d, seems a bit strange. What are we pushing? As it turns out, when you run \u201cawsmobile feature enable\u201d, changes are only made to your local project &#8211; the aws-exports.js file. It\u2019s only after you \u201cpush\u201d that this file is synced to the AWS cloud, in effect enabling the feature on the backend. This makes sense once you understand how it works, but I initially assumed that enabling features from the CLI immediately enabled them on the backend.<\/p>\n<p>This confusion led me to log into the AWS Mobile Hub, a section of the AWS console that allows you to view and configure the enabled backend features. I love the simplicity and clarity it provides:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1760\" height=\"980\" class=\"aligncenter size-full wp-image-2272 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend.png\" alt=\"mobilehub + backend\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend.png 1760w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-300x167.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-768x428.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-1024x570.png 1024w\" data-sizes=\"auto, (max-width: 1760px) 100vw, 1760px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1760px; --smush-placeholder-aspect-ratio: 1760\/980;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1760\" height=\"980\" class=\"aligncenter size-full wp-image-2272\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend.png\" alt=\"mobilehub + backend\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend.png 1760w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-300x167.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-768x428.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mobilehub-backend-1024x570.png 1024w\" sizes=\"auto, (max-width: 1760px) 100vw, 1760px\" \/><\/noscript><\/p>\n<p>Once your backend feature is enabled, you can also use the AWS console for the related service to customize your backend, e.g., using Amazon Cognito for the User Sign-in feature.<\/p>\n<p>After adding a couple more bits of Angular code to our app, authentication is available on the Home tab:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-2273 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin.png\" alt=\"Todo Login\" width=\"80%\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin.png 1076w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-229x300.png 229w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-768x1005.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-783x1024.png 783w\" data-sizes=\"(max-width: 1076px) 100vw, 1076px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1076px; --smush-placeholder-aspect-ratio: 1076\/1408;\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-2273\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin.png\" alt=\"Todo Login\" width=\"80%\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin.png 1076w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-229x300.png 229w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-768x1005.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/todologin-783x1024.png 783w\" sizes=\"(max-width: 1076px) 100vw, 1076px\" \/><\/noscript><\/p>\n<p>Now this is wicked cool! AWS Amplify provides several Angular UI components, including the full sign-in experience above. Adding a simple one-liner to this page, optionally styled with Ionic UI components, results in a ton of development time saved!<\/p>\n<pre><code class=\"typescript\">&lt;amplify-authenticator framework=&quot;ionic&quot;&gt;&lt;\/amplify-authenticator&gt;\n<\/code><\/pre>\n<p>The default UI looks pretty good out-of-the-box and is fully responsive. As briefly mentioned in the guide, you can <a href=\"https:\/\/aws-amplify.github.io\/amplify-js\/media\/authentication_guide.html#customize-ui-theme\" target=\"_blank\" rel=\"noopener\">change the look and feel of the UI<\/a> rather easily.<\/p>\n<h2>Storing ToDo Items via Amazon DynamoDB<\/h2>\n<p>At this point in the guide, we\u2019ve got a ToDo list that users must sign-in to access, but the items aren\u2019t saved anywhere &#8211; they\u2019ll disappear after the app is closed. As it turns out, storing them in a cloud database is easy enough. With just a handful of awsmobile CLI commands, a DynamoDB NoSQL database is created and available immediately.<\/p>\n<p>We have a cloud database now, but we need to somehow add the ability to add, update, and remove todos from within our app. The next step in the guide is perhaps the most impressive:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"182\" class=\"aligncenter size-full wp-image-2267 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api.png\" alt=\"AWS CRUD API\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api.png 656w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api-300x83.png 300w\" data-sizes=\"auto, (max-width: 656px) 100vw, 656px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 656px; --smush-placeholder-aspect-ratio: 656\/182;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"182\" class=\"aligncenter size-full wp-image-2267\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api.png\" alt=\"AWS CRUD API\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api.png 656w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-crud-api-300x83.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/noscript><\/p>\n<p>Automatic creation of a CRUD (create\/read\/update\/delete) API for the ToDoItems database is a huge time saver. Behind the scenes, AWS hosts the backend API in AWS Lambda, their \u201cserverless\u201d service that runs code on-demand, without a provisioned server. Over in the Ionic 4 app, boilerplate JavaScript code is added to the project that exposes simple API endpoints. Here\u2019s the Save method, for example:<\/p>\n<pre><code class=\"typescript\">save(list){\n    \/\/ Use AWS Amplify to save the list...\n    this.amplifyService.api().post(&#039;ToDoItemsCRUD&#039;, &#039;\/ToDoItems&#039;, {body: list})\n      .then((i) =&gt; {\n        \/\/ and to get the list after you save it.\n        this.getItems();\n      })\n      .catch((err) =&gt; {\n        console.log(`Error saving list: ${err}`);\n      });\n  }\n<\/code><\/pre>\n<p>With that final touch, the ToDo app is complete. Todo items are now saved in the cloud under each unique users\u2019 account. Check out the full app experience:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1544\" height=\"1502\" class=\"aligncenter size-full wp-image-2274 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-amplify-fancytodos.gif\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1544px; --smush-placeholder-aspect-ratio: 1544\/1502;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1544\" height=\"1502\" class=\"aligncenter size-full wp-image-2274\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/aws-amplify-fancytodos.gif\" alt=\"\" \/><\/noscript><\/p>\n<h2>Final Thoughts<\/h2>\n<p>AWS Amplify is a killer service that allows you to quickly add backend cloud features to your mobile app. Overall, I think it is a solid solution for Ionic developers looking to incorporate a cloud backend into their app. There are some improvements that could be made, mostly around providing better visibility into the costs of enabling each Amplify service.<\/p>\n<p>If my experience piqued your interest, check out Amazon\u2019s <a href=\"https:\/\/aws-amplify.github.io\/amplify-js\/media\/tutorials\/building-ionic-4-apps\/\" target=\"_blank\" rel=\"noopener\">complete guide to building Ionic 4 apps with AWS Amplify<\/a>. When you pair the Amplify backend with an Ionic starter app, you\u2019ll have a working full stack solution in no time.<\/p>\n<p>We \ud83d\udc99 great cloud backends at Ionic. We\u2019re continuing to work with the AWS team to provide feedback on making the Ionic + AWS experience better.<\/p>\n<p><strong>What cloud features and integrations would you like to hear more about?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps. At first glance, it appears to be a simple wrapper for their cloud services. In reality, it\u2019s so much more: a curated set of backend features that make getting started with AWS much easier than ever before. With a [&hellip;]<\/p>\n","protected":false},"author":62,"featured_media":2270,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,122,124],"tags":[109,6,110],"class_list":["post-2258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-product","category-tutorials","tag-aws","tag-cloud","tag-partners"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding AWS Amplify to an Ionic 4 App - Ionic Blog<\/title>\n<meta name=\"description\" content=\"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding AWS Amplify to an Ionic 4 App\" \/>\n<meta property=\"og:description\" content=\"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-01T16:10:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T17:03:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2800\" \/>\n\t<meta property=\"og:image:height\" content=\"1400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"Adding AWS Amplify to an Ionic 4 App\",\"datePublished\":\"2018-08-01T16:10:12+00:00\",\"dateModified\":\"2023-07-18T17:03:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\"},\"wordCount\":1220,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png\",\"keywords\":[\"aws\",\"Cloud\",\"partners\"],\"articleSection\":[\"All\",\"Product\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\",\"url\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\",\"name\":\"Adding AWS Amplify to an Ionic 4 App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png\",\"datePublished\":\"2018-08-01T16:10:12+00:00\",\"dateModified\":\"2023-07-18T17:03:41+00:00\",\"description\":\"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png\",\"width\":2800,\"height\":1400,\"caption\":\"Ionic + AWS Amplify\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding AWS Amplify to an Ionic 4 App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding AWS Amplify to an Ionic 4 App - Ionic Blog","description":"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app","og_locale":"en_US","og_type":"article","og_title":"Adding AWS Amplify to an Ionic 4 App","og_description":"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.","og_url":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app","og_site_name":"Ionic Blog","article_published_time":"2018-08-01T16:10:12+00:00","article_modified_time":"2023-07-18T17:03:41+00:00","og_image":[{"width":2800,"height":1400,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","type":"image\/png"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"Adding AWS Amplify to an Ionic 4 App","datePublished":"2018-08-01T16:10:12+00:00","dateModified":"2023-07-18T17:03:41+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app"},"wordCount":1220,"commentCount":8,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","keywords":["aws","Cloud","partners"],"articleSection":["All","Product","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app","url":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app","name":"Adding AWS Amplify to an Ionic 4 App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","datePublished":"2018-08-01T16:10:12+00:00","dateModified":"2023-07-18T17:03:41+00:00","description":"AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps and make getting started with AWS much easier.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","width":2800,"height":1400,"caption":"Ionic + AWS Amplify"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/adding-aws-amplify-to-an-ionic-4-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Adding AWS Amplify to an Ionic 4 App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/ionic-aws-amplify-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2258"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2258\/revisions"}],"predecessor-version":[{"id":5501,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2258\/revisions\/5501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2270"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}