DEV Community: Aadarsh Verma

YAML Tutorial: A Beginner's Guide to Writing YAML Files

Aadarsh Verma — Fri, 16 May 2025 16:12:07 +0000

Hey Guys! This blog will make you understand what YAML is all about.
I'm keeping it simple and easy, so you can grasp it without breaking a sweat.

Let's Begin! What is YAML?

Initially it was called Yet Another Markup Language, but later renamed to YAML Ain't Markup Language (a recursive acronym).

YAML is the cleanest way to write configuration files. I'm guessing you already know we need config files for certain tasks while developing apps or working that DevOps magic. There are multiple ways to write configuration files such as XML, JSON, and TOML (plus several others), but YAML has some distinct advantages.

Why do we need YAML or any other file formats?

These file formats make developers happy and help our data dance from server to server or client to server. They're primarily used for transmitting data between servers and clients, particularly in web applications. These are basic data formats for writing important stuff like secret files, destinations, project configurations, and all those hidden gems that make our coding life easier.

If we dive into the technical side, these files serialize complex data structures into a human-readable format that machines can easily parse. Using these formats allows different tools and systems to play nicely together.

Serialize: The process of converting an object or data structure into a format that can be easily stored or transmitted.

Let's dive into YAML

YAML is like JSON's bigger, cooler sibling (another serializing language)

YAML can do everything JSON does and then some! It's actually a superset of JSON. Unlike JSON, YAML uses indentation (similar to Python) which creates cleaner, more readable code. No brackets, no braces – just clean, clear lines of code.

How to write YAML

The basic structure of YAML is a map (object in JavaScript, dictionary in Python) - just key-value pairs, nothing more.

key: value

Now that you know the secret sauce, let's build some examples:

Object type:

# Key-value pairs
name: Elon Musk
age: 56

# or in flow style (JSON-like)
{name: Elon Musk, age: 56}

YAML offers the braces format for the old-school folks who are stuck in 1972. Hehe...

List type

# List in YAML (block style)
countries:
  - India
  - China
  - Russia

# or in flow style
countries: [India, China, Russia]

Now you know what a list looks like in YAML. Let's keep going...

Multi-line strings

# Literal block scalar (preserves newlines)
description: |
  This is a multi-line string.
  Each line will be preserved.
  Including the line breaks.

Output:

This is a multi-line string.\nEach line will be preserved.\nIncluding the line breaks.\n

The pipe character (|) preserves all newlines in the text.

A way to write in multiple lines but get output in one line:

# Folded block scalar (folds newlines to spaces)
description: >
  This is also a multi-line string,
  but newlines will be replaced with spaces,
  creating one continuous line.

Output:

This is also a multi-line string, but newlines will be replaced with spaces, creating one continuous line.\n

The greater-than symbol (>) replaces newlines with spaces, except for empty lines and more-indented lines.

How a real YAML file looks like

services:
  backend:
    build: backend
    depends_on:
      - db
  db:
    # We use a mariadb image which supports both amd64 & arm64 architecture
    image: mariadb:10.6.4-focal
    # If you really want to use MySQL, uncomment the following line
    #image: mysql:8.0.27
    volumes:
      - db_data:/var/lib/mysql
  frontend:
    build: frontend
    ports:
      - 3000:3000
    depends_on:
      - backend

This is an example of a docker-compose.yaml file. Don't worry if you're not familiar with Docker yet - just focus on understanding the file structure.

We have a top-level services key that contains nested keys for backend, db, and frontend. Each of these has its own nested properties. Notice how the ports key holds a list of values.

Blocks in YAML (Document Separators)

YAML allows multiple documents in a single file using document separators (---):

---
"apple": "Snow white should eat me!!"
22: "this is Aadarsh age"
---
# lists
- apple
- mango
- banana
- Apple
---
cities:
- new delhi
- mumbai
- gujrat

Here we've written 3 separate YAML documents in one file. Save it as config.yaml, and when you run it, it will be treated as three separate YAML documents.

How to end a file?

You can explicitly mark the end of a YAML document using ... (three dots):

services:
  backend:
    build: backend
...

Comments

You can add comments using the # symbol:

- Apple # This is a delicious fruit
- Orange # It's both a fruit and a color

Specify Data types in YAML

YAML can infer data types, but you can also be explicit:

# Explicitly specify types
zero: !!int 0
positiveNum: !!int 45
negativeNum: !!int -45

binaryNum: !!int 0b11001
octalNum: !!int 06574

hexa: !!int 0x45
float: !!float 45.55

commaValue: !!int +540_000 # 540,000
is_active: !!bool true

Common YAML tags include !!str (string), !!int (integer), !!float (float), and !!bool (boolean). You might not need these often, but it's good to know they exist.

Anchors and Aliases in YAML

One of YAML's most powerful features is the ability to reuse content with anchors (&) and aliases (*):

# Define an anchor
base: &base_config
  version: 1.0
  environment: production
  logging: true

# Reuse it with an alias
service1:
  <<: *base_config  # Merge the base_config here
  name: authentication
  port: 8080

service2:
  <<: *base_config  # Same base config reused
  name: payments
  port: 9090

This helps avoid repetition in your YAML files.

Advanced YAML Features

Nested Maps and Complex Structures

YAML excels at representing complex, deeply nested structures:

person:
  name: 
    first: John
    last: Doe
  contact:
    email:
      personal: john.doe@personal.com
      work: john.doe@company.com
    phone:
      - type: home
        number: 555-1234
      - type: mobile
        number: 555-5678
  hobbies:
    - reading:
        genres: [sci-fi, history]
        favorite_book: Foundation
    - gaming
    - hiking

Environment Variables in YAML

Many YAML processors support environment variable interpolation:

database:
  username: ${DB_USERNAME}  # Uses environment variable
  password: ${DB_PASSWORD}
  host: ${DB_HOST:-localhost}  # With default value

YAML Validation

Always validate your YAML files before using them in production! Several online and offline tools can help:

YAML Lint
YAML Validator
yamllint CLI tool

Invalid YAML can cause mysterious errors in your applications - a misplaced space or tab can break everything!

Common YAML Errors and How to Fix Them

Indentation errors: YAML is sensitive to spaces and tabs. Always use consistent indentation (preferably spaces).
Mixing tabs and spaces: Don't mix them! Pick one and stick with it.
Missing quotes around special characters: If your string contains characters like :, {, }, [, ], etc., wrap it in quotes:

   message: "This string contains: special characters"

Incorrect line breaks in multi-line strings: Make sure you understand the difference between | and >.

Real-world Use Cases Beyond Docker

YAML is widely used in:

Kubernetes - for defining containers, pods, services, and entire deployments
GitHub Actions - for defining CI/CD pipelines
Ansible - for configuration management and automation
CircleCI/TravisCI - for continuous integration
Static site generators (Jekyll, Hugo) - for frontmatter in content files
OpenAPI/Swagger - for API documentation

Tools for Working with YAML

yq - Like jq but for YAML, allows command-line manipulation of YAML
VSCode plugins - YAML extension provides syntax highlighting and validation
PyYAML - Python library for YAML processing
js-yaml - JavaScript library for YAML

Conclusion

YAML provides a clean, human-readable way to configure applications and services. Its simplicity and flexibility make it increasingly popular in modern development workflows, especially in cloud-native and DevOps environments.

Key advantages of YAML:

More readable than JSON or XML
Support for comments (unlike JSON)
Rich data structures with less syntax noise
Built-in anchors and aliases for DRY (Don't Repeat Yourself) configurations
Wide adoption in tools like Kubernetes, Docker, and CI/CD pipelines

Whether you're configuring a complex Kubernetes cluster or setting up a simple GitHub Actions workflow, understanding YAML will save you time and headaches. Start with simple configurations and gradually explore its more advanced features as needed.

With great power comes great indentation responsibility!

Complete Guide to React Native Firebase🔥: Google Authentication and Realtime Database CRUD Operations

Aadarsh Verma — Sun, 04 May 2025 18:27:58 +0000

Introduction

Hey there! I'm Aadarsh Verma,
Here's the thing - I started this cool project because everyone in my class was doing the same old web applications with HTML, CSS, JS. I wanted to stand out, to be that guy who takes a different route. So I decided to develop a mobile app!

Sure, I could've chosen Java or Kotlin, but who has time for that when you're juggling college assignments, right? That's when I discovered React Native - same JavaScript foundation, but for mobile apps! Win-win! 🎯

My React Native Journey

Let me be real with you - I failed multiple times trying to build this Google Auth + CRUD app. The lack of proper tutorials, mentors, and clear guidance was frustrating. But you know what? I had two secret weapons: determination and the official React Native Firebase documentation!

Building FireApp (Yes, I named it after myself 😎)

Let's jump right in and create our React Native app with Firebase integration.

Step 1: Setting Up Your React Native Project

// I'm using Bare React Native
// Open your terminal and run:
npx react-native init fireApp

// This command will download all necessary files and dependencies

Step 2: Adding Firebase to Your React Native Project

First, install the required packages:

# Install Firebase core
npm install @react-native-firebase/app

# For Google Authentication
npm install @react-native-firebase/auth
npm install @react-native-google-signin/google-signin

# For Realtime Database
npm install @react-native-firebase/database

Step 3: Firebase Setup in Firebase Console

Go to Firebase Console
Create a new project (name it "FireApp" 🔥)
Add Android/iOS app to your project
Download google-services.json (Android) or GoogleService-Info.plist (iOS)
Place these files in their respective folders

Step 4: Configuring Google Authentication

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';

// Initialize Google Sign In
GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID', // from Firebase Console
});

// Sign In function
const signInWithGoogle = async () => {
  try {
    const { idToken } = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    await auth().signInWithCredential(googleCredential);
    console.log('Signed in with Google!');
  } catch (error) {
    console.error(error);
  }
};

Step 5: Setting Up Firebase Realtime Database

import database from '@react-native-firebase/database';

// Create (Add Data)
const addData = async (key, value) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .set({
        name: value,
        age: 20,
        timestamp: database.ServerValue.TIMESTAMP
      });
    console.log('Data added successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Read (Fetch Data)
const readData = async () => {
  try {
    const snapshot = await database().ref('/users').once('value');
    const data = snapshot.val();
    console.log('User data: ', data);
  } catch (error) {
    console.error(error);
  }
};

// Update Data
const updateData = async (key, newValue) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .update({
        name: newValue,
        lastUpdated: database.ServerValue.TIMESTAMP
      });
    console.log('Data updated successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Delete Data
const deleteData = async (key) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .remove();
    console.log('Data deleted successfully!');
  } catch (error) {
    console.error(error);
  }
};

Step 6: Creating a Complete App Component

import React, { useState, useEffect } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const FireApp = () => {
  const [user, setUser] = useState(null);
  const [text, setText] = useState('');
  const [data, setData] = useState(null);

  useEffect(() => {
    // Listen for authentication state to change
    const subscriber = auth().onAuthStateChanged(setUser);
    return subscriber; // unsubscribe on unmount
  }, []);

  const signInWithGoogle = async () => {
    // ... (Google sign in code from above)
  };

  const signOut = async () => {
    try {
      await auth().signOut();
      console.log('User signed out!');
    } catch (error) {
      console.error(error);
    }
  };

  // CRUD Operations
  const handleCreate = () => {
    if (user && text) {
      addData(user.uid, text);
      setText('');
    }
  };

  const handleRead = async () => {
    if (user) {
      const snapshot = await database().ref(`/users/${user.uid}`).once('value');
      setData(snapshot.val());
    }
  };

  const handleUpdate = () => {
    if (user && text) {
      updateData(user.uid, text);
      setText('');
    }
  };

  const handleDelete = () => {
    if (user) {
      deleteData(user.uid);
      setData(null);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {user ? (
        <>
          <Text>Welcome, {user.email}</Text>
          <Button title="Sign Out" onPress={signOut} />

          <TextInput
            value={text}
            onChangeText={setText}
            placeholder="Enter data"
            style={{ borderWidth: 1, marginTop: 20, padding: 10 }}
          />

          <View style={{ marginTop: 20 }}>
            <Button title="Create" onPress={handleCreate} />
            <Button title="Read" onPress={handleRead} />
            <Button title="Update" onPress={handleUpdate} />
            <Button title="Delete" onPress={handleDelete} />
          </View>

          {data && (
            <Text style={{ marginTop: 20 }}>
              Current Data: {JSON.stringify(data, null, 2)}
            </Text>
          )}
        </>
      ) : (
        <Button title="Sign In with Google" onPress={signInWithGoogle} />
      )}
    </View>
  );
};

export default FireApp;

Pro Tips from My Experience 💡

Error Handling: Always wrap Firebase operations in try-catch blocks
Authentication State: Use listeners to track auth state changes
Database Security: Set up proper Firebase rules
Offline Support: Firebase Realtime Database has built-in offline support!
Debug Mode: Enable Firebase debug mode during development

Common Pitfalls I Encountered

Forgetting to configure SHA-1 fingerprint for Android
Not enabling Google Sign-In in Firebase Console
Firebase rules too restrictive (or too open!)
Mixing promises with async/await

Resources That Saved My Life 🙏

Conclusion

Building FireApp was challenging but incredibly rewarding. React Native with Firebase is a powerful combination for creating cross-platform mobile apps. Remember, every expert was once a beginner. Keep coding, keep failing, and most importantly, keep learning!

Go build something amazing! 🚀

P.S.: If you're stuck somewhere, DM me on LinkedIn or check out my GitHub for the complete source code!

#ReactNative #Firebase #MobileDevelopment #Authentication #CRUD #IndianDevelopers