Now we can move on to creating our s3 bucket.

This S3 bucket is where we’ll store all of our frontend html and whatnot.

Start with naming the bucket…

Add a new value to your config file:

s3Bucket: ${self:custom.cleanName}-www-rev${self:custom.rev}

Much like appName, the value of s3Bucket is computed as serverlessapp-frontend-www-rev001.

We can now use this value in out serverless.yml file. Add the following block there:

resources:
  Resources:
    AppS3Bucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.appName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: index.html

This is our resources block, it’s where we will put all the definition for the components of our app.

We have defined a resource called AppS3Bucket the Type is standard AWS naming for their S3 service: AWS::S3::Bucket

We’ve defined three Properties for this resource: BucketName, AccessControl and WebsiteConfiguration.

BucketName wil be our custom name: serverlessapp-frontend-www-rev001

We are allowing PublicRead since we want this to serve our www assets directly users. (We’ll create an actual policy for this in the next section) Essentially acting as a static www root.

Lastly we need to tell S3 what files to serve by default. Within WebsiteConfiguration we’re telling S3 to serve index.html as out index document as well as our error document.

Lets test this out!

To deploy what we’ve created so far use the following command:

serverless deploy -v

The -v flag is going to give you more verbose output so you can see more of whats happening. You do not have to use it if you don’t want to.

Assuming everything your are, and worked as expected, you should see something like this:

Serverless: WARNING: Missing "tenant" and "app" properties in serverless.yml. Without these properties, you can not publish the service to the Serverless Platform.
Serverless: Packaging service...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
CloudFormation - CREATE_IN_PROGRESS - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
CloudFormation - CREATE_IN_PROGRESS - AWS::S3::Bucket - ServerlessDeploymentBucket
CloudFormation - CREATE_IN_PROGRESS - AWS::S3::Bucket - ServerlessDeploymentBucket
CloudFormation - CREATE_COMPLETE - AWS::S3::Bucket - ServerlessDeploymentBucket
CloudFormation - CREATE_COMPLETE - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
CloudFormation - CREATE_COMPLETE - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
CloudFormation - UPDATE_IN_PROGRESS - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
CloudFormation - CREATE_IN_PROGRESS - AWS::S3::Bucket - AppS3Bucket
CloudFormation - CREATE_IN_PROGRESS - AWS::S3::Bucket - AppS3Bucket
CloudFormation - CREATE_COMPLETE - AWS::S3::Bucket - AppS3Bucket
CloudFormation - UPDATE_COMPLETE_CLEANUP_IN_PROGRESS - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
CloudFormation - UPDATE_COMPLETE - AWS::CloudFormation::Stack - serverlessapp-frontend-app-rev1-dev
Serverless: Stack update finished...
Service Information
service: serverlessapp-frontend-app-rev1
stage: dev
region: us-east-1
stack: serverlessapp-frontend-app-rev1-dev
api keys:
None
endpoints:
None
functions:
None

Stack Outputs
ServerlessDeploymentBucketName: serverlessapp-frontend-a-serverlessdeploymentbuck-9kfom02mrohh

If you got no errors we can go back into the AWS console to check out the bucket we created.

Navigate to Services then S3 in the same way you opened up IAM in the setup section.

You should see two new buckets.

One of them will be named as the string returned at the end of the deploy output ServerlessDeploymentBucketName … in my case serverlessapp-frontend-a-serverlessdeploymentbuck-9kfom02mrohh. The end of this string is generated by AWS.

This is where it puts the Cloudformation code that is generated by serverless framework. In other applications it may also house python code to run on lambda, etc. If you drill down a bit you will see where it uses the value you set for appName in your config as well. (e.g. serverlessapp-frontend-app-rev001 for my example)

You should also see the S3 bucket you defined… mine is called serverlessapp-frontend-www-rev001 as expected.

My bucket is empty and rather boring… just a basic S3 bucket for now. The cool part is that it is there.

Once we’ve verified everything is working, we want to remove both buckets. This is another simple serverless command:

sls remove

Once its done, you can verify it removed everything by refreshing your S3 console.

In the next section we’ll attach a bucket policy to restrict file access for others to read only.

Continue to Part 4