Tag: Amplify

Amplify, Amplified

First, quickly: AWS Amplify has a new Admin UI. Amplify always had a CLI that helps you build projects by setting up stuff like auth, storage, and APIs. That’s super useful, but now, you can do those things with the new Admin UI. And more, like model your data (!!), right from a local UI. That’s great for people like… me (I like my GUIs).

Now, slower.

Let’s start with the idea of Jamstack. Static Hosting + Services, right? Amplify is that: static hosting is part of the offering. You connect an Amplify project with a Git repo (you don’t have to, you could upload a zip, but let’s be real here). When you push to the designated branch on that repo (probably main or master), it deploys. That’s part of the magic of development today that we all know and love expect.

Static hosting might be all you need. Done.

But a lot of sites need more. Maybe your site is client-side rendered (for some of it), so the JavaScript hits an API for data and then renders. What data? What API? AWS has these things for you. For us front-enders, that’s probably AWS AppSync, which is like real-time GraphQL (cool). How do you set that up? Well, you can do it in the CLI, but it’s now way easier with the Amplify Admin UI.

Say you’re building a blog structure. Blogs have Posts, Posts have Comments. And so:

I’ll tell ya, coming from a WordPress upbringing and identifying mostly as a front-end developer, this feels doable to me. It’s not far from using Advanced Custom Fields in WordPress to model some data for a Custom Post Type. No wonder the line is so gray between front-end and back-end development.

Now that the Amplify Admin UI has this data modeled out, I can yank it down into my project and the whole schema is mocked out.

I’m bullish on GraphQL, but I can tell ya, all the setup of it is generally over my head. I’m generally very happy just being a consumer of a GraphQL API that is already set up, or doing minor tweaks. This, though, feels doable for me. The visual builder and the freebie scaffolding of the schema… yes please.

At this point then you have this project you can test and deploy. Once it’s deployed, there is a real data store in the cloud ready for data. How do you use it? It’s CRUD time! Create, Replicate, Update, and Delete, the core tenants of all good websites, right? Well, It’s Just JavaScript™. Here’s how you create a new blog, then a post in that blog:

import { DataStore } from '@aws-amplify/datastore'; import { Blog } from './models';  const newBlog = await DataStore.save(  new Blog({    "name": "Name of Blog"  }) );  await DataStore.save(  new Post({    "title": "Blog Post Title",    "blogID": newBlog.id  }) ); 

That all works because the database exists and our app knows all about the data model. But what is DataStore in AWS Amplify? That’s yet another thing that AWS Amplify helps with. They have libraries to make all this easier. You don’t have to manually write fetch calls and do error handling and all that… Amplify libraries make life easier with all sorts of helpers (like you see above).

With all that setup, this slide I saw in their developer preview I got a peak at should make sense

AWS Amplify: Getting it Done

Back to the Jamstack thing… now we’ve got Static Hosting going and we can deploy our website to it. By the way, that can be anything. A vanilla HTML/CSS/JavaScript thing. A React, Vue, or Angular app. Native apps too. Amplify doesn’t care, it just helps with the deployment and services.

Here’s a look at the Admin UI, where you can see the navigation with all the services you can set up, deployment activity, the ability to model (and edit) data, etc.:

What else is in there? With auth for one. If you’re storing data and managing it with API’s, it’s highly likely you’ll be dealing with authentication as well. Amplify has you covered. Need some to run some code server-side? You’ve got your functions right in there of course. Lambdas (serverless functions) are AWS bread and butter. Analytics? You bet.

Another thing you’ll surely be interested in is the different development stories. Like what is local development like? Well, it’s super good. Guess what?! Those screenshots above of the Admin UI… those aren’t some online dashboard in the AWS console, those are locally hosted on your own site. All this data modeling and storage and editing and such happens locally. Then you can push to live to any environment. Production, of course, but also whatever sort of staging environments you need.

When you need production data pulled down locally, you just… do that (with a command given to you right in the Admin UI).

You can join the Amplify team to find out more – they’ll be demoing on Twitch with Q&A this week:

Thursday,  Dec. 3rd at 10-11am PST/ 7pm GMT
Friday,  Dec. 4th at 1-3pm PST / 9pm GMT

I’m thinking this new Admin UI world is going to open up AWS Amplify to a lot more people. Having a UI to manage your site just feels better. For someone like me, it gives me a more complete understanding of what is going on with the backend and services, and more control over things. And yet, give me total freedom on the front end to do what I want to do, and also handle so many of the things I don’t (deployment, SSL, etc.) 👏

The post Amplify, Amplified appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



Looking at AWS Amplify

AWS Amplify is a collection of tools from AWS to help you build applications.

Allow me to set the stage here to try to make that as clear as I know how. I have a friend (true story) who wants to build an app centered around physical training. His wife is a physical trainer, and they think perhaps there is some money to be made. It’s not entirely specced out, but perhaps the app sells access to personalized training programs, offers customized diets, exercise videos, and does the scheduling for one-on-one consultations. Sounds smart to me! Assuming they prove out the idea to some degree, it’s time to put their development skills to work and get to building.

A lot of the needs of an app like this map directly and easily to Amplify. A developer starting to plan might think like this:

  • We need to host this somewhere… Amplify has Static Web Hosting. And it’s fully featured with the fancy DX we’re starting to except these days: I connect a Git repo, and it will not only do deployment to CDN-backed global static hosting based on commits, but it will run my CI/CD (e.g. run tests) and give me URLs for previewing feature branches. You do all this with the AWS Amplify Console.
  • We need to do user authentication... The whole point here is that users can log in to get access to their stuff. Amplify helps with this (it’s Amazon Cognito built-in), which allows for typical sign-up/sign-in/forgot-password stuff, but also all the social login stuff you would expect. This is an example of what Amplify does: it helps abstract and build out underlying cloud services with minimal code.
  • We need data storage… Ideally, it’s managed with GraphQL because my modern front-end really benefits from that (perhaps it’s a React app). Amplify has that. It’s AWS AppSync built-in, which means you can use any type of data store, but get amazing features on top, like the GraphQL endpoints, realtime data syncing, and offline support.

That’s just the basics. All of that is extremely well-covered.

How do we set all this stuff up? This is one of the best parts: there is a CLI to help do everything. For example, about that data storage stuff, how do we get going with that? Once the CLI is installed and we’ve run amplify init in the project, we do amplify add api and we’ll be walked through it.

Now for this physical training app, we’ll need some static file storage as well. Maybe all the users have custom avatars, and the videos themselves need protected hosting. Well, we’re in AWS land here, so S3 buckets are a perfect fit. How? amplify add storage and we’ll be walked through it and of course, there are docs.

Impressive, really. We can build almost this entire thing with Amplify.

The one time we might have to reach out to another service is to handle payments. Stripe is usually the first choice of developers because of their great DX and robust APIs. They are built exactly for apps like this. We’d do our communicating with Stripe APIs over serverless functions. And guess what? We’re in AWS land here, so we have access to Lambdas, the best serverless function provider there is. The trick is that we can have our GraphQL setup, via AppSync, call a Lambda which can communicate with any outside API. Fortunately, there is a detailed walkthrough here from Ramon Postulart.

And here’s another approach from Beez Fedia.

So here’s what I think is important to know:

  • Amplify is a helper. AWS offers tons of cloud services. Amplify helps you tie them together and get started using the important ones that you need.
  • The static hosting is the foundation for a web project. This is a Jamstack approach. But even that isn’t required, you can, for example, build an iOS app with the tools.
  • AWS is the biggest cloud provider in the world and powers many of the world’s biggest websites. You can build a personal project here and typically do it under the free tier, but you’ll never need to worry about scaling. You’re at the right place for scaling.
  • There is a lot to explore. If you wake up one day and want to add push notifications or explore something like machine learning, that stuff is there too.

If you’ve read this far, I think this quick high-level video will land better:

Other Resources

The post Looking at AWS Amplify appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.