Build contact us page using serverless function (using OpenFaaS)— Part1

Amir Movahedi
Red Gold
Published in
3 min readJul 17, 2020

In this series of working with OpenFaaS I want to show you will learn how to Learn how to host your own website using OpenFaaS serverless function. Also learn how to use serverless function to receive user/customer feedback from contact us page.

Before starting, make sure you already prepared ingredients below.🍲

Get Started🏃🏻

To keep it simple, we will use a simple contact us page to host on OpenFaaS.I used Colorlib website and download a free contact us page template.

https://colorlib.com/wp/template/contact-form-v18/

Create OpenFaaS Function

Using OpenFaaS you are able to implement your function in any programming language. OpenFaaS also provided templates which makes our life much easier. For simplicity we use Node.js to implement our function.

1) Follow commands below to create your function.

# Create directory for the project
$ mkdir $HOME/openfaas-contactus
# Change current directory to the project directory
$ cd $HOME/openfaas-contactus
# Pull OpenFaaS templates
$ faas-cli template pull
# Create a function from nodejs language template
$ faas-cli new contactus-fn --lang node12
# Change the name of function config yaml file to stack.yml. This file name read by community cluster.
$ mv contactus-fn.yml stack.yml

Now you should have directory name contactus-fn which contains your app files and handler.js file. And the stack.yml file that keeps all configuration for your functions.

2) Copy website content

Your website can be a static HTML or a single page application. First you need to create a /ui directory in /contactus-fn . Then copy all your website files (including index.html) inside the /ui directory

# Create directory for the website contents
$ mkdir $HOME/openfaas-contactus/contactus-fn/ui

2) Add base href to index.html

Add below tag inside the head tag of index.html file.

Later in handler.js __BASE_HREF__ will be replaced with base_href from environment variable.

<head><...>
<base href="__BASE_HREF__">
<...></head>

3) Edit handler.js

To handle the website content we need to edit handler.js file as below.

4) Edit stack.yml file as below.

We need to add base_href as an environment variable which will be added when it load the index.html file and com.openfaas.scale.zero to avoid function cold start.

Follow commands below to push your code to Github repository. Please replace red-gold/openfaas-contactus.git with {your-github-username}/{your-github-repository}.git.

# Change current directory to the project directory
$ cd $HOME/openfaas-contactus
$ git init
$ git add .
$ git commit -sm 'Init'
# Build/push/deploy
$ faas up --tag=sha

6) Check the website online.

From your browser, navigate to http://127.0.0.1:31112/function/contactus-fn.

If you have any question/issue please share in below comment.

Note that I used port-forwarding to access OpenFaaS gateway on my local machine

Github Source code.

NEXT: Build contact us page using serverless function (email function) — Part2

You may want to learn 🥧 🍰 🎂 🍮 🍭 🍬

Send email via slack using OpenFaaS
Domain Driven Design(DDD) for Microservices
Realtime Server-client interaction using OpenFaaS server-less function with Redux

References

OpenFaaS Documentation
Community Cluster sign-up page
OpenFaaS workshop

--

--

Amir Movahedi
Red Gold

Full-Stack, Cloud, Kubernetes, IoT lover, distributed system and clean architecture. (every click is valuable!) https://amir.telar.dev