DEV Community: Liptan Biswas

Creating Feedback Form on Vercel using Vue and Golang

Liptan Biswas — Sun, 25 Oct 2020 08:32:13 +0000

You might be wondering why someone wants to set up a feedback form from scratch. It's just a feedback form and it's so simple.

I am well aware that there are a lot of Saas applications I could have used to set up such a form, yet I took a far complex approach to achieve a simple task. But by doing this, along the way I learned a few things. Which is what matters in this case, since the sole purpose of going through the trouble is to get some amount of idea and hands-on on technologies like, using Vercel, Vue, etc. I already had a working knowledge of Golang. I had heard a lot about how Vercel makes deploying frontend application so simple, so wanted to give it a try.

Components

The frontend of the form is written in Vue.js, which, on submit sends a POST request to a serverless application written in Golang. Go application sends an email to me using Sendgrid. This Vue application and Golang app are both deployed on Vercel.

Creating the Frontend

Create a new Vue project.

npx @vue/cli create -d my-feedback-form && cd my-feedback-form

If the command does not work, you probably don't have Nodejs installed, you will need to install it.

Although, we can use npm run serve to run our development server, let's install Vercel cli as well. Vercel cli will help us to test our Golang serverless application as well.

npm i -g vercel

Start the development server.

vercel dev -d

It will ask you a series of questions. Go with the default options. You may need to provide your email address. Open your web browser and go to http://localhost:3000, you should the Vue welcome page.

I have used bootstrap as well to make the form look a little better. Install bootstrap by running.

npm i bootstrap-vue bootstrap

Update the src/main.js file with the following content.

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Now, Create a file at src/components/Form.vue with the following content.

<template>
  <div class="row justify-content-center">
    <div>
      <h2 v-if="!status">Please provide your feedback!</h2>

      <b-form v-if="!status" @submit="sendForm">
        <b-form-group>
          <b-form-input type="text" name="name" v-model="name" placeholder="Enter your name..."></b-form-input>
        </b-form-group>
        <b-form-group>
          <b-form-input type="email" name="email" v-model="email" placeholder="Enter your email..." required>
          </b-form-input>
        </b-form-group>
        <b-form-group>
          <b-form-textarea type="text" name="message" v-model="message" placeholder="Leave a feedback..." required>
          </b-form-textarea>
        </b-form-group>
        <b-form-group>
          <b-button block variant="primary" type="submit">Send</b-button>
        </b-form-group>
      </b-form>

      <h2 v-if="status === 'success'">Thank you, your feedback is submitted!</h2>
      <h2 v-if="status === 'error'">Oops, something went wrong. Please try again.</h2>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Form',
    data: function () {
      return {
        status: null,
        name: null,
        email: null,
        message: null
      }
    },
    methods: {
      sendForm: function (event) {
        event.preventDefault()
        fetch('/api/sendmail', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json'
          },
          body: JSON.stringify({ name: this.name, email: this.email, message: this.message })
        })
          .then((response) => {
            if (response.status < 299) {
              this.status = 'success'
            }
            else {
              this.status = 'error'
            }
          })
      }
    }
  }
</script>

Update the src/App.vue file with the following content.

<template>
  <div id="app">
    <Form />
  </div>
</template>

<script>
  import Form from './components/Form.vue'

  export default {
    name: 'App',
    components: {
      Form
    }
  }
</script>

We don't need src/components/HelloWorld.vue, it can be removed.

Check your browser, you should see the feedback form. On filling the form and clicking Submit, you should receive an error saying Oops, something went wrong. Please try again. It's because on clicking submit, the Vue application is sending a POST request on the /api/sendmail endpoint. We do not have it implemented.

Let's implement it using Golang. Vercel provides a powerful feature of adding our backend code in the same repository. It supports some of the popular languages and is deployed along with your front-end application as a serverless function.

Creating the backend

There is no additional configuration needed to deploy a serverless api using Vercel. Code written in api directory will be read and deployed as a function on the same domain as your frontend, at path /api. Read more here.

Create a directory named api and switch to it using

mkdir api && cd api

Create a new file sendmail.go.

Put the following code in the file.

package handler

import (
    "encoding/json"
    "net/http"
    "os"

    "github.com/sendgrid/sendgrid-go"
    "github.com/sendgrid/sendgrid-go/helpers/mail"
)

//Feedback is feedback struct
type Feedback struct {
    Name    string
    Email   string
    Message string
}

//Handler is the default handler
func Handler(w http.ResponseWriter, r *http.Request) {
    if r.URL.Path != "/api/sendmail" || r.Method != "POST" {
        http.Error(w, "404 not found.", http.StatusNotFound)
        return
    }

    var fb Feedback
    err := json.NewDecoder(r.Body).Decode(&fb)
    if err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }
    res, body, err := SendMail(fb)
    if err != nil {
        println("Error sending Email: %v", err)
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    w.WriteHeader(res)
    w.Header().Set("content-type", "application/json")
    w.Write([]byte(body))
    return
}

//SendMail sends the email using Sendgrid
func SendMail(f Feedback) (res int, out string, err error) {
    from := mail.NewEmail(f.Name, f.Email)
    subject := "[Feedback] on something"
    to := mail.NewEmail("Liptan Biswas", "<your-email-address>")
    message := mail.NewSingleEmail(from, subject, to, "", f.Message)
    client := sendgrid.NewSendClient(os.Getenv("SENDGRID_API_KEY"))
    r, err := client.Send(message)
    if err != nil {
        return r.StatusCode, r.Body, err
    }
    return r.StatusCode, r.Body, nil
}

Initialize go modules and add dependencies to the go.mod file by running.

go mod init && go mod tidy

During serverless function deployment to Vercel, these dependencies are automatically discovered and installed.

Follow Sendgrid documentation and obtain an API key from Sendgrid.

Come back to the project root and create a .env file and put your Sendgrid API key in that.

SENDGRID_API_KEY=<YOUR-API-KEY>

Make sure to append .env into .gitignore otherwise you may mistakenly commit it.

If you have Postman, fire it up and send a POST request to http://localhost:3000/api/sendmail. You may skip if you are confident that the API works.

You should see a 202 response if Sendgrid accepted your email.

Now, we can head back to the browser and submit the form to test it once, you should get both the emails in your inbox.

Deploy to Vercel

Deploying your application to Vercel is the easiest step. Just run the command.

vercel --prod

and it will be deployed. You may want to push the code to git and connect the repo to Vercel. But, this works as well. While Vercel is deploying your application, go to the Vercel dashboard, and find your application. Navigate to Your App >> Settings >> Environment Variables. Add the SENDGRID_API_KEY environment variable.

You will need to redeploy for the env variable to take effect. Just, run the vercel --prod command again.

If you connect your repository to Vercel, you won't need to run this command every time you want to deploy. Just push the commit and Vercel will automatically pick up the change and deploy it. It will also comment the deployed URL on the commit.

That's it.

Here's the Github Repo.

liptanbiswas / pusti

pusti

Repository to accompany with the article at https://dev.to/liptanbiswas/creating-feedback-form-on-vercel-using-vue-and-golang-5fc1

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

View on GitHub

Here's the live form. Do let me know your feedback.

References: Vercel blog

Gitlab Docker Layer Caching for Kubernetes Executor

Liptan Biswas — Fri, 23 Oct 2020 12:43:35 +0000

Now that Gitlab reduced the CI/CD minutes for free plans to 400. It's possible you might run out of CI/CD time. You can upgrade to higher plans, or you have the option to host your own runner.

We use our own runners since we migrated to Gitlab from Github. There are various benefits for running the Gitlab runner in your own environment. A few of the important features are:

You are no more concerned about accidentally exposing credentials since you are not using shared infrastructures.
You can leverage instance role-based credentials to authenticate to your cloud provider.
No more limits on the CI/CD minutes you can use.
In terms of operational overhead, since we use Kubernetes, it was just a click of a button for us to deploy the runner.

We were using Docker in Docker workflow described here to build our docker images. On every build, GitLab starts a pod with 3 containers, one of them being a Docker dind container running the docker daemon. The build container would connect to the Docker daemon running on the same pod. Since all containers in a pod share the same network. Docker client building the image was able to connect to the daemon API over the localhost.

The problem we were facing that there was no caching of docker layers. This was because a fresh pod with a fresh docker daemon service was spun up on every build. This increased our build time significantly.

The solution to this problem is very simple. There were many options. We chose the simplest one. Instead of running Docker dind as a service for every pod, let's just run one Docker dind container. All Docker clients building the containers would connect to that same Docker daemon thus docker layer caching will also work. There is an option to bind the runner pod to the docker socket, running on the host itself, but we shouldn't do that for obvious reasons.

Create the PVC to store the persistent data of Docker.

# PVC for storing dind data
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  labels:
    app: docker-dind
  name: docker-dind-data
  namespace: gitlab-managed-apps
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 100Gi

We are using a managed GKE cluster, so our Persistent volume is automatically created by controllers.

Here's the deployment spec for the Docker Dind pod which is going to provide docker services to Gitlab docker runner.

## Deployment for docker-dind
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: docker-dind
  name: docker-dind
  namespace: gitlab-managed-apps
spec:
  replicas: 1
  selector:
    matchLabels:
      app: docker-dind
  template:
    metadata:
      labels:
        app: docker-dind
    spec:
      containers:
        - image: docker:19.03-dind
          name: docker-dind
          env:
            - name: DOCKER_HOST
              value: tcp://0.0.0.0:2375
            - name: DOCKER_TLS_CERTDIR #Disable TLS as traffic is not going outside of network.
              value: ""
          volumeMounts:
            - name: docker-dind-data-vol #Persisting the docker data
              mountPath: /var/lib/docker/
          ports:
            - name: daemon-port
              containerPort: 2375
              protocol: TCP
          securityContext:
            privileged: true #Required for dind container to work.
      volumes:
        - name: docker-dind-data-vol
          persistentVolumeClaim:
            claimName: docker-dind-data

Now, expose the service, so Gitlab runners can connect with it.

## Service for exposing docker-dind
apiVersion: v1
kind: Service
metadata:
  labels:
    app: docker-dind
  name: docker-dind
  namespace: gitlab-managed-apps
spec:
  ports:
    - port: 2375
      protocol: TCP
      targetPort: 2375
  selector:
    app: docker-dind

Once this is done, you can use the docker daemon in a Gitlab CI job spec file like this.

stages:
  - image

create_image:
  stage: image
  image: docker:git
  variables:
    DOCKER_HOST: tcp://docker-dind:2375 #IMPORTANT, this tells docker client to connect to docker-dind service we created
  script:
    - docker info
    - docker build -t yourorg/app:${CI_COMMIT_TAG} .
    - docker push yourorg/app:${CI_COMMIT_TAG}
  only:
    - tags

Our build time is now significantly reduced, thanks to docker layer caching.

One last thing, here's a Cronjob that clears the cache every week. So we can start fresh.

# Cronjob to clear docker cache every monday so we start fresh
apiVersion: batch/v1beta1
kind: CronJob
metadata:
  labels:
    app: docker-dind
  namespace: gitlab-managed-apps
  name: docker-dind-clear-cache
spec:
  jobTemplate:
    metadata:
      labels:
        app: docker-dind
      name: docker-dind-clear-cache
    spec:
      template:
        spec:
          containers:
            - command:
                - docker
                - system
                - prune
                - -af
              image: docker:git
              name: docker-dind-clear-cache
              env:
                - name: DOCKER_HOST
                  value: tcp://docker-dind:2375
          restartPolicy: OnFailure
  schedule: 0 0 * * 0

That's it.

VPN Service? Not as secure as they sound

Liptan Biswas — Sat, 26 Sep 2020 19:33:06 +0000

I have seen people using public VPN or Virtual Private Network service thinking that it will solve all their privacy issues. By public VPN, I mean those VPN service provider which charges you some money and you download their app, tap connect and start using internet thinking that it's safe and secure. Some popular examples are ExpressVPN, NordVPN, etc.

Since I have fairly well knowledge of VPN, I always had some concerns related to using public VPN services. Personally, I have always been a fan of deploying my own VPN server using OpenVPN.

Also, the VPN was not originally made for hiding your identity or blocking websites. It is made to securely access two machines on the internet as if they were part of a private network.

So here's what it means in terms of our concerns.

Protecting your Online Privacy?

Public VPN services can only hide your IP address. Use Google services even when connected to VPN and your privacy becomes a myth. So along with using a VPN, you will also need to use incognito mode in browser. You will also need to make sure you do not login. I fail to see how can you use the internet without logging into web applications. Almost all web apps now days ask you to login in order to use their services.

Secure access of internet in public wifis like in coffee-shops etc.

Yes, VPN encrypts your traffic before sending it to the destination server. But, do we need it?

Google Chrome is now showing a not secure icon on websites that do not have SSL installed. So If a website has SSL installed, the communication is already encrypted. So, there is no need of a VPN to securely access the sites that has an SSL certificate installed.

Some might argue that what if some site does not have SSL and I want to make a purchase. One can think it's safe to add his credit card info on a website that does not have SSL after connecting to VPN. Let me tell you, it's NOT.

Let's understand how.

When you are connected to a VPN, you connect to the VPN server using something called tunneling. When you try to open a website, It does not directly send the request to the destination website, but your request gets encrypted and sent to the VPN server. Now, the VPN server decrypts the data and forwards your request to the destination server.

You see, the destination server thinks that it's the VPN server who is trying to access the website, so it logs the VPN server's IP address, not yours. Now, the server sends a response back to the VPN server. VPN Server now encrypts the response and sends it back to you. You can visualize it using the diagram below.

Now, here comes the problem. You are sending your credit card to a non-SSL website through the VPN. See the image above, part 1 of the connection is encrypted, thanks to VPN. But part 2 is not. When the VPN server sends your credit card to the destination server, it's in plain text. This data may travel through a lot of routers and computers before it reaches the destination server. Anyone snooping traffic in these locations will have your card details.

So better look for SSL secured sites only. Other protocols such as SSH, SFTP(Not plain FTP) are secured as well and do not need VPN.

Bypassing Censorship

Yeah, unarguably this is the best use case of public VPNs. You just need to make sure you are connected to a server location in a country that does not have many restrictions.

Improving Performance

Hmmm! It can improve internet speed if your ISP is throttling certain websites. VPN will make sure none of the websites are throttled as your ISP will not have any idea which website you are trying to access.

But there is a cost to this. VPN definitely slows down your internet because every request has to go through the VPN server. If a lot of people are using a single VPN server, which is true for all public VPN providers, it will slow down your speed.

Now, let's talk about one serious problem. This is a deal-breaker for me.

Security Concerns when using VPN

Some basics first. There are two types of networks.

A private network, which is a home network and is considered secure. An example would your wifi router. Your laptop and mobile device, when connected to same wifi, are assigned private IP addresses from the same network. They are allowed to communicate with each other without any restrictions, unless there is a firewall in play.

Public network, which is basically the "internet". It is considered unsecured and you might want to watch out when communicating with others through the internet.

When you connect to VPN, VPN provides you a private IP address using which you connect to the VPN server. So even though you are talking to the VPN server over the public internet, data is encrypted and sent through a tunnel making it secure. So, from the perspective of your laptop, it is connected to a VPN server over private secure internet. Sounds okay. But it's not.

Other people who are also using the same shared VPN server which you are using, are also connected to the same private network. So as per your laptop's perspective, these other people are safe to talk to without any restrictions.

So, if I have an SSH server, VNC, or even Windows remote desktop access running on my laptop and it does not have a password assigned. Anyone connected to the same VPN server, hundreds in case of public VPN, can directly access my laptop, all files, literally everything. I sometimes run unsecured FTP/HTTP servers on my laptop to test something. These are also directly accessible to anyone connected to that VPN server.

There may be some network policies configured by VPN providers to stop this communication. But are you certain that they are in place? You are just blindly trusting these VPN providers.

So what should we do??

Personally, I run my own VPN server. To run your own VPN server, you need a VPS(Virtual Private Server) with an external IP. Once you have the VPS up and running, you can use https://github.com/angristan/openvpn-install for easily install and configure the OpenVPN server.

I had been running it on AWS, which provides one 1GB RAM virtual machine free for a year. I have now migrated it to the Oracle cloud. They are providing two 1GB virtual machine for free forever.

There are chances that If I do a crime using a VPN, it will be traced back to me using the IP address of the VPN server. Authorities can just ask the Oracle cloud folks, whom did you assigned this IP address at this time. But it's the same with a public VPN provider as well. Some claim to keep no logs, but again you are blindly trusting them.

Let me know what are your thoughts on this.

Put variable in Start-up Scripts using Terraform

Liptan Biswas — Tue, 15 Sep 2020 12:47:03 +0000

Terraform has gained immense popularity in terms of managing the infrastructure in the GitOps way.

When spinning up virtual machines in AWS or GCP, we have an option to pass a startup script. The startup script gets executed when the VM starts up. We can use this functionality for various tasks, like installing some software, registering the node somewhere, etc.

Sometimes, we need to dynamically populate some variables in the startup scripts, such as dynamically generate and use some credentials. We can use Terraform's template function to render the script, replacing the variables with their actual value.

Here's how it's done.

Define a variable

variable "my_var" {
    type = string
    default = "Hello"
}

Rander your startup script

data "template_file" "startup_script" {
  template = file("${path.module}/startup.sh")
  vars = {
    some_var = var.my_var 
    //you can use any variable directly here
  }
}

Example Startup script

#!/bin/bash

export TEST_VARIABLE=${some_var}

Finally, use the rendered template

...
user_data = data.template_file.startup_script.rendered
...

Cheers. The "userdata" will have the actual values of the variables.

Further reading: https://spacelift.io/blog/terraform-templates

CKAD Practice Questions

Liptan Biswas — Tue, 08 Sep 2020 18:18:39 +0000

Practice Questions for CNCF Certified Kubernetes Application Developer Exam.

Access the practice test environment on Katacoda:
https://www.katacoda.com/liptanbiswas/courses/ckad-practice-challenges.

Or, directly using these links, no login required:

UPDATE: 08/03/2021: Upgraded kubernetes version to 1.20.

03/02/2021: Some of you may be facing huge latency in the practice environment. Katacoda is limiting resources allocated to free scenarios due to huge popularity of these scenarios. In last 6 months, people spent 9429 hours on these scenarios. That's around 393 days.

Instructions

Please use a desktop or laptop. These do not work in mobile devices.
This practice environment runs on Kubernetes 1.20, current version of exam.
This is NOT a replica of actual exam and should be used for practice only.
The questions are NOT same as actual exam.
Successful completion of tasks can verified at the last step. You can also run check command anytime to verify your work.
You can view solutions by clicking Show solution button, however you are encouraged to use Kubernetes documentation to find answers instead.
Practice environment will be expired in 1 hour. Refresh to get new environment.

Connect with me on Linkedin