Coding

Connecting a SPA to a Serverless API | Amazon Web Services BASICS

  • 00:00:01 hi welcome to this video my name is
  • 00:00:04 Maximilian and in this video I want to
  • 00:00:05 show you how you can connect your a
  • 00:00:07 single page application in this case an
  • 00:00:09 angular application to your server less
  • 00:00:12 API run on AWS using AWS lambda and API
  • 00:00:16 gateway if you didn't have a chance yet
  • 00:00:18 make sure to view the first video of
  • 00:00:20 this while of these two videos here
  • 00:00:22 where I do explain what lambda is and
  • 00:00:25 how you actually set up your very simple
  • 00:00:27 restful api in a server this way with
  • 00:00:30 that let's get started
  • 00:00:35 q get started we of course need an
  • 00:00:38 application we can connect and for that
  • 00:00:40 I provided you with this github repo AWS
  • 00:00:44 through last time we have a link can be
  • 00:00:45 found in the video description of course
  • 00:00:47 now you can simply clone this repo to
  • 00:00:50 follow along it's an angular application
  • 00:00:53 which well does the following let me
  • 00:00:56 show you what it does
  • 00:00:57 inside this project once you did clone
  • 00:01:00 it run ng surf or NPM starts to use the
  • 00:01:04 local CLI version and once this did
  • 00:01:07 start let's visit the application what
  • 00:01:11 you can see is it's loading and it
  • 00:01:12 displays as a chart where everything all
  • 00:01:15 the data points are exactly equal at 30
  • 00:01:19 now the chart was created with with
  • 00:01:23 charge J s so if you were interested in
  • 00:01:26 diving into this you can start by
  • 00:01:28 checking out my code it's a very
  • 00:01:30 convenient library for developing charts
  • 00:01:32 and certainly possible that I'll cover
  • 00:01:34 it on this channel in the future too
  • 00:01:35 this charge isn't your complex as you
  • 00:01:38 can see this configuration your
  • 00:01:40 basically creates the chart there isn't
  • 00:01:42 more to it let me shrink it a little bit
  • 00:01:44 but the chart is not really what I focus
  • 00:01:47 on in this video but I want to populate
  • 00:01:49 this chart with useful data right now
  • 00:01:52 what I'm doing is I'm subscribing cue
  • 00:01:54 fetch data method in my topics service
  • 00:01:57 and I'm getting the chart data some data
  • 00:01:59 points which are defined in this model
  • 00:02:01 I'm getting the chart data from that
  • 00:02:04 service and here I simply hard-coded it
  • 00:02:06 into year so here I'm simply setting up
  • 00:02:09 my own observable which I'm returning
  • 00:02:10 which returns means I'm done dummy data
  • 00:02:13 and I have a timeout function to
  • 00:02:15 simulate that I'm actually fetching this
  • 00:02:16 asynchronously now that sniper core is
  • 00:02:19 not that impressive or useful so why
  • 00:02:23 don't we comment this out and instead
  • 00:02:26 try to reach out to a real server using
  • 00:02:30 the get method provided by angular's
  • 00:02:33 HTTP service we do have a real server or
  • 00:02:38 a real API at least we don't really
  • 00:02:40 manage the server we created it in the
  • 00:02:43 last video of this series or of this
  • 00:02:45 miniseries here so make sure to check
  • 00:02:47 out this video
  • 00:02:48 now I of course already have that here
  • 00:02:53 this is broken for now because I'm not
  • 00:02:55 returning data here under API gateway
  • 00:02:57 this is this endpoint 1/2 simple test
  • 00:03:00 and under lambda here whoops we have a
  • 00:03:04 function which right now only returns a
  • 00:03:07 string wouldn't it be nice if that
  • 00:03:09 function would return some real data so
  • 00:03:12 why don't we make this function return
  • 00:03:15 some data so that we can reach out to
  • 00:03:17 our API endpoint here for that let me
  • 00:03:21 create or add some code here on a med
  • 00:03:24 response state data and that should be
  • 00:03:27 an array of data points now this array
  • 00:03:33 can be structured in whatever way you
  • 00:03:35 want to structure it here on keep it
  • 00:03:39 close to what I actually need to use in
  • 00:03:40 my application and therefore I can
  • 00:03:43 really just copy these objects I just
  • 00:03:47 create their these dummy objects and
  • 00:03:48 paste them in there make sure to of
  • 00:03:51 course
  • 00:03:51 remove the comments because you don't
  • 00:03:54 want to have that commented out and let
  • 00:03:57 me quickly whoops restructure this looks
  • 00:04:01 better and now let's replace this with
  • 00:04:04 the actual values you gave me when we
  • 00:04:06 asked you for your favorite topics so
  • 00:04:09 I'll quickly fill this in because there
  • 00:04:11 we have 42 for view 28 if you wanted to
  • 00:04:15 see a full project and there will be one
  • 00:04:16 soon electron 26 angular that is 25 and
  • 00:04:23 level was 21 now we get a response array
  • 00:04:27 and with that all we have to do is
  • 00:04:29 return it here instead of our string now
  • 00:04:32 this lambda function all of a sudden
  • 00:04:34 returns an array all we have to do is
  • 00:04:36 hit save and that's it we don't need to
  • 00:04:39 go back to API gateway because what did
  • 00:04:42 we do there we created a resource and a
  • 00:04:44 method and we forwarded the request to
  • 00:04:47 this lambda function where we triggered
  • 00:04:49 this lambda function whenever a request
  • 00:04:51 came in and then it's still the case
  • 00:04:53 that we don't need to adjust anything we
  • 00:04:55 change the code which gets executed but
  • 00:04:58 we didn't change the logic when it gets
  • 00:05:00 executed so no need to change
  • 00:05:02 a gateway with that we're returning an
  • 00:05:05 array and we go back to the angular
  • 00:05:07 application
  • 00:05:08 here I'm expecting a result and there
  • 00:05:12 I'm executed to chase a method and that
  • 00:05:14 is the normal angular code which I can
  • 00:05:17 use to get the data returned by response
  • 00:05:20 transform it into a JavaScript object
  • 00:05:22 and since I know because I wrote the API
  • 00:05:25 we did it a second ago that the data
  • 00:05:28 will be an array of objects in this
  • 00:05:31 format and there is exactly the exactly
  • 00:05:34 the data and key format I need I don't
  • 00:05:36 need to do anything else you could of
  • 00:05:38 course use other observable operators
  • 00:05:40 here I do have some observable videos on
  • 00:05:42 this channel after all however here it
  • 00:05:45 is in the format I well I need it and
  • 00:05:47 therefore I will go back to API gateway
  • 00:05:51 but only to fetch that URL again here on
  • 00:05:54 simple API let's click on stages data
  • 00:05:58 set deployed snapshot of our API so to
  • 00:06:01 say let's click get here on that
  • 00:06:03 resource and copy dead link address
  • 00:06:06 let's now enter it here and it's safe
  • 00:06:10 and go back to our running angular
  • 00:06:13 application as you can see it's still
  • 00:06:17 spinning so let's open up the console
  • 00:06:19 and what we see here is that we got a
  • 00:06:21 course err or no access control allow
  • 00:06:25 origin header is present on the resource
  • 00:06:28 and what this tells us is that by
  • 00:06:30 default and that is a default security
  • 00:06:32 mechanism we're not allowed to access
  • 00:06:35 resources on a different server than the
  • 00:06:38 one we're sending requests from so here
  • 00:06:39 we're sending requests from local host
  • 00:06:41 localhost 4200 and we're sending them to
  • 00:06:44 deep well to that URL here and that is
  • 00:06:47 prevented by default of course we want
  • 00:06:49 to allow it though so we can do this on
  • 00:06:52 API gateway and now we need have to
  • 00:06:54 change something we can simply select
  • 00:06:56 our resource and what we need to do to
  • 00:07:00 allow us access is we need to send back
  • 00:07:02 the right headers we could do this
  • 00:07:05 manually and that is all the one thing I
  • 00:07:07 do show you in a much more complete
  • 00:07:09 udemy course I already mention in the
  • 00:07:11 last video but what we also can do very
  • 00:07:14 convenient is we can
  • 00:07:15 actions and ale Accords just make sure
  • 00:07:18 that you have the resource selected for
  • 00:07:20 which you want to enable course so for
  • 00:07:22 all the endpoints connected to that
  • 00:07:24 resource so here I click enable course
  • 00:07:26 now we see which address will get added
  • 00:07:29 and I can click the name of course we
  • 00:07:31 get a warning that this will overwrite
  • 00:07:33 the default headers we might have set so
  • 00:07:36 that it overrides any settings you might
  • 00:07:38 have added it also added this options
  • 00:07:40 Methodist options endpoint
  • 00:07:43 this is required for example post
  • 00:07:45 requests because browsers like Chrome
  • 00:07:48 send a pre-flight request so an extra
  • 00:07:51 request before sending the actual post
  • 00:07:54 request to check if they may send a post
  • 00:07:56 request and this extra options HTTP
  • 00:08:00 request also needs to be allowed by
  • 00:08:02 course and that is why automatically
  • 00:08:04 added this options endpoint for us with
  • 00:08:07 that it should work but what's missing
  • 00:08:10 well we need to redeploy the API because
  • 00:08:13 we changed something and that's an
  • 00:08:15 interesting thing or an important thing
  • 00:08:16 you need to know whenever you're working
  • 00:08:18 here and resources you're not working on
  • 00:08:21 the live API you only deploy snapshots
  • 00:08:25 the stages so once you change something
  • 00:08:29 here and you want to create a new
  • 00:08:30 snapshot you have to go to actions
  • 00:08:33 deploy API again choose a stage you
  • 00:08:35 could either add a new one or override
  • 00:08:37 the existing one of course therefore
  • 00:08:39 also overwriting the old snapshot you
  • 00:08:42 can roll back though with that hits
  • 00:08:45 deploy and now it will take a couple of
  • 00:08:47 seconds typically until this really is
  • 00:08:49 life so the link didn't change the URL
  • 00:08:52 is still the same and well let's give it
  • 00:08:55 a try let's see if it now works looks
  • 00:08:58 much better now that shard is populated
  • 00:09:01 with the day that we returned in our
  • 00:09:03 lambda function and how easy was that
  • 00:09:06 that is how you can connect your single
  • 00:09:09 page application to your API and I hope
  • 00:09:11 to show you which options you have with
  • 00:09:13 that it's super simple to build amazing
  • 00:09:16 applications in a completely serverless
  • 00:09:18 manner you don't have to take care about
  • 00:09:20 managing servers provisioning them you
  • 00:09:23 write your code you create your API in a
  • 00:09:26 very visual way as you saw and you
  • 00:09:28 to your application and that's it now as
  • 00:09:31 mentioned before you want to dive deeper
  • 00:09:33 check out the UDP course and there
  • 00:09:35 certainly will also be some pictures on
  • 00:09:36 YouTube again I'd be happy to welcome
  • 00:09:39 you in the course though but of course
  • 00:09:41 I'm also extremely happy to welcome you
  • 00:09:42 in the next youtube videos of which
  • 00:09:45 there will of course be more so see you
  • 00:09:47 there bye