Kick-Start Your Serverless Journey

Serverless computing is a cloud computing execution model in which the cloud provider runs the server, and dynamically manages the allocation of machine resources. Pricing is based on the actual amount of resources consumed by an application, rather than on pre-purchased units of capacity.

How Serverless Works

Developers write code logic as a function and deploy it on a serverless platform. The flow shown below depicts the general way of how serverless processes client requests once the function is deployed. The exact amount of resources needed is allocated dynamically by the cloud provider instead of pre-provisioning resources in the usual cloud services. This makes a win-win situation between the serverless consumer and serverless provider.

Benefits

Serverless is inevitable. Some of its benefits are:

• Build highly scalable application instantly.
• Focus only on the App’s code logic by getting rid of Server logic and Infra Set up.
• Highly secure. i.e., secure app’s code alone and not infra or other security concerns.
• Budget-friendly since you pay only when users consume.
• Ship ideas faster to market and analyse the market's response.

How to deploy a function in a Serverless environment? (example)

We shall create a custom business landing page where we showcase what businesses do and connect with business users through a contact us form using React.js (for front-end), Node.js(for back-end) and MongoDB (as the database). Let’s implement our serverless application with Nimbella which is one among a number of serverless cloud providers like AWS Lambda, Google Cloud Functions, etc.,

Directory Structure to Deploy Serverless In Nimbella:

As per Nimbella, front-end code needs to be wrapped inside a directory named "web" whereas back-end code is kept inside a directory named "packages". Also note that the directory name acts as end-point once deployed. Hence name the directory as per the name of end-points you would like to create.

Steps to Follow to Make Our App Live:

1. Create a serverless function which stores the enquiry details from users into the database with Node.js.
2. Create a React front-end which consumes an Api Created from the above step to facilitate the user interface.
3. Set up Nimbella and Login Nim CLI. Deploy both front-end and back-end into Nimbella Serverless platform through Nim CLI.

Step #1 Developing Back-End Serverless function:

Like any business landing pages, when a user enquiry is being received, we will be storing it in our DB and will get back to the user to resolve their query. The process flow for the same is depicted as below.

Create a directory for the app and navigate to the directory. And then create an index.js file.

Run the command below to initialize the project and provide the entry point as index.js.

npm init

We need to install npm packages mongoose (to interact with MongoDB)

npm install mongoose

Implementing App Logic

As per the process flow depicts, we need to store the user enquiry details into our mongoDB.

For that, we carry out the following:

1. Establish MongoDB connection
2. Create model for user enquiry details
3. Store it in the DB and return a JSON response having the acknowledgement inside the "body" attribute. The code for the same is shown below.

Now our directory, having a back-end serverless function in Node.js is shown below.

Step #2 Developing Front-End

Create the front-end for our business landing page having fields to get enquiry details in React with below command.

npx create-react-app {my-app-name}

Let’s modify and design our front end in the usual React.js way and consume our API developed with the above steps using the npm package "axios".

Structuring the Directory for Deployment

As mentioned earlier, we will wrap out front-end code inside the "web" directory and the back-end code inside the "packages" directory.

Inside the web directory, create two files, as build.sh and .include

.include → the Build directory of our React App is identified in this file.

build.sh → contains the npm command to build the React App.

Once the directory structure is modified as specified, it appears as shown below:

Project.yml File

In Nimbella, we will be specifying the artifacts to be deployed in a yml configuration file. Let’s create a file named "project.yml" and specify the configuration for deployment as below.

How to configure the environment variable in Nimbella for deployment

Create a .env file having the values of the environment variables to be used ins. Environment values will be passed to the functions through Nimbella by specifying the variables in project.yml under the environment section.

Step #3 Set up Nimbella for Deployment:

1. Create an account in Nimbella, and install nim CLI and then log in with the command below in nim CLI.

   nim login

2. Deploy the application in Nimbella with the command below in nim CLI.

   nim project deploy {application’s directory} --env={path of environment file}

3. Get the URL of deployed serverless function/action with the command below.

   nim action get {deployed action’s name} --url

Hurray! Our API is deployed to the above URL and the front-end is deployed to the host of our API.

Let’s test our API for the Shortener service with Postman.

Let’s try our App through UI by visiting the host URL of our API https://athithan-thk5opxvfdh-apigcp.nimbella.io/

GitHub Source: https://github.com/boltathi24/custom_form_nimbella

The blog is written by the guest author: Athithan Raj P. as a part of "Off-by-none" contest.

Follow him on Twitter: @raj_athithan