DEV Community: Cesar Muñoz

How to create a cron job in Vercel

Cesar Muñoz — Mon, 20 Mar 2023 11:58:22 +0000

Code: https://github.com/cesmunoz/vercel-cron-example

Introduction

Vercel release a few weeks ago a feature that we were waiting for a long time ago. This feature was already on other platforms as Netlify, so I’m glad that we have it now on this platform.

A corn job is basically a work schedule that runs assignments at a certain specific time, these activities are called Cron Jobs.

Some examples of cron jobs can be:

send a notification to a user at 9 AM
do a process every 15 minutes

The schema of a cron job is the following:



# ┌───────────── minute (0 - 59)
# │ ┌───────────── hour (0 - 23)
# │ │ ┌───────────── day of the month (1 - 31)
# │ │ │ ┌───────────── month (1 - 12)
# │ │ │ │ ┌───────────── day of the week (0 - 6) (0 is Sunday, 6 is Saturday)
# │ │ │ │ │
# │ │ │ │ │
# │ │ │ │ │
# * * * * *

For more about the schema you can check it up over here: https://crontab.guru/

Some examples of corn job periods can be:

Every hour = 0 * * * *
Every minute = * * * * *
Every day of the month = 0 0 1 * *
Every week = 0 0 * * 1

The Cron kernel is an integrated Linux functionality that schedules the execution of programs on your scheme. Cron searches the crontab (Cron tables) for previously established instructions and files. You can set up a Cron job to immediately manage code or other instructions by using a specific format.

Requirements

Nodejs
A Vercel account
Vercel CLI (In this example we are pushing everything directly to vercel)



npm i -g vercel

I hope you have everything set up!. Let’s code 🙂

Create a simple project

To do it run the following commands in the terminal



mkdir cron-job-vercel
cd cron-job-vercel
npm init -y

Then install the vercel package



npm install vercel --save-dev

Let’s create a folder called API and inside create a file where it will be the cron job



mkdir api
touch api/hello-world.js

In the hello-world.js paste the following code



module.exports = (req, res) => {
  res.send({
    status: 200,
    message: "Hello world!!",
  });
};

Then add the most important thing about this to run as a cron job. VERCEL.JSON



touch vercel.json

Cron configuration

Here you need to add the configuration of each cron job (if you have several cron jobs)



{
  "crons": [
    {
      "path": "/api/hello-world", // path of the handler
      "schedule": "* * * * *"  // configuration of the cron job
    }
  ]
}

IMPORTANT!:
Take into consideration that if you are using your personal account (Hobby) you can have only 2 cron jobs total, and those can be triggered once per day. So adjust the example to your necessities.

Deploy to Vercel

To deploy adjust your package.json. Please add the following script:



"scripts": {
    "deploy": "vercel --prod"
},

And in the command line type npm run deploy. Wait a few minutes and you will have a response similar to this one:



npm run deploy

> cron-job-vercel@1.0.0 deploy
> vercel --prod

Go to vercel after the cron job starts of you run it manually and you will see something like this

Conclusion

Cron jobs are super useful in the development of software. Vercel makes it super easy and handy to use it.

See you next week.

Happy Coding

Ces.

How to create a simple API in Vercel

Cesar Muñoz — Thu, 02 Mar 2023 18:32:06 +0000

Introduction

Sometimes creating an API and deploying it to a cloud provider like AWS, GCP, or Azure can be a difficult task. However, Vercel makes it extremely simple to create and deploy your API to the cloud platform. With this tiny tutorial, you can have a simple API in minutes

Repository

https://github.com/cesmunoz/simple-vercel-api

Requirements

Nodejs
A Vercel account
Vercel CLI (In this example we are pushing everything directly to vercel)

npm i -g vercel

Do you have everything set up? Awesome! Let’s code

Creating our API simple project

Let’s create a project, following the next commands:

mkdir simple-vercel-api
cd simple-vercel-api
npm init -y

We need to install the vercel package

npm install vercel --save-dev

In order to tell vercel that this is an api we need to create a folder called ***api,*** that’s it! Really simple, right?

mkdir api

Inside the API lets create a file called hello-world.js

touch api/hello-world.js

Inside the hello-world.js we are going to add a simple code

module.exports = (req, res) => {
  res.send({
    status: 200,
    message: "Hello world!!",
  });
};

aaaand we’re done! Pretty simple don’t you think?

Testing locally

In order to test it locally, we need to do the following.

Go to package.json and add a new item in the scripts:

scripts: {
    start: "vercel dev"
}

(Make sure you already configure the vercel cli correctly - vercel login)

Now we can do npm start and you need to follow the wizard. Similar to this:

npm start

> simple-vercel-api@1.0.0 start
> vercel dev

Vercel CLI 28.16.12
? Set up and develop “~/repos/simple-vercel-api”? [Y/n] y
? Link to existing project? [y/N] n
? What’s your project’s name? simple-vercel-api
? In which directory is your code located? ./
> Ready! Available at http://localhost:3000

Open a browser a put the following url: http://localhost:3000/api/hello-world.
The response should be:

{
    "status": 200,
    "message": "Hello world!!"
}

Deploy to vercel

To make the api live in production we need to do some adjustments to the project.

In package.json we will add a new script command:

"scripts": {
    "deploy": "vercel --prod"
},

And in the command line type npm run deploy. Wait a few minutes and you will have a response similar to this one:

npm run deploy

> simple-vercel-api@1.0.0 deploy
> vercel --prod

Vercel CLI 28.16.12
🔍  Inspect: https://vercel.com/[your_user]/simple-vercel-api/6PmNoyX4CfhdZhDny8LJmANV7AxB [3s]
✅  Production: https://[your_url].vercel.app [20s]

Go again to the browser and put the Production url that mentions above https://[your_url].vercel.app/api/hello-world and you should have the same response that you had locally

{
    "status": 200,
    "message": "Hello world!!"
}

Conclusion

Creating a simple API on Vercel is straightforward and super easy. With just a few configurations you can have your own API in the cloud.

Please let me know if you find it super useful
Cheers!
Ces

Improve your commits and Pull Request

Cesar Muñoz — Tue, 08 Feb 2022 20:47:44 +0000

All the companies try their best to make a unified way to work, from making the website more maintainable to making the response of the api faster.
This time I'm going to be focused on commits, and you are starting asking "Commits?" Yes! commits! :)

When you are doing your first steps with git you start typing whatever comes to your mind that reflects correctly what you did and if you think about it no one writes, in the same way, a commit.
Also, there are times that you need to deliver something really fast and you don't have time so you type in your commit something like these:

- lint fix
- test
- wip
- fix deploy

If for some reason the is a bug in the application and you need (for some reason) to read the history con the file or commits, you will see those types of commits. I saw worst comments than above, believe me

That's when conventional commits comes in the scene.

So...What are conventional commits?

Basically is a convention we use on top of a commit message, to make our codebase clearer with some easy steps of rules that we need to follow

What are the benefits?

We could have a more clean codebase and readable
Generate CHANGELOG automatically and sectioned
Easy to inform to everyone (tech and no tech people)
Trigger builds
Contribute easily to everyone
Know what's going on in the PR

Let me know how to write it!
Rules
The rules are really simple! :).
Need to specify the type of commit/pull request that you did.

The template will be the following one:

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]

Let's break into parts.

type => Mandatory
This will tell the type of change you are applying to the codebase.
Possibilities:

- fix
- feat => feature/enhancement
- build
- ci
- chore
- docs
- refactor
- test

Example: fix: validate user email

scope => Optional
With the scope, we are specifying even more where was the change.

Example:

fix(api): validate user email

description => Mandatory
This will remain the same way that we are doing nowadays. Just commit with a message and be as specific as you can

body => Optional
If you need to clarify even more you could add a body

Example:

fix(api): validate user email

We need to add validation on the email so it can be created properly in our system.

footer(s) => Optional
You could use that for reference whatever you want. For example, in case of a rollback you could do like this.

Example:

revert: let us never again speak of the noodle incident

Refs: 676104e, a215868

Special Attention => Important!
sometimes we are adding some code that it could lead to breaking the application.
In those mark them in two ways.

Adding in the type as BREAKING CHANGE
Adding an exclamation mark !.

In my opinion, I prefer the exclamation mark.
Example

fix(api)!: validate user email

There are some tools to apply this without any mistakes? Sure! there you go.

Tools

For VSCode Lovers
https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits

For Vim Lovers
https://carlosapgomes.me/post/bettercommitmsgs/

For WebStorm Lovers
https://plugins.jetbrains.com/plugin/13389-conventional-commit

For Pull Requests
https://github.com/zeke/semantic-pull-requests

With this, you and your team can have a unified way to have the commits, and also readable and understandable.

I hope you try the conventional commits. =)

If you need to read more about it
https://www.conventionalcommits.org/en/v1.0.0/

Please feel free to add your experience or thoughts about it.

See ya next time.
Ces!

Make your lambda functions lightweight

Cesar Muñoz — Tue, 17 Aug 2021 16:51:51 +0000

I see a lot of articles on how to create a lambda with simple steps, always showing the hello world. But every time you start using dependencies in your lambda function, it starts to weigh.

So, this article will show you how to make your lambda more lightweight and have only the function that we need to execute

Before jumping into the code you need these requirements:

1) AWS CLI installed
2) Configure your aws credentials locally with aws configure.
3) Obviously node installed (We are going to use node v12)
4) Serverless installed npm install -g serverless

Do you have it all configured? Alright! Let's start coding!! 🙂

First, I wanna show you the problem

Create a folder or create a repo and clone it. In my case, I created a repo and clone it.

I will use npm to install the dependencies, you could use yarn if you want to

> npm init -y

This will create a package.json

Now we are going to create our lambda function with

> sls init aws-node-rest-api

We are going to make a few changes to the project.

The aws-node-rest-api will change it to src and copy serveless.yml from src in our root folder

> mv aws-node-rest-api src
> mv src/serveless.yml ./serverless.yml

And the last thing to change will be the path of where is our lambda function

Before

app: aws-node-rest-api
service: aws-node-rest-api

provider:
  name: aws
  runtime: nodejs12.x

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: /
          method: get

After

app: aws-node-rest-api
service: aws-node-rest-api

provider:
  name: aws
  runtime: nodejs12.x

functions:
  hello:
    **handler: src/handler.hello**
    events:
      - http:
          path: /
          method: get

I highlighted the changed path of the lambda function.

And that's it. Let's deploy our function!!

> serverless deploy

After a while, you'll get the following picture

And if you go to aws you can see your new lambda function!! YEY!!! GOOD JOB!!!

And if go to see what is deployed in our lambda function we can see the code

Now that we are experts in serverless and lambda functions we want to add some packages

Our lambdas won't we simple right? most of the time we are using packages, to do some calls to the database, call an aws feature, call an api, manipulate an image, etc.

Now, let's install some packages. Let's say we are going to manipulate some images, in our case we are going to use jimp (this is only for the example. I needed a heavy npm package)

So in our console let's type the following command

> npm install --save jimp

And now let's deploy again a see what's going on

> severless deploy

Wait! What? Cannot see the code? What's going on?

Well, with the simple configuration we are uploading the node_modules folder into our lambda function and the package that we just installed makes the lambda too large to show the code.

How can avoid this and see my code again!!? Lambda Layers to the rescue!!

That's right! serverless has the ability to create Lambda Layers. A Lambda Layer is a ZIP archive that contains libraries or other dependencies. With that, we can make our lambda function smaller again.

How we can achieve this? We are going to put our node_modules folder in a Lambda Layer.

For this, we are going to make a few changes to our code.

First, we are going to install this package

> npm i --save-dev serverless-hooks-plugin

and after that, we are creating a deployment folder and create a script where it has all the things that we need to create the layer.

> mkdir deployment
> touch deployment/prepare.sh

In our prepare.sh we are going to copy the following code

echo '****** Starting Pre Deploy Script ******'
echo '1- Creating folder for layers and copy package.json' 
rm -rf ./.dist
rm -rf ./.serverless-layers
mkdir -p .serverless-layers/node-layers/nodejs
cp package.json .serverless-layers/node-layers/nodejs/
echo 'DONE!' 

echo '2 - Change path to serverless-layer, adding LIB dependency, remove npm and yarn files'
cd .serverless-layers/node-layers/nodejs
npm i --production
rm package.json
rm package-lock.json
cd ../../..
echo 'DONE!' 

echo '****** Finished Pre Deploy Script ******'

Basically we are creating a nodejs folder inside .serveless-layes/node-layers, copying the package.json from our root folder and install all the dependencies.

Then, in our package.json we are adding a new script

"deploy:prepare": "sh deployment/prepare.sh"

Leaving our package.json something like this.

{
  "name": "serverless-aws-node-layer-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "deploy:prepare": "sh deployment/prepare.sh",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cesmunoz/serverless-aws-node-layer-example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cesmunoz/serverless-aws-node-layer-example/issues"
  },
  "homepage": "https://github.com/cesmunoz/serverless-aws-node-layer-example#readme",
  "dependencies": {
    "jimp": "^0.16.1"
  },
  "devDependencies": {
    "serverless-hooks-plugin": "^1.1.0"
  }
}

And the last thing, we need to make this steps in our serveless.yml.

Adding the following things:

1) Using the custom hook that the package serverless-hooks-plugin provides us

plugins:
  - serverless-hooks-plugin

custom:
  hooks:
    before:package:createDeploymentArtifacts:
      - npm run deploy:prepare

2) Creating the layer

layers:
  nodeModules:
    path: ./.serverless-layers/node-layers
    name: My-App-Node-Dependencies
    description: Node Modules for My App
    compatibleRuntimes:
      - nodejs12.x
    package:
      include:
        - ./**

3) Make our function package individually and exclude everything

package:
  individually: true
  exclude:
    - ./**

4) Include only our handler.js in the lambda function and make use of the lambda layer

functions:
  hello:
    handler: src/handler.hello
    layers:
      - { Ref: NodeModulesLambdaLayer }
    package:
      include:
        - src/handler.js        
    events:
      - http:
          path: /
          method: get

The final serveless.yml will be something like this:

app: aws-node-rest-api
service: aws-node-rest-api

provider:
  name: aws
  runtime: nodejs12.x

plugins:
  - serverless-hooks-plugin

custom:
  hooks:
    before:package:createDeploymentArtifacts:
      - npm run deploy:prepare

layers:
  nodeModules:
    path: ./.serverless-layers/node-layers
    name: My-App-Node-Dependencies
    description: Node Modules for My App
    compatibleRuntimes:
      - nodejs12.x
    package:
      include:
        - ./**

package:
  individually: true
  exclude:
    - ./**

functions:
  hello:
    handler: src/handler.hello
    layers:
      - { Ref: NodeModulesLambdaLayer }
    package:
      include:
        - src/handler.js        
    events:
      - http:
          path: /
          method: get

Let's deploy it again and see what happens

> serverless deploy

Woala! We can see our code again!

And Where is our lambda layer?

We can see and the lambda function has a dependency on our new lambda layer

And if we go to lambda layers we can see it's there

So with that configuration we can view always our code.

Hope you found it useful as I do.

Repo: https://github.com/cesmunoz/serverless-aws-node-layer-example

See you next time!!

My VSCode Extensions

Cesar Muñoz — Wed, 02 Jun 2021 17:12:55 +0000

VSCode is a great IDE to work with and very popular for couple of years.
Since I decided to start coding with node & react, I choose VSCode as my main IDE (I was a C# developer before, so I keep in team Microsoft)
From time to time I added, deleted or switch extension of VSCode

My currently extensions are:

Auto Rename Tag

Instead of replace each tag, it renames paired tags. This extension is a MUST!

Babel Javascript

This basically highlights the syntax of ES6/7/8/etc, ReactJsx

Better Comments

I avoid to use comments, really. But sometimes someone add some comments and it's a good thing to highlight to see and make decisions like (refactoring, tech debt, etc).

Bookmarks

In Visual Studio (in my C# days) I used a lot of bookmarks, so it's great to have this extension. Great way to navigate through your code.

Bracket Pair Colorizer

This matches the brackets with colors. It's awesome!

Code Spell Checker

My native language is Spanish and sometimes I make mistakes writing some variable in English, so this extension tells you if the word you typed is correct or not.

Docker

I use docker a lot, and sometimes I'm lazy to start a container in the command line, so this is great tool to start, stop, delete a container.

DotENV

Basically is a port of DOTENV for vscode

Dracula Official

This is my currently theme. I use night owl and others but right now this is the theme for me. Maybe in the future I will change it again.

ESLint

This extension integrates ESLint into VSCode and will let you know for eslint errors that need to be fix.

GitLens

This is awesome to compare, see while you are coding, who was the last person to made the modification.

Live Server

This launch a local development server with live reload

Live Share

This is a great tool for collaboration. You can work with a partner in realtime, can debug, make call, share terminals. It's an awesome tool!

Markdown All In One

This basically makes you markdown more pretty

Path Autocomplete

Provides a path autocomplete for vscode

Path Intellisense

Plugin that autocompletes filenames

Peacock

This is an awesome tool to distinguish all your vscode windows.
You can set a color in your vscode workspace. I use to check my work and my personal projects

Polacode

It create a nice code snippet to upload in your blog

Prettier - Code Formatter

Great Tool for formatting. I super recommend it.

Profile Switcher

I have lots of different configurations, work, personal, talk presentation.
With this extension I can change really quick instead of making modification in my json configuration file.

Quokka.js

Great tool to test something really quick.

Settings Sync

Instead of adding all the extensions each time I install vscode, I use this extension that keeps everything in sync. (extensions, settings, etc).

TODO Highlight

Not much to say here, if you see a todo it will highlight.

vscode-icons

Like my current theme is Dracula, this my current icons theme. Maybe in the future I will change it

If you have a good extension, please comment below.
I promise the next article will be more interesting.

The next article will be using lambda layers to make your lambda functions more lightweight

See you next time
C.

First Post - A new journey begins

Cesar Muñoz — Thu, 24 Sep 2020 23:35:00 +0000

So many times I decided to start making some blog posts but I always heard a little voice that says the following statement: "What are you going to write in your blog? There is a huge amount of posts writing about the same thing."

Today, don't know why, but I'll start my blog 💪 🙂

Let me introduce myself

Hi! I'm Cesar 👋

I'm a software developer. I was born in 1987 and grew up in Quilmes (Argentina). I started coding when I was 15 in high-school.

I've written code for Hewlett-Packard, Accenture, Lagash, N5, Virtualmind, Morean to name a few (Some are bigger than others)

In all these companies I've learned a lot and I am very grateful for all the experience that I've achieved through the years.

For two years I was an educator for Acamica, it was a really amazing experience.

The languages I used were: Pascal, C, Visual Basic, Visual Basic .NET, C#, Javascript

Nowadays my mainly stack are these:

Languages: Javascript, Typescript
Tech: NodeJS, React, Redux, AWS (Amazon Web Services), Serverless, ElasticSearch, Git, Mocha, Chai, Jest, Express.
Cloud (AWS): IAM, CloudFormation, DynamoDB, EC2, IoT, Kinesis, SQS, Lambda, RDS, S3

In my free time, I love listening to music, play video games (I'm an Xbox fan), stream on twitch.

I used to play baseball and used to have a band (I'll make a post about them in the near future)

So, that's about it.

Please follow me or contact me!!

Twitter - https://twitter.com/cesmunoz35
LinkedIn - https://www.linkedin.com/in/cesar-muñoz-61675949/
Github - https://github.com/cesmunoz

P.S: It's my first time writing a post in English. I hope it can be understood well. Also making post are a way to improve myself 🙂. Sorry for all the grammar issues