Create Front-End for Serverless RESTful API

In this post, we will build an UI for our Serverless REST API we built in the previous tutorial, so make sure to read it before following this part.

Note: make sure to enable CORS for the endpoint. In the API Gateway Console under Actions and Enable CORS:

The first step is to clone the project:

1

git clone https://github.com/mlabouardy/movies-dynamodb-lambda.git

Head into the ui folder, and modify the js/app.js with your own API Gateway Invoke URL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

angular.module('app', [])
  .controller('MainCtrl', function($scope, $http){
    var self = $scope;
    var apiUrl = 'https://kbouwyuvoc.execute-api.us-east-1.amazonaws.com/prod/movies'; // replace with API Gateway Invoke URL

    self.movies = [];
    self.movie = {};
    self.error = '';

    self.getMovies = function(){
      $http.get(apiUrl).then(function(res){
        self.movies = res.data;
      })
    }

    self.create = function(){
      $http.post(apiUrl, self.movie).then(function(res){
        self.getMovies();
        self.movie = '';
        self.error = '';
      }, function(err){
        self.error = err.data.status;
      });
    }

    self.getMovies();
  });

Once done, you are ready to create a new S3 bucket:

1

aws s3 mb s3://movies-tutorial

Copy all the files in the ui directory into the bucket:

1

aws s3 cp ui/ s3://movies-tutorial --recursive -grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

Finally, turns website hosting on for your bucket:

1

aws s3 website s3://movies-tutorial --index-document index.html

After running this command all of our static files should appear in our S3 bucket:

Your bucket is configured for static website hosting, and you now have an S3 website url like this http://<bucket_name>.s3-website-us-east-1.amazonaws.com

Drop your comments, feedback, or suggestions below — or connect with me directly on Twitter @mlabouardy.