DEV Community

Dilum Darshana
Dilum Darshana

Posted on

Build Visual Workflows with n8n and Automate Everything

#n8n #ai #workflow #automation

Hello devs,

As a full-stack developer working mostly with JavaScript, I often build internal tools and data pipelines. I found myself writing a lot of boilerplate Node.js code to glue together APIs and databases — until I discovered n8n.

This blog is my personal reference and a shared guide for anyone looking to get serious about workflow automation

Installing and Running n8n Locally

Running n8n with Docker is the easiest and most consistent way to set it up locally. It keeps your environment isolated, reproducible, and production-ready. No need to worry about system dependencies. But, it is available in Saas as well. https://app.n8n.cloud/login

docker-compose.yml

services:
  n8n:
    image: docker.n8n.io/n8nio/n8n
    container_name: my-n8n-workflow
    restart: always
    ports:
      - "5678:5678"
    environment:
      # - DOMAIN_NAME=example.com
      # - SUBDOMAIN=n8n
      # - N8N_HOST=n8n.example.com
      # - N8N_PROTOCOL=https
      # - N8N_PORT=5678
      # - WEBHOOK_URL=https://n8n.example.com
      # - NODE_ENV=production
      - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
      - N8N_SECURE_COOKIE=false
    volumes:
      - ./n8n_data:/home/node/.n8n
Enter fullscreen mode Exit fullscreen mode

.env

GENERIC_TIMEZONE=Asia/Colombo
Enter fullscreen mode Exit fullscreen mode

Note: There can be a user ownership issue in the n8n_data folder. Run the following command from the folder where container running,

$ sudo chown -R 1000:1000 ./n8n_data
Enter fullscreen mode Exit fullscreen mode

Now, do the composer up,

$ docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

If everything goes well, n8n should be runs on http://localhost:5678. Fill the user registration to create an account, then fill the survey (as of now) to go into the dashboard.

n8n dashboard

n8n UI and Core Concepts

  • Workflow Canvas: The drag-and-drop editor where you build automation flows step by step.
  • Nodes: The building blocks of workflows—each node performs a task like sending an email, calling an API, or transforming data.
  • Triggers: Nodes that start workflows (e.g., Cron, Webhook, Manual).
  • Actions: Nodes that perform operations, like HTTP requests, database inserts, or sending notifications.
  • Data Flow: Data moves between nodes in JSON format, and you can map, modify, or branch the flow at each step.
  • Function Node: Use JavaScript for advanced logic and data manipulation directly inside n8n.
  • Set Node: Quickly add or modify fields without writing code.

Building a Real-World Workflow

To understand how triggers, API calls, data transformation, and external services come together in n8n, let’s build a simple real-world workflow.

Use Case: Send a random joke to your email every 5 minutes using Resend

Workflow: [Cron Node] → [Fetch Joke (HTTP Request)] → [Send Email (Resend HTTP Request)]

Step 1: Create a New Workflow

  • Open the n8n editor.
  • Click “New Workflow” and give it a name, for example: Send Joke to Email

Step 2: Add a Cron Trigger

  • Click “+” Add Node.
  • Search for Schedule Trigger and select the Schedule Trigger Node.
  • Configure it to run every 5 minutes, continuously.

Add a cron trigger

Step 3: Fetch a Joke via HTTP Request

  • Click “+” Add Node.
  • Search for HTTP Request.
  • Configure it with response format as JSON. URL: https://icanhazdadjoke.com/, method: GET

Configure http request

This should return a json something like this:

{
  "joke": "I once lost a banana at court but then I appealed."
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Send the Joke via Email Using Resend

Now send the joke to email using Resend's email API. To do this, need to create a Resend account and API key.

https://resend.com

Configure the Email Node,

Since n8n doesn’t have a native Resend node, use HTTP Request again.

  • Click “+” Add Node.
  • Select HTTP Request.
  • Configure it,

URL: https://api.resend.com/emails
Method: POST
Headers:

  • Authorization: Bearer RESEND_API_KEY
  • Content-Type: application/json

Config HTTP node

  • Send body: 
{
  "from": "Jokes <[email protected]>",
  "to": "[email protected]",
  "subject": "Here's Your Joke",
  "text": "{{$json.joke}}"
}
Enter fullscreen mode Exit fullscreen mode

JSON Body

Now, everything ready for test. The whole workflow looks like this,

Whole workflow

Run the workflow manually by clicking “Execute Workflow”. Should receive an email with a joke :)

If it works, click “Activate” to make it run automatically every 5 minutes.

Activate workflow

Final Thoughts
Whether you're automating your daily tasks, integrating multiple services, or building your own AI pipelines—n8n gives you the flexibility of code with the simplicity of a visual editor.

This was just the beginning.

Cheers....

Top comments (0)