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

Published in

Red Gold

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.🍲

Install OpenFaaS on your local machine
You already have faas-cli installed

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.