Git Product home page Git Product logo

hugo-amplify-backend-test's Introduction

Hugo Amplify Test

This repo contains a static frontend based on Hugo which can talk to a backend to support filling out a contact form; the backend is realized as a Lambda function which sends an email via AWS SES.

This was essentially a toy project to look at how to glue these things together; it was noted that SES does have significant constraints, particularly around sending emails to non-verified addresses when operating in sandbox mode - operating in non sandbox mode requires AWS approval. These constraints, however, were not a blocker here as all that was necessary was to be able to send an email to a single verified email address when someone fills out the contact form.

For more information, there is a medium post on this project here.

As you will need to register a webhook with the repo, you will need to make a fork of this to deploy it to Amplify.

Setting up the backend

Prerequisites:

  • go build tools (I used v1.14)
  • SAM tooling
  • Configured AWS account

Building and deploying the backend is straightforward; to build the lambda function, use the build script provided.

cd backend
./build.sh

To deploy the lambda function, use the sam tooling:

sam deploy --guided -t backend-deployment.yaml

This will give you a backend which can send an email via SES. Due to the SES sandbox constraints, however, it is necessary to ensure that a verified email address is added to your SES sandbox; AWS provides instructions here. Modify the backend code to use this email address as it is currently hardcoded into the application.

With this done, you should have a working backend. You can test as follows:

$ curl -X POST https://<endpoint>.execute-api.eu-west-1.amazonaws.com/contact -d '[email protected]&name=Tom&message=hello&_next=return'
{"message": "Will respond to email addr asap..."}

You should then receive an email to the verified email address.

Setting up the frontend

Although AWS Amplify offers a CLI, here the web interface was used to manage the application in Amplify.

Connect the repo to Amplify

Connecting the repo to Amplify is straightforward; this registers a webhook with the repo so you will need to have your own fork of this repo.

As the frontend content is in the frontend directory and the build process requires go modules, you will need to modify the Build Settings slightly - the extras/amplify.yml shows what should be in the Build Settings. With this, you can use the standard Amazon Linux 2 image for building the hugo site.

You will need to make two specific modifications to the site, one to tell the frontend that it is being served from Amplify and one to tell it where the contact form backend is. For the first, it is necessary to modify the baseURL parameter in frontend/config/_default/config.toml to point at the endpoint provided by Amplify (or an FQDN if you connect that to this site). For the second, it is necessary to modify the amplify_id parameter in the data/tnd-forms/contact.yaml file to point to the backend.

When you commit and push these changes, Amplify should receive a webhook notification and deploy a frontend with a contact form which triggers the Lambda function to send an email to the specified email address.

hugo-amplify-backend-test's People

Contributors

seanrmurphy avatar

Stargazers

 avatar  avatar

Watchers

 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.