DEV Community: Akash Raju M

Easily deploy express REST API as a serverless function for free using ZEIT

Akash Raju M — Sat, 11 Apr 2020 15:33:19 +0000

Guide to easily deploy your express API as a serverless function for free using ZEIT.

Photo by Benjamin Voros on Unsplash (Just a beautiful picture, not related to the content)

Introduction

Serverless computing (or serverless for short), is an execution model where the cloud provider (AWS, Azure, or Google Cloud) is responsible for executing a piece of code by dynamically allocating the resources. And only charging for the number of resources used to run the code. The code is typically run inside stateless containers that can be triggered by a variety of events including HTTP requests, database events, queuing services, monitoring alerts, file uploads, scheduled events (Cron jobs), etc. The code that is sent to the cloud provider for execution is usually in the form of a function. Hence serverless is sometimes referred to as “Functions as a Service” or “FaaS”.

Initialization

Windows

If you are on windows, I highly recommend you download and install git bash. It comes bundled with git and can be downloaded from here: https://git-scm.com/downloads

Project setup

Go to your projects folder and open terminal or git bash if on windows. We will now create a new folder and change into it. Copy and paste the command below to do it.

mkdir express-serverless-example && cd express-serverless-example

Now we will install all the required dependencies for the project, make sure nodejs(You can get it here: https://nodejs.org/en/download/) is installed in your system. To make sure nodejs and npm are installed, you can run the below command to check the version of each.

node -v && npm -v

We will now initialize a new project, for that you run the command below. This will create a new package.json file with default options.

npm init -y

We will now install express.

npm i express

We will now install now (CLI tool for ZEIT) as a global dependency.

npm i -g now

Now open the newly created folder in your favourite code editor, if you are using vscode(You can get it here: https://code.visualstudio.com/), which I highly recommend, you can type the command below and it will open vscode.

code .

Express code

We will now create an ‘index.js’ file to create an express app(Filename MUST be ‘index.js’ for it to work with ZEIT) and paste the following contents into it.

const express = require("express");

const app = express();

const port = 3000;


// Body parser

app.use(express.urlencoded({ extended: false }));

// Home route

app.get("/", (req, res) => {

res.send("Welcome to a basic express App");

});

// Users route

app.get("/users", (req, res) => {

res.json([

{ name: "Akash", location: "India" },

{ name: "Abhishek", location: "India" },

]);

});

// Listen on port 5000

app.listen(port, () => {

console.log(`Server is running on port 3000

Visit http://localhost:3000`);

});

That’s it, we are done with our basic express app.

Hosting

If you haven’t already, create an account on https://zeit.co/, and type the below command in your terminal or git bash and follow instructions to log in.

now login

Before we host our app in ZEIT, we must create a configuration file for it. To do that create a new file called ‘now.json’ and paste in below contents.

{

"version": 2,

"builds": [{ "src": "index.js", "use": "@now/node-server" }],

"routes": [

{

"src": "/",

"dest": "/index.js",

"methods": ["GET"]

},

{

"src": "/users",

"dest": "/index.js",

"methods": ["GET"]

}

]

}

I’ll now explain each of the fields above, the version field will specify the ZEIT Now Platform version and builds field will specify which build to use and which file to use as source and routes field will specify all routes to use, this is the most important part so if you add a new route don't forget to include it here.

You can find more info about configuration here https://zeit.co/docs/configuration#introduction/configuration-reference

Now, we are all done, now you can run the command below to host your API on ZEIT.

now

The function should be successfully uploaded and you should get a link to access it.

Lessons learnt by failing in my first ever hackathon

Akash Raju M — Sat, 11 Apr 2020 15:29:54 +0000

Hope this article helps you avoid these mistakes that seem simple but can make a huge difference.

Photo by Estée Janssens on Unsplash

It was a six-hour hackathon and we were a team of two people. We were competing with around fifteen other teams. We were all college students. It was a web development hackathon and we were provided with a problem statement at the beginning of the hackathon and we had to provide the solution by the end of the time limit.

The First Mistake

The day before the hackathon, I discussed with my hackathon partner on what might the problem statement be and what to do if they decide to let us choose a problem statement. We also discussed what technologies and frameworks we will use. This is where I did my first mistake, I had recently started learning Vue.js and was very impressed by how easy it was to pick up and learn and how quickly you can build web apps with it. So I suggested that we would use vue.js for frontend and we could create an express backend API. Since I have been working with express for a while, I suggested that I will build the API and my partner would work on the frontend. The problem was he never worked with Vue.js before.

Only choose a language, framework or library you are comfortable with to use in a hackathon.

Since he was familiar with angular, I assumed it would be easy for him to pick up Vue.js and sent him an introduction video from youtube and he saw the video and understood the basics. The mistake here was obviously choosing a framework that he was not comfortable with. That was not too bad since, on the day of the hackathon, when we realised using Vue.js wouldn’t work, went back to using plain HTML, CSS with Jquery which he was good at.

The Second Mistake

It was the day of the hackathon, we came a little early to the place. Since we had a little bit of time with us, we decided to install all the required dependencies for the stack we were going to use.

Always make sure beforehand that all the setup works properly in your system.

There were only a few minutes before the hackathon started and for some reason, the Vue CLI failed to install on my partner's laptop, it was erroring out, the tension started building and we started panicking before we knew it, and the hackathon hasn’t even started.

The Third Mistake

The hackathon started and we were handed out our problem statement, the problem statement was that we had to build a comment’s module that would avoid creating new comment if it was found to be a duplicate or was similar. The frontend did not have a lot of the work to do at all, we quickly realised that using Vue.js wasn’t necessary and my partner started building the frontend using HTML, CSS and Jquery and I started with the backend API.

The project structure doesn’t matter in a hackathon.

Since it was my first hackathon, I didn’t realise how important time was in situations like these and I started creating different folders for different modules and all that stuff. In this process, I somehow missed writing code to connect to the database and the first four hours passed and we were still struggling with getting the comments to save to the database. I had worked with connecting database to express multiple times before, I would have realised if it showed any database connection error but unfortunately, it was failing without any error messages and I did not realise what was going wrong until it was too late.

The Fourth Mistake

By this time, my partner realised that this was not going to work so he quickly started to write the backend in Java as he was good at it, all the while panicking. But it was too late so he had to rush it and we were left with a partially working module.

Working with a time constraint changes a lot of things.

You don’t realise how different things seem when you are under the pressure of running out of time until you are in that situation. We underestimated how things could go wrong and how small mistakes can cause big problems.

Conclusion

Make sure that you are comfortable with all the technologies that you choose to work within a hackathon. Make sure all the tools and setup required for your stack work properly on your system. If possible, try not to decide on the stack to use until you are aware of the problem statement. Don’t concentrate too much on the structure of your project and concentrate more on getting your project to work properly without confusion. If you are going to participate in a hackathon, practise beforehand with the constraints of the hackathon and most importantly, don’t panic.