Code Monkey home page Code Monkey logo

aws-dog-no-dog's Introduction

Dog no Dog

Dog no Dog is a sample application to showcase how to build a minimum viable product with serverless technologies on AWS.

With the Dog no Dog application, users can submit a picture and the backend should check if there is a dog in it. After this, the user has the possibility to leave a feedback if the picture contains a dog or not.

The standard frontend implementation uses a mock that will always returns that there is a dog in the picture.

This repository has two backend folders:

  • backend: The backend only contains helpers (Makefile, boilerplate code for your AWS Lambda functions) and it is up to you to implement the backend.
  • backend_complete: A complete implementation of both the frontend and backend for reference. You will need to overwrite the backend folder with this one and uncomment lines in the amplify.yml file to deploy the backend with AWS Amplify Console.

As this is meant as a challenge and hands-on workshop with limited help, a few hints are available below but you are encouraged to try things by yourself as much as possible.

If you are new to Serverless applications on AWS or are looking for a more guided workshop to learn about Serverless technologies, you should look at the AWS Serverless Workshops.

How to get started

The project consist of a Vue.js 2 frontend and boilerplate to create a serverless backend using AWS SAM.

Frontend

To install the necessary libraries for Vue.js and get started, you will need to have NPM installed and run the following commands:

# From the root of this repository

# Install the Vue.js CLI
npm install --global @vue/cli @vue/cli-service

# Install packages for this project
npm install

# Run the Vue app locally
npm run serve

For the backend, you will need to install the AWS CLI, the AWS SAM CLI and Make.

S3 bucket

First, you will need to create an S3 bucket.

# From the root of this repository

# Create a new S3 bucket to store code artifacts. Please note that S3 buckets
# have to be globally unique.
aws s3api create-bucket --bucket "your-bucket-name"

After that, you should edit backend/Makefile and amplify.yml to change the S3 Bucket name from "dog-no-dog-artifacts" to your bucket name.

Backend

The backend comes with a Makefile that contains the following targets:

# Deploy log processing infrastructure to generate metrics
make --directory backend log-processing

# Deploy the backend
# This runs the targets 'package', 'deploy' and 'endpoint' in sequence.
# Equivalent to 'make --directory backend all'. By default, this will deploy to
# a 'dev' environment.
make --directory backend

# Run the backend locally
# This will allow you to test the Amazon API Gateway Rest API and AWS Lambda
# functions locally. However, if you are using other resources (e.g. Amazon
# DynamoDB table, Amazon S3 bucket), you should deploy them to AWS first.
make --directory backend local

Hints

What do I need to build on the backend? (expand to see the answer)

There is no formal API definition, but you can find all the API calls made by the frontend in the api.js file in the frontend.

Where can I configure the API endpoint in the frontend? (expand to see the answer)

The API endpoint value is held in the .env.development and .env.production files.

How can I deploy the frontend to AWS? (expand to see the answer)

You can leverage AWS Amplify Console to create a CI/CD pipeline for the frontend.

For this, you will need to initialise the frontend folder as a git repository and push it to a repository service provider supported by AWS Amplify Console.

You can find more details in the Getting Started section of the documentation.

How can I deploy the backend locally? (expand to see the answer)

The Makefile in the /backend/ folder contains a target named local. You can run this target to deploy your serverless application locally for debugging and testing.

See sam local start-api for more information about how this work.

How can I deploy the frontend and backend at the same time? (expand to see the answer)

Amplify Console will look for a file named amplify.yml in your repository. This file can contain instructions to deploy the backend and frontend, as well as end-to-end testing instructions using Cypress.

What should the backend architecture look like? (expand to see the answer)

Here is an architecture diagram of what the implementation could look like:

The backend folder already has an Amazon API Gateway Rest API and an empty AWS Lambda function (HasDogFunction).

Where can I find sample pictures? (expand to see the answer)

You can find sample pictures in the pictures folder.

As the frontend doesn't change the resolution of the image and encode it in Base64 before sending it to API Gateway, there is a size limit for pictures. Amazon API Gateway has a payload limit of 10MB and Base64 encoding has an overhead of 33%. Therefore, you will not be able to send pictures that are larger than 7.5MB.

License Summary

This sample code is made available under the MIT-0 license. See the LICENSE file.

aws-dog-no-dog's People

Contributors

dependabot[bot] avatar jpeddicord avatar nerdyness avatar nmoutschen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.