In today's tutorial, we want to learn practically more about serverless, container, and server approaches. We will build a simple application and set up the backend using different approaches so we can understand how the three approaches can be achieved and thereafter you can decide which one is ideal for your team. All the approaches have their benefits.

Brief Explanation

Here is a brief explanation of some concepts that we are going to touch on as we go along.

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries, and settings.

Serverless is a way to describe the services, practices, and strategies that enable you to build more agile applications so you can innovate and respond to change faster. With serverless computing, infrastructure management tasks like capacity provisioning and patching are handled by AWS, so you can focus on only writing code that serves your customers.

The server approach simply means deploying your application on a Web server so that it can be used either through the Internet or an intranet.

For more details about the comparison between serverless, container, and server https://www.thorntech.com/2018/08/containers-vs-serverless/#:~:text=Because%20containers%20need%20a%20long,some%20scaling%20issues%20as%20well.

My main agenda is a practical approach to understand the different approaches, you will have a good understanding of the following:

Front-End

For the front-end, we will have a simple blog application. You can use any application during the tutorial. The main focus will be the approach that serves serverless, container, or server.

For our front-end deployment, we can use different techniques for deployment i.e:

1. AWS
2. Netlify
3. Google
4. Azure

Back-End

A. Express, Mongo DB, and Node

For this, we will further discuss deployment using Containers and Servers. Deployment using different products in AWS

B. AWS API Gateway, Lambda, S3, and DynamoDB
C. AWS Amplify, AWS AppSync, and DynamoDB

The second and the third are serverless. AWS will manage all your backend infrastructure. This is quite cost-saving and both can scale well.

For all these approaches the front end will be the same. Let us build our simple blog website using Vue and vuetify.

Front-End

The structure of our blog will be as follows.

1. Home page (display your content)
2. Dashboard page (create, edit, delete your content, profile)
3. Archive page
4. Contact and About page will be optional

$ mkdir blog-vue-application && cd blog-vue-application

Run the following command to install Vue:

$ vue create blog-vue-front-end // Manually select and select Vuex, Unit Testing, Router, Linter, Babel, Jest, and Lint on Save

Then add vuetify to the project:

$ vue add vuetify 

Now that we have completed installing vue and vuetify, let's build a structure for the front-end section.

/src/views

Add the following components to this directory:

1. Home.vue
2. Archive.vue
3. Contact.vue
4. About.vue

/src/components/authentication

Add the following components to this directory:

• Login.vue
• Signup.vue
• LoginHelp.vue
• Confirm.vue
• Reset.vue

/src/components/private

Add the following components to this directory:

• Form.vue
• Dashboard.vue

/src/components/parts

Add the following components to this directory:

• Header.vue
• Read.vue
• Footer.vue

For all the codes here is a repo for this simple application you can learn and practice with as we go along. https://github.com/kevinodongo/tutorial-blog-template.git

Home Page

Archive Page

Dashboard Page

With all the frontend ready you need to decide on how you want your backend to be. Having in mind that the application has to handle the following basic actions.

1. GET
   This action will handle getting our articles to our Main page / Dashboard and Archive.

2. PUT
   This action will handle updating an existing article in our Database

3. DELETE
   This action will handle deleting either a single article or many articles.

4. POST
   This action will handle creating a new article in the database.

There are other CRUD actions like PATCH, OPTIONS, and HEAD. We will discuss the above in another tutorial.

For Graphql using AWS Amplify and AppSync, we are going to use mutations, queries, and subscriptions. We will expound more in that section.

For a model/schema we are going to have a simple one, for each approach we will want to achieve something like this:

 {
    article_id: randomize("Aa0", 10), // random id for articles
    status: "", // Published or Draft
    author: { // author details
       name: "",
       email: "",
       about: ""
    },
    content: { // blog contents
       title: "",
       src: "",
       text: ""
    },
    createdAt: new Date(), // created at
    updatedAt: "" // updated at
 },

Our next tutorials will be as follows:

1. MongoDB, Express, and Node

   • Build your backend using the above stack.
   • Authentication using Passport.js
   • Container deployment
   • AWS products deployment like Elastic Beanstalk, CloudFormation, SAM
   • Vercel

2. AWS API Gateway, Cognito, Lambda, and DynamoDB

   • Configuring your API's
   • Protecting using IAM, Lambda, etc
   • Authentication using Cognito
   • Route 53 for Domain and deployment in S3

3. AWS Amplify, AWS AppSync, DynamoDB

   • We will declare everything in AWS Amplify and on deployment everything else will be generated.

4. To complete this tutorial we will use different languages to configure our backend.

   • Python and SQ Lite.
   • Go
   • Ruby on rails

I hope by the end of everything you will have a good understanding of how you can use different technologies to get your backend and achieve serverless, containers, or server approach.

Thank you