V0 by Vercel is solid for generating React components, but what if you need more than just frontend UI?

Look, V0 does one thing really well - it takes your text prompts and spits out clean React components with Tailwind CSS. Perfect if you're building in the Vercel ecosystem and just need UI pieces.

But here's what V0 can't do(as of now):

• Build full applications with backend logic

• Work outside the React/Next.js world

• Handle databases, authentication, or server-side code

• Generate mobile apps or desktop applications

That's where these 11 alternatives come in. Some do everything V0 does but better. Others go way beyond UI generation to build complete applications.

What you'll find in this guide:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• Real user experiences and honest reviews

• Tools that actually build full apps (not just UI)

• Alternatives for different tech stacks and use cases

• Pricing breakdowns and when each tool makes sense

Whether you're stuck in V0's limitations or just want something more powerful, let's find your perfect alternative.

Also read:

• 14 Best WordPress Alternatives in 2025 (Top Picks)

• Best Website Builders for SEO in 2025: Top 15 Platforms Compared

• Top 15 Website Builders for Agencies in 2025 | Expert Comparison & Reviews

11 Best V0 Alternatives in 2025 (Real User Reviews)

V0 by Vercel is solid for generating React components, but what if you need more than just frontend UI?

Look, V0 does one thing really well - it takes your text prompts and spits out clean React components with Tailwind CSS. Perfect if you're building in the Vercel ecosystem and just need UI pieces.

But here's what V0 can't do:

• Build full applications with backend logic

• Work outside the React/Next.js world

• Handle databases, authentication, or server-side code

• Generate mobile apps or desktop applications

That's where these 11 alternatives come in. Some do everything V0 does but better. Others go way beyond UI generation to build complete applications.

What you'll find in this guide:

• Real user experiences and honest reviews

• Tools that actually build full apps (not just UI)

• Alternatives for different tech stacks and use cases

• Pricing breakdowns and when each tool makes sense

Whether you're stuck in V0's limitations or just want something more powerful, let's find your perfect alternative.

0. Comarketer.dev

![](https://comarketer-cms.vercel.app//api/media/file/image5-3.png align="left")

What it is: AI-powered website builder with chat-based interface that generates professional, SEO-optimized websites. Combines prompt-based creation with visual editing and code access for maximum flexibility.

Pros:

• Generates complete websites from simple prompts in seconds

• Chat interface feels natural - like talking to a web designer

• Visual editor for non-technical users + full code editor for developers

• Built-in SEO analysis and optimization (auto-generates sitemap.xml, robots.txt)

• One-click Vercel deployment with free custom domain hosting

• Payload CMS integration for dynamic content management

• Mobile-responsive designs out of the box

• Pay-as-you-use model - no subscription traps

Cons:

• Limited to website building (no full-stack apps like V0)

• Not designed for complex web applications or internal tools

• Smaller community compared to established builders

• Credits-based system might not suit heavy users

• Less suitable for developers wanting complete code control from scratch

Pricing:

• Free: 20 credits (builds ~2 complete websites)

• Pay-as-you-go: $15 for 100 credits

• No monthly subscriptions or hidden fees

Reality check: Transparent pricing with no token surprises. Two professional websites for free, then predictable costs.

Best for:

• Founders and agencies needing professional business websites fast

• Marketing-focused sites that need to rank in search

• Teams wanting AI speed without sacrificing customization

• Users who prefer chat-based editing over drag-and-drop

• Projects requiring both visual editing and code access

1. Bolt.new

![](https://comarketer-cms.vercel.app//api/media/file/image2-3.png align="left")

What it is: Browser-based AI that builds full-stack React apps with backends using Claude 3.5 Sonnet. No local setup needed - everything runs in WebContainers.

Pros:

• Builds complete apps (frontend + backend + database) from simple prompts

• Supports React, Next.js, Vue, and Svelte with npm packages

• One-click deployment to Netlify

• Great for rapid prototyping and demos

• Works entirely in the browser

Cons:

• Token consumption is insane - users burned 20M tokens fixing single auth issues

• Rewrites entire files instead of targeted fixes, breaking working code

• Projects break after 1,000 lines of code - AI starts hallucinating

• Code mysteriously disappears during builds

• Poor debugging - can't make incremental fixes

Pricing:

• Free: 1M tokens/month (burns through fast)

• Pro: $25/month (10M tokens)

• Teams: $30/month (10M tokens/member)

• Enterprise: Custom. 

Reality check: Complex projects eat 200k+ tokens per prompt, hitting $1,000+ monthly costs

Best for:

• Quick landing pages and demos

• Learning new frameworks

• Proof-of-concepts under 1,000 lines

• Non-developers building simple apps

2. Lovable

![](https://comarketer-cms.vercel.app//api/media/file/image14-2.png align="left")

What it is: Chat-based AI that builds full-stack apps with Supabase integration, GitHub sync, and one-click deployment. Claims 20x faster development.

Pros:

• Simple chat interface - describe app ideas in plain English

• Generates frontend + backend + database automatically

• Seamless Supabase integration for real-time features

• Direct GitHub integration with version control

• You own the generated code completely

• Message-based pricing instead of confusing tokens

Cons:

• Can't edit code directly in the platform - stuck with AI suggestions

• Limited to 5 messages daily on the free plan

• Complex apps still require technical knowledge to prompt effectively

• Backend generation sometimes creates overcomplicated architectures

• Real-time collaboration is still in beta

Pricing:

• Free: 5 messages/day, 30/month max

• Pro: $20/month (200 messages + GitHub sync)

• Business: $50/month (unlimited messages + team features)

Best for:

• Non-technical founders building MVPs

• Startup teams needing quick prototypes

• Apps requiring Supabase backend features

• Teams that prefer chat over code editing

3. UI Bakery

![](https://comarketer-cms.vercel.app//api/media/file/image10-2.png align="left")

What it is: Low-code platform focused on internal business tools with AI assistance. Built for connecting databases and creating admin panels, dashboards, and CRUD apps.

Pros:

• Excellent database connectivity (PostgreSQL, MySQL, MongoDB, Google Sheets, Airtable)

• 75+ pre-built components for business apps

• Strong security and compliance features

• Visual drag-and-drop interface with custom JavaScript support

• Great customer support - users consistently praise responsiveness

• Self-hosted options available

Cons:

• Requires some technical knowledge - not truly no-code

• Learning curve for complex app building

• AI features are limited compared to full AI builders

• Pricing gets expensive for larger teams

• More suited for internal tools than consumer apps

Pricing:

• Free: Unlimited apps, basic features

• Standard: ~$10/month (10 apps, unlimited data sources)

• Business: ~$25/month (unlimited apps + collaboration)

• Enterprise: Custom pricing

Best for:

• Internal business tools and admin panels

• Companies with existing databases

• Teams building CRUD applications

• Organizations requiring compliance and security

4. Cursor

![](https://comarketer-cms.vercel.app//api/media/file/image7-3.png align="left")

What it is: AI-powered VS Code fork with Claude 3.5 Sonnet, GPT-4, and other models built directly into the editor. Acts as an AI coding partner.

Pros:

• Familiar VS Code interface with powerful AI integration

• Multi-file code generation with Composer mode

• Smart context awareness through codebase indexing

• .cursor rules for project-specific AI behavior

• Tab completion that's faster and smarter than Copilot

• Works with existing VS Code extensions

Cons: The interface can get cluttered with AI buttons and popups

• AI suggestions range from brilliant to completely wrong

• Recent updates caused crashes and performance issues

• Customer support is reportedly slow or non-existent

• Usage limits on "fast" vs ."slow" requests create confusion

Pricing:

• Free: 200 completions, 50 fast requests with GPT-4

• Pro: $20/month (unlimited completions, 500 fast requests)

• Business: $40/month (centralized billing, admin controls)

• Ultra: $200/month

Best for:

• Developers already using VS Code

• Complex refactoring across multiple files

• Teams wanting AI assistance without changing workflows

• Projects requiring precise context control

5. Replit

![](https://comarketer-cms.vercel.app//api/media/file/image15-3.png align="left")

What it is: Cloud IDE with Replit Agent - an AI that builds complete apps from prompts. Everything runs in the browser with instant deployment.

Pros:

• Zero setup - code from any device with internet

• Agent builds complete apps from single prompts

• Supports 50+ programming languages

• Built-in collaboration and version control

• Instant deployment and sharing

• Great for learning and education

Cons:

• Agent pricing is confusing - charged per "checkpoint"

• Performance issues and reliability problems were reported

• Limited local development options

• Support team is unresponsive according to users

• Usage limits feel restrictive on paid plans

• The agent sometimes fails on complex requests

Pricing:

• Free: Basic features, limited AI usage

• Core: $20/month ($25 credits included, unlimited private repos)

• Teams: $35/month per user ($40 credits included, enhanced security, team features)

Pay as you go for more AI credits for agents. 

Best for:

• Students and coding beginners

• Quick prototypes and demos

• Collaborative coding projects

• Developers who can't install local tools

6. Windsurf

![](https://comarketer-cms.vercel.app//api/media/file/image6-3.png align="left")

What it is: AI-native IDE by Codeium with "Cascade" agent that automatically understands context and runs commands. Built on VS Code with a cleaner interface.

Pros:

• Completely free for individual use (no usage limits)

• Cascade agent works like Cursor's Composer, but launched first

• Cleaner, more intuitive UI than Cursor

• Writes code changes to disk before approval

• Strong privacy focus - no training on user data

• Multiple AI models available (Claude, GPT-4, etc.)

Cons:

• Cascade feature can be unreliable - sometimes fails to write files

• Less mature ecosystem compared to Cursor

• Some users report connection issues and bugs

• Limited documentation for advanced features

• The recent acquisition by OpenAI ($3B)is  creating uncertainty

Pricing:

• Individual: Completely free forever

• Pro: $15/month per seat

• Teams: $30/user/month

• Enterprise: Custom pricing

Best for:

• Developers wanting free AI coding assistance

• Teams on tight budgets

• Users preferring simpler, cleaner interfaces

• Privacy-conscious developers

7. Magic Patterns

![](https://comarketer-cms.vercel.app//api/media/file/image12-3.png align="left")

What it is: AI-powered UI design tool for product teams that generates React/Figma components from text prompts, with design system integration and team collaboration.

Pros:

• Generates production-ready React code and Figma exports

• Integrates with existing design systems perfectly

• Real-time multiplayer collaboration on an infinite canvas

• Chrome extension captures UI from any website

• Strong focus on matching existing brand guidelines

• Y Combinator backed with 100k+ components generated

Cons:

• Works best for smaller components, not full applications

• Limited to UI generation - no backend capabilities

• Still a relatively new platform (launched in 2023)

• Pricing not transparent - requires contacting sales

• More focused on design iteration than app building

Pricing:

• Free: Basic features for individuals

• Hobby: $19/month (team collaboration, unlimited exports)

• Pro: $75/month (3.5x limits and more features)

• Enterprise: Custom pricing for large teams

Best for:

• Product teams iterating on UI designs

• Designers working with existing design systems

• Teams needing rapid component prototyping

• Companies wanting branded, consistent UI elements

8. Builder.io

![](https://comarketer-cms.vercel.app//api/media/file/image1-3.png align="left")

What it is: Visual development platform with AI-powered design-to-code capabilities, drag-and-drop CMS, and enterprise features. Converts Figma designs to production code.

Pros:

• AI converts Figma designs to clean React/Vue/Angular code

• Visual CMS lets non-developers build pages independently

• Integrates with existing codebases and design systems

• Built-in A/B testing and personalization features

• Enterprise-grade with SSO, custom roles, and premium support

• Works with any framework or backend

Cons:

• Steeper learning curve than pure no-code tools

• It can be expensive for smaller teams

• Visual editor crashes reported by some users

• Requires developer setup for advanced integrations

• More complex than simple AI builders

Pricing:

• Free: 1 space, basic features, 10k visual views

• Growth: $24/user/month (500 agent credits, team features)

• Enterprise: Custom pricing (unlimited everything)

Has Pay-as-you-go for more usage

Best for:

• Enterprise teams with existing codebases

• Marketing teams need developer independence

• Companies with complex design systems

• Teams wanting visual editing with code control

9. a0.dev

![](https://comarketer-cms.vercel.app//api/media/file/image3-3.png align="left")

What it is: Y Combinator-backed AI platform that builds complete React Native mobile apps from text descriptions, with instant iOS builds and App Store deployment.

Pros:

• Generates full React Native apps for iOS/Android

• Instant iOS build process (seconds from code to installable app)

• One-click App Store submission with Apple provisioning handled

• Includes backend logic, payments, and monetization features

• AI agent handles debugging and app optimization

• Built by experienced app developers (7 years of mobile experience)

Cons:

• Very new platform (YC W25 batch)

• Limited track record and user reviews

• Mobile-only focus (no web apps)

• Pricing structure not fully clear

• AI-generated apps may need manual refinement

• App Store approval still depends on Apple's policies

Pricing:

• Free: Basic plan for hobby projects (1 app build)

• Starter: $19/month (10-50x higher limits, unlimited builds, payments)

• Production: $99/mo ( Higher priority builds, 2 build concurrencies, and updates for up to 50,000 MAUs)

• Enterprise: Custom pricing for scale

Best for:

• Entrepreneurs wanting to launch mobile apps quickly

• Developers focused on mobile-first products

• Teams needing React Native expertise without a learning curve

• Startups wanting to test mobile app ideas fast

Which V0 Alternative Should You Choose?

For Full-Stack Apps: Bolt.new or Lovable if you need complete applications with backends.

For Enterprise Teams: Builder.io or UI Bakery for existing codebases and team collaboration

For Mobile Apps: a0.dev for React Native or Replit for cross-platform development

For Coding Assistance: Cursor for VS Code users or Windsurf for free AI coding help

For UI Design: Magic Patterns for design systems or ReactAI for simple React components

For Marketing Sites: Comarketer for SEO-focused landing pages

The truth is, no single tool replaces V0 perfectly. Each excels in different areas. Choose based on your specific needs: full-stack development, mobile apps, enterprise requirements, or simple UI generation.

Bottom line: V0 is great for React component generation, but these alternatives offer more specialized solutions for specific use cases. Try a few to see what fits your workflow best.

What next? 

Now that you know the 11 best V0 alternatives, here's your action plan:

1. Pick 2-3 tools that match your specific needs from the list above

2. Start with free trials - Most tools offer free tiers or trial periods

3. Test with your actual project - Don't just play around, use it for real work

4. Compare the results - Which one saves you the most time? Which fits your workflow?

5. Consider the costs - Factor in pricing as your usage scales

Remember, the best tool is the one you'll actually use consistently. Don't get caught up in feature lists - focus on what solves your specific problems.

Thanks for reading!

Go grab those free trials and see what works for your exact use case. Each tool has its strengths, so test them with your real projects to find your perfect match.

The AI development space moves fast, so bookmark this guide and check back for updates. 

Good luck building!

But the problem is that there are so many AI-powered tools coming out that deciding which ones to use and how to integrate them into your workflow might take a long time and be very frustrating.

This article is my personal selection from 8 AI developer tools that have recently caught my eye to speed up the development process, simplify the workflows, and increase the quality of the code.

These tools cover a wide range of functionalities, from AI reviews, bug fixes, code generation, and API monitoring to API testing, code snippet management, color palette creators, and more.

Every product is briefly described, and I’ve included its main functionalities and the direct links to be able to get a sense of which set of features might be what you are looking for.

Let's take a closer look - I really hope this selection will be useful to you in your new projects!

1. CodeRabbit – AI-powered code reviews and bug fixes

Coderabbit is an AI-powered code review assistant that automates code quality checks, security scans, and performance optimizations, providing real-time feedback in your pull requests.

It works as a smart coding partner that takes into account your coding virtues and, learning from them, makes new suggestions to help you write clean, safe, and efficient code in less time.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Some of the most awesome features include:

🐇 Instant AI-assisted code reviews: Automatically analyze pull requests using deep code understanding to detect bugs, security issues, and code errors before merging.

🤖 Conversational AI reviewer: Ask questions, get explanations, and receive practical suggestions for best practices just like collaborating with a smart team member.

🚀 Seamless integration: Supports various version control platforms such as GitHub, GitLab, Bitbucket, and it can also be integrated into IDEs and code editors like VS Code.

🔒 Privacy-first: No data retention and enterprise-grade encryption are some of the main security measures that contribute in keeping your code safe.

📊 Developer insights: It tracks user code metrics and provides analytics dashboards to improve the productivity and code quality over time.

Say goodbye to slow, manual code reviews and accelerate your workflow with CodeRabbit! Try it for free and experience how AI can boost your coding game starting today!

🌎 Website Link: https://www.coderabbit.ai

Thanks to the CodeRabbit team for sponsoring this article!

2. Bolt - Build full-stack web apps using AI prompts

Bolt is a co-pilot powered by AI that lets developers create, edit, and deploy web applications in no time by simply describing the desired output in the AI prompt with natural language.

Key features & why to use it:

• Creates full-stack web applications on the spot with simple language prompts.
• Browser-based IDE with the functionality of live code editing and testing environment.
• There is a built-in one-click deployment for fast app sharing.

🌎 Website Link: https://bolt.new/

3. Trae - Manage software lifecycle & releases

Trae is an AI-powered development orchestration tool, which takes the burden of manual work off the developers and executes automated, error-free software releases.

Key features & why to use it:

• Intelligent scheduling enables the automation of release workflows.
• Detailed tracking and monitoring statistics of deployments for analytics.
• Support for popular CI/CD tools and platforms for extra features and productivity.

🌎 Website Link: https://www.trae.ai/

4. Treblle - Monitor API performance & analytics

Treblle offers continuous API monitoring service that is supported by AI insights, thus saving the developer's time making him/her able to focus on the API's optimization and efficiency.

Key features & why to use it:

• Continuous API usage monitoring and error recording to improve performance.
• Detection of irregular activities in the API plus reporting is carried out by AI tools.
• Wide range of API frameworks allows for further integration and features.

🌎 Website Link: https://treblle.com

5. CodeSnippets - Create & access reusable code snippets

CodeSnippets is an artificial intelligence-powered platform that enables developers to create, debug, and manage reusable code snippets, giving them more time to focus on app logic.

Key features & why to use it:

• AI-assisted code snippet generation and debugging directly within Visual Studio Code.
• Comes with secure snippet library with quick search and sharing capabilities.
• Supports multiple AI models and integrates seamlessly into developer workflows.

🌎 Website Link: https://codesnippets.ai

6. HTTPie - Simplify REST, GraphQL & HTTP testing

HTTPie is a human-friendly command-line and GUI client designed for testing, debugging, and interacting with APIs and HTTP servers efficiently with expressive syntax.

Key features & why to use it:

• Intuitive, natural syntax with formatted and colorized output.
• Supports JSON, forms, file uploads, authentication, proxies, and custom headers.
• Cross-platform support with plugins for extended functionality.

🌎 Website Link: https://httpie.io

7. Taipy - Build complex data-driven applications

Taipy allows developers to build engaging data-driven web applications and dashboards with simplified tools for both front-end and back-end which are intuitive even without web design knowledge.

Key features & why to use it:

• Python API for creating the GUI pages and dashboards to fit the users needs and preferences.
• Scenario and pipeline management for backend workflows and dataflows.
• Capable of large datasets, real-time updates, and multiple user environments.

🌎 Website Link: https://taipy.io/

8. Super Color Palette - Generate custom color palettes

Super Color Palette is an online tool by which users can create, edit and export various multi-color palettes just by changing the hue, saturation, lightness, and other properties of each shade.

Key features & why to use it:

• Generate palettes with different color harmony modes and modify the properties of the entire palette.
• Users are able to check color contrasts with WCAG compliance accessibility metrics.
• Download palettes in different file types and save palettes for simple management.

🌎 Website Link: https://supercolorpalette.com/

Did you like the resources? Here is more 👇

Join 6,000+ others to receive the best DEV resources, tools, productivity tips, and career growth advice I discover by subscribing to my newsletter!

Also, connect with me on Twitter, LinkedIn, and GitHub!

Writing has always been my passion, and it gives me pleasure to help and inspire people. If you want to get featured or partner up, feel free to get in touch!

You can check your Kubernetes cluster's health in under 5 minutes using five key commands: checking node status, monitoring resource usage, reviewing pod health across namespaces, investigating problem pods, and examining cluster events. This quick routine helps catch issues before they escalate into critical problems.

Kubernetes is great until it's not. One bad node, a pod stuck in CrashLoopBackOff, or a resource spike can ruin your day. The good news? You don't need to spend an hour digging through dashboards to spot trouble early. With a few quick commands, you can get a solid read on your cluster's health in under 5 minutes.

Here's how to do it effectively.

Make Sure Your Nodes Are Happy

Start by checking the overall status of your cluster nodes. This gives you the foundation-level health of your infrastructure.

kubectl get nodes -o wide

This command displays all nodes in your cluster along with their detailed information. You'll see each node's status, roles, age, version, internal and external IPs, OS image, kernel version, and container runtime.

What you want to see:

• STATUS should be Ready for all nodes
• No mystery nodes suddenly showing up in your cluster
• Roles, IPs, and ages that make sense for your environment

If you spot NotReady, that's your cue to dig deeper. A node in this state might be experiencing network issues, resource exhaustion, or kubelet problems.

Check Resource Usage at a Glance

Next, get a quick overview of resource consumption across your nodes to identify potential bottlenecks.

kubectl top nodes

This command shows CPU and memory usage for each node in your cluster. It provides both absolute values and percentages, making it easy to spot resource pressure.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Keep an eye out for:

• CPU or memory regularly above 80% on any node
• One node doing all the heavy lifting while others are barely working
• Sudden spikes that don't match your expected workload patterns

No metrics-server running? Install it with this command:

kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml

The metrics-server is essential for resource monitoring and is required for horizontal pod autoscaling to work properly.

Look at All Pods Across All Namespaces

Get a bird's-eye view of all pods running in your cluster to quickly identify any that are misbehaving.

kubectl get pods --all-namespaces

This command lists every pod across all namespaces, showing their current status, restart count, and age. It's like taking the pulse of your entire application ecosystem.

Healthy pods should be Running or Completed. If you see states like CrashLoopBackOff, ImagePullBackOff, Pending, or Error, note the namespace and pod name for further investigation.

Also watch the RESTARTS column closely. If a pod has restarted a dozen times in the last hour, something's definitely off. Frequent restarts often indicate:

• Application crashes due to bugs or configuration issues
• Failing health checks (readiness or liveness probes)
• Resource limits being exceeded
• Dependencies being unavailable

Zoom In on Problem Pods

When you spot problematic pods, dig deeper to understand what's causing the issues.

kubectl describe pod <pod-name> -n <namespace>

Replace <pod-name> and <namespace> with the actual values from your problem pods. This command provides detailed information about the pod's configuration, current state, and recent events.

Check for these common issues:

• Events at the bottom (often the smoking gun that reveals the root cause)
• Failing readiness or liveness probes that prevent the pod from receiving traffic
• Image pull errors indicating registry access problems or incorrect image names
• Resource limit issues where the pod exceeds its memory or CPU constraints

The events section is particularly valuable because it shows a chronological history of what happened to the pod, including scheduling decisions, volume mounts, and error conditions.

Check the Cluster's Event Log

Get insight into what's been happening across your entire cluster by examining recent events.

kubectl get events --sort-by=.metadata.creationTimestamp

This command shows cluster-wide events sorted by when they occurred, giving you a timeline of recent activity. Events provide context about system-level operations and can reveal patterns or issues that affect multiple components.

Events will tell you what's been happening behind the scenes:

• Failed volume mounts that prevent pods from starting
• DNS resolution errors affecting service communication
• Scheduling issues when pods can't be placed on nodes
• Node pressure warnings indicating resource constraints

Try k9s for a Better View

If you want something more interactive than command-line tools, give k9s a try. It's a terminal-based UI for Kubernetes that provides real-time cluster information in an intuitive interface.

k9s lets you browse resources, view logs, and drill into problems without typing long commands. You can navigate between different resource types using simple keystrokes, filter resources, and even perform actions like scaling deployments or deleting pods.

Once you try k9s, it's hard to go back to plain kubectl for exploratory tasks. It's particularly useful when you need to quickly jump between different namespaces or resource types during troubleshooting.

Five minutes a day is all it takes to stay ahead of most cluster problems. Make this health check part of your daily routine and you'll catch issues before they blow up and before your pager goes off at 3 a.m. Regular monitoring helps you understand your cluster's normal behavior, making it easier to spot anomalies when they occur.

Unifying Livewire

Caleb takes the stage to address one of the most pressing issues in the Livewire's ecosystem: fragmentation. With three different ways to create Livewire components (traditional, Volt functional, and Volt class-based), the community had become divided, and newcomers were left confused about the "right" way to build components.

"The whole community, it's forked," Porzio admitted. "There's three different ways to make a livewire component... This is not good for newcomers, it's not good for old-timers, and everybody's guessing what's the best way."

His solution? A fourth way that unifies everything.

The New Default: Single-File Components

In Livewire 4, running php artisan make:livewire counter creates a single-file, class-based component by default. This isn't Volt anymore—it's just Livewire, powered by a custom parser.

<?php

use Livewire\Component;

new class extends Component {
    public $count = 1;
    
    public function increment()
    {
        $this->count++;
    }
    
    public function decrement()
    {
        $this->count--;
    }
}; ?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

<script>
this.watch('count', (value) => {
    console.log('Count changed to', value);
});
</script>

What's New in Single-File Components

Native JavaScript Integration: No more @script directive needed. Just add a <script> tag at the bottom of your file, and use this. instead of $wire:

<script>
this.watch('count', (value) => {
    console.log('Count changed to', value);
});
</script>

Interceptors: Hook into any part of the request lifecycle:

this.intercept('increment', ({ proceed, cancel }) => {
    if (confirm('Are you sure?')) {
        proceed();
    } else {
        cancel();
    }
});

Multi-File Components: The Best of Both Worlds

Not everyone loves single-file components, and Porzio gets it. When you run make:livewire on an existing component, you get this option:

php artisan make:livewire counter --mfc

This creates a multi-file component (MFC) structure:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

⚡ counter/
├── counter.php
├── counter.blade.php
└── counter.js

The PHP file is pure PHP (an anonymous class), the Blade file is pure Blade, and the JavaScript file is served as an ES6 module with automatic code-splitting and caching.

New Project Structure Opinions

Livewire 4 introduces opinionated folder structures to reduce decision fatigue:

• resources/views/components/ - All your components (Blade and Livewire)
• resources/views/pages/ - Page-level components
• resources/views/layouts/ - Layout components

These directories are automatically namespaced, making component organization cleaner and more predictable.

File Naming: The Lightning Bolt Controversy

Here's where things get interesting (and controversial). Porzio introduced the lightning bolt emoji (⚡) as a file prefix for Livewire components:

⚡counter.livewire.php

While admitting he might be the only one who likes it, Porzio argued that Unicode emojis work across all file systems and provide instant visual recognition. The precedent exists in other frameworks (SvelteKit, Next.js) and even programming languages like Mojo.

"When did we stop having fun?" Porzio asked. "We're all gonna be out of jobs anyway... Let's have fun on our way out with emojis."

Leveraging PHP 8.4's Property Hooks

One of the most exciting features in Livewire 4 is deep integration with PHP 8.4's new property hooks:

Validation with Setters

public int $count {
    set => max(1, $value);
}

This automatically prevents the count from going below 1, eliminating the need for updating hooks in many cases.

Computed Properties with Getters

public int $multiple {
    get => $this->count * 5;
}

Access it in your template like any other property:

<div>Count: {{ $count }}, Times 5: {{ $multiple }}</div>

Advanced Caching with Property Hooks

You can even implement caching directly in property hooks:

public string $expensiveData {
    get => cache()->remember("data-{$this->id}", 3600, fn() => $this->fetchExpensiveData());
    set => cache()->put("data-{$this->id}", $value, 3600);
}

Asymmetric Visibility

PHP 8.4 also supports asymmetric property visibility:

public private(set) string $readOnlyProperty;

This replaces Livewire's #[Locked] attribute with native PHP functionality.

Enhanced Loading States

Livewire 4 automatically adds data-loading attributes to any element that triggers a network request:

<button wire:click="save" class="data-[loading]:opacity-50">
    Save
</button>

<div class="data-[loading]:block hidden">
    <span>Loading...</span>
</div>

This integrates beautifully with Tailwind CSS 4's data attribute selectors.

The Long-Awaited Slots Feature

After years of requests, Livewire 4 finally supports slots:

<livewire:modal>
    <form wire:submit="save">
        <input wire:model="title" />
        <button type="submit">Save</button>
    </form>
</livewire:modal>

The modal component works exactly like Blade components:

<!-- modal.blade.php -->
<div class="modal">
    {{ $slot }}
</div>

Component Refs for Communication

Along with slots comes a new wire:ref system for parent-child communication:

<livewire:modal wire:ref="modal">
    <form wire:submit="save">
        <!-- form content -->
    </form>
</livewire:modal>

public function save()
{
    // Save logic...
    $this->dispatch('close')->to(ref: 'modal');
}

This eliminates the need for complex event broadcasting patterns when you need direct parent-child communication.

Ok, so far we covered the new rendering engine and pulling capabilities. Next, let's dive into the performance optimizations.

The Performance Problem: When Components Become Bottlenecks

Before diving into solutions, Caleb demonstrated a critical performance issue that many Laravel developers face but rarely measure. Using a simple benchmark, he showed how Blade components can become surprising bottlenecks:

// Simple benchmark: 25,000 Blade components in a loop
$start = microtime(true);
for ($i = 0; $i < 25000; $i++) {
    // Render a simple Blade component
}
$end = microtime(true);
echo ($end - $start) * 1000 . " milliseconds";

The shocking results:

• First run (compilation): 508 milliseconds
• Second run (cached): 274 milliseconds
• Pure PHP require: 26 milliseconds
• Plain div + echo: 21 milliseconds

This revealed that even cached Blade components carry significant overhead - about 10x slower than plain PHP.

Blaze - The Blade Compiler Revolution

What is Blaze?

Blaze is a revolutionary Blade optimization layer that uses code folding to eliminate runtime overhead. Instead of aggressive caching (which creates cache management problems), Blaze analyzes your Blade templates at compile time and pre-renders static portions.

// Before Blaze - Complex compiled output with framework overhead
<?php $__env->startComponent('components.card'); ?>
    <?php $__env->slot('title'); ?>Product Name<?php $__env->endSlot(); ?>
    <div class="content"><?php echo e($product->description); ?></div>
<?php echo $__env->renderComponent(); ?>

// After Blaze - Clean, optimized output
<div class="card">
    <h3 class="card-title">Product Name</h3>
    <div class="content"><?php echo e($product->description); ?></div>
</div>

How Code Folding Works

Code folding identifies parts of your template that never change in production:

{{-- This Blade component --}}
<x-card class="bg-white shadow-lg">
    <x-slot:title>{{ $title }}</x-slot:title>
    <div class="p-4">
        {{ $content }}
    </div>
</x-card>

Blaze recognizes that the card structure, CSS classes, and HTML elements are static. Only the $title and $content variables are dynamic. It pre-renders the static parts at compile time.

Installation and Usage

composer require livewire/blaze

That's it! Blaze works transparently with your existing Blade templates. You can optionally opt-in with configuration, but the goal is zero-configuration optimization.

Performance Impact

Real-world results from the demo:

• Before Blaze: 29,000 views rendered in 1.6 seconds
• After Blaze: 100 views rendered in 131 milliseconds

That's more than a 10x performance improvement while maintaining the exact same developer experience.

Islands Architecture

The Problem with Monolithic Components

Traditional Livewire components re-render entirely on any update. Consider this dashboard:

class Dashboard extends Component 
{
    public function render()
    {
        return view('dashboard', [
            'analytics' => $this->getAnalytics(), // Fast query
            'revenue' => $this->getAccountRevenue(), // SLOW - 1 second query
            'reports' => $this->getReports(), // Fast query
        ]);
    }
    
    public function generateReport() 
    {
        // This action forces re-render of EVERYTHING
        // Including the slow revenue calculation
    }
}

Every action triggers the expensive getAccountRevenue() query, making the entire interface sluggish.

Islands: Surgical Component Isolation

Islands allow you to isolate expensive parts of your template:

<div class="dashboard">
    {{-- Fast section - always responsive --}}
    <div class="analytics">
        @foreach($analytics as $metric)
            <x-metric :value="$metric->value" :label="$metric->name" />
        @endforeach
    </div>
    
    {{-- Slow section - isolated on an island --}}
    @island
        <div class="revenue-chart">
            <x-chart :data="$this->accountRevenue" />
        </div>
    @endisland
    
    {{-- Fast section - always responsive --}}
    <div class="reports">
        <button wire:click="generateReport">Generate Report</button>
        <button wire:click="downloadReport">Download</button>
    </div>
</div>

Island Benefits

1. Isolation: Actions outside the island don't trigger island re-renders
2. Performance: Only the island content is processed for island-specific updates
3. Responsiveness: The rest of your interface stays snappy

Before Islands:

• Generate Report: 1+ second (re-renders everything including slow revenue)
• Download: 1+ second (same problem)

After Islands:

• Generate Report: Instant (skips the island)
• Download: Instant (skips the island)

Lazy Loading with Islands

Islands support lazy loading with elegant placeholder handling:

@island(lazy: true)
    @placeholder
        <x-revenue-placeholder />
    @endplaceholder
    
    <div class="revenue-section">
        <x-chart :data="$this->expensiveRevenueData" />
    </div>
@endisland

User Experience:

1. Page loads instantly with placeholder
2. Revenue section loads asynchronously
3. Smooth transition from skeleton to real data

Advanced Island Features

Named Islands with Remote Targeting

@island('reports')
    @foreach($reports as $report)
        <div class="report-item">{{ $report->title }}</div>
    @endforeach
@endisland

{{-- This button is outside the island but targets it --}}
<button wire:island="reports" wire:click="loadMoreReports">
    Load More
</button>

Flexible Rendering Modes

{{-- Default: Replace island content --}}
@island('reports')
    <!-- content -->
@endisland

{{-- Append mode: Add new content to existing --}}
<button wire:island="reports" wire:click="loadMore" wire:render="append">
    Load More
</button>

{{-- Prepend mode: Add content to the beginning --}}
<button wire:island="chat" wire:click="loadOlderMessages" wire:render="prepend">
    Load Older Messages
</button>

Infinite Scroll with Intersection Observer

The ultimate modern UX pattern:

@island('posts', render: 'append')
    @foreach($posts as $post)
        <article class="post">{{ $post->content }}</article>
    @endforeach
@endisland

{{-- Invisible trigger element --}}
<div wire:island="posts" 
     wire:intersect="$paginator.nextPage()"
     class="h-4">
</div>

This creates true infinite scroll:

• ✅ Only fetches new data when needed
• ✅ Only renders new content
• ✅ Preserves scroll position
• ✅ Minimal DOM manipulation
• ✅ Zero JavaScript required

Islands with Polling

Real-time updates for specific sections:

@island(poll: '5s')
    <div class="live-metrics">
        <span>Active Users: {{ $activeUsers }}</span>
        <span>Revenue Today: ${{ number_format($todayRevenue) }}</span>
    </div>
@endisland

Only the island polls - the rest of your page remains untouched.

Real-World Performance Results

The Complete Solution

Combining all three optimizations (new rendering engine + Blaze + Islands):

{{-- A complex dashboard that loads instantly and stays responsive --}}
<div class="dashboard">
    {{-- Fast sections with Blaze optimization --}}
    <x-metric-grid :metrics="$quickMetrics" />
    
    {{-- Expensive section isolated and lazy-loaded --}}
    @island('revenue', lazy: true)
        @placeholder
            <x-revenue-skeleton />
        @endplaceholder
        
        <x-revenue-chart :data="$expensiveRevenueData" />
    @endisland
    
    {{-- Interactive section with infinite scroll --}}
    @island('reports', render: 'append')
        @foreach($reports as $report)
            <x-report-card :report="$report" />
        @endforeach
    @endisland
    
    <div wire:island="reports" 
         wire:intersect="$paginator.nextPage()">
    </div>
</div>

Performance characteristics:

• Initial load: Instant (lazy islands + Blaze optimization)
• User interactions: Always responsive (isolated islands)
• Real-time updates: Surgical precision (targeted polling)
• Infinite scroll: Smooth and performant (append rendering)

Developer Experience: Simple Yet Powerful

The Philosophy

Livewire v4's performance features follow a key principle: maximum performance with minimal complexity.

{{-- This is all you need for infinite scroll --}}
@island('posts', render: 'append')
    @foreach($posts as $post)
        <x-post :post="$post" />
    @endforeach
@endisland

<div wire:island="posts" wire:intersect="$paginator.nextPage()"></div>

Compare this to traditional JavaScript approaches requiring:

• Complex state management
• Manual DOM manipulation
• Scroll position tracking
• Loading state handling
• Error boundary management

Learning Curve

The beauty of islands is in their composability. Learn the basic primitive:

@island
    <!-- expensive content -->
@endisland

Then combine with modifiers:

• lazy: true - Lazy loading
• poll: '5s' - Real-time updates
• render: 'append' - Additive rendering
• wire:intersect - Intersection triggers

Conclusion: A New Era for Laravel Frontend

Livewire v4 represents a massive leap forward for Laravel applications. For Laravel developers, this means you can build complex, interactive applications without sacrificing performance or developer experience. The era of choosing between "fast" and "feature-rich" is over.

1. 🎯 New Framework Features (Taylor Otwell)
2. 🚀 Open Source Deep Dive (Joe Tannenbaum)
3. 🤖 Laravel AI (Ashley Hindle)
4. 🎨 Laravel Design (David Hill)
5. 🌙 Nightwatch (Taylor Otwell)
6. ⚒ Forge 2.0 (James Brooks)
7. ☁️ Laravel Cloud (Joe Dixon)

Taylor kicked things off with welcoming everyone to Laracon and expressing how this eco-system has never felt stronger. After he spits some good vibes, he starts things off by talking about some new framework features.

🎯 New Framework Features

Attribute-Based Container Bindings

Remember trudging over to your AppServiceProvider to bind interfaces? Those days are numbered.

The Old Way:

$this->app->bind(PaymentProcessor::class, Stripe::class);

The New Way:

#[Bind(Stripe::class)]
interface PaymentProcessor
{
    // That's it. You're done.
}

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

But wait, there's more! Environment-specific bindings are here:

#[Bind(Stripe::class)]
#[Bind(FakeStripe::class, environments: ['local'])]
interface PaymentProcessor
{
    // Production gets real Stripe, local gets fake version
}

The attribute also supports #[Singleton] and #[Scoped] decorators for fine-grained instance management—especially useful for queued jobs and Octane applications.

Fluent URI Builder: URL Manipulation That Doesn't Suck

If you've ever tried to manually manipulate URL strings and wanted to throw your computer out the window, this one's for you.

Instead of string concatenation nightmares:

$uri = URI::for('https://laravel.com')
    ->withPath('/docs')
    ->withQuery(['version' => '11.x', 'page' => 'routing'])
    ->withoutQuery('page')  // Remove a query param
    ->withFragment('installation');

The real elegance? You can return these URI objects directly from routes:

Route::get('/redirect', function() {
    return URI::route('users.index')
        ->withQuery(['filter' => 'active']);
});

Laravel automatically generates redirects. The readability is chef's kiss perfect.

Cache Memoization: Fix Performance Without Thinking

Picture this: you're calling Cache::get('expensive-key') multiple times throughout a single request. Each call hits your cache store, even though you're asking for the same thing.

In Taylor's demo, a route that called the cache four times resulted in four actual cache queries. Not ideal.

The Solution:

// Instead of this
$value = Cache::get('expensive-key');

// Do this
$value = Cache::memoGet('expensive-key');

Laravel keeps the value in memory after the first retrieval. Subsequent calls return instantly without hitting the cache store.

The clever bit? If you Cache::put() a new value during the request, Laravel automatically updates the memoized version. No stale data, no manual cache busting.

🚀 Open Source Deep Dive

Joe took the stage to deliver some serious open source improvements that'll make your daily development life significantly better.

Broadcasting's JavaScript Makeover

The old php artisan install:broadcasting command got a complete overhaul. Instead of choosing a provider and figuring out the rest yourself, Laravel now asks for all required information upfront:

• Automatically writes correct ENV keys to your .env file
• Provides Vite configuration keys for JavaScript consumption
• Detects your frontend framework (Vue/React) and configures accordingly
• Installs appropriate Laravel Echo packages automatically

Goodbye Boilerplate, Hello Hooks

Remember this nightmare?

// Old way - lifecycle management hell
onMounted(() => {
  channel = Echo.channel('orders')
    .listen('OrderShipped', (e) => {
      // handle event
    });
});

onUnmounted(() => {
  Echo.leave('orders');
});

Now it's just this:

// New way - clean hooks
const { data } = useEcho({
  channel: 'orders',
  event: 'OrderShipped'
});

The hooks automatically handle mounting/unmounting, provide type safety, and come in flavors for public, private, presence, and model channels. Available for both Vue and React!

Streaming Made Simple

While Laravel's server-side streaming is already fantastic (10 lines of code!), consuming these streams on the JavaScript side was getting messy.

Enter stream hooks:

const { data, isStreaming, cancel, restart } = useStream('/api/chat');

These hooks automatically concatenate streaming data, provide connection state, handle cancellation, and parse JSON. All the complexity hidden behind one powerful hook.

Inertia Forms Revolution

Traditional Inertia forms require a lot of boilerplate with useForm().

The new Inertia Form component is a drop-in replacement for the HTML form tag:

<Form action="/login" method="post" v-slot="{ data, errors, processing }">
  <input name="email" />
  <input name="password" />
  <button :disabled="processing">Login</button>
</Form>

No more v-model bindings, no more form.something references everywhere. Just use name attributes and get form state through slot props. Launching in the next couple weeks.

Laravel Wayfinder: Type Safety Nirvana

Joe addressed the elephant in the room—the gap between PHP and TypeScript. The client needs to know what the server has defined, but it's often just educated guesses with magic strings.

Magic Strings Are Dead

Instead of writing post('/login', ...), Wayfinder automatically generates TypeScript definitions for your routes:

import { store } from './authenticated-session-controller'

The route becomes a beautifully typed object with method and URL properties. Change your PHP route from POST to PUT? It automatically reflects in your client-side code.

Inertia Gets a Type Safety Makeover

Wayfinder understands your entire Inertia setup:

• What props your components receive
• What shape your request data should be
• What your server expects when you submit forms

Change a server-side form request, and boom—TypeScript definitions update automatically. Add a required active boolean field to your PHP validation? Your frontend immediately shows a red squiggly line if you forget to include it.

Beyond Inertia: Standard HTTP Gets Love Too

Not using Inertia? Wayfinder works with standard fetch requests too. Your analytics endpoint expects specific page values? Wayfinder provides autocomplete for valid values based on your validation rules.

Laravel Ranger: The Engine Behind the Magic

Wayfinder is built on Laravel Ranger, a more general-purpose package that walks your Laravel app and discovers "interesting things"—models, enums, validation rules—and converts them into well-typed DTOs.

Want auto-generated JSON schemas that perfectly match your PHP models? Ranger's got you covered.

Timeline:

• Echo and streaming hooks: Available now
• Inertia form component: Coming in a couple weeks
• Wayfinder and Ranger: Public beta "very, very soon" with full release fall 2025

🤖 Laravel AI

Ashley Hindle introduced how Laravel is stepping into the world of AI. LLMs are decent at PHP and Laravel, but there are still gaps in day-to-day development assistance.

Laravel Boost: Your AI Coding Starter Kit

Meet Laravel Boost, a Composer package that transforms AI pair programming from "maybe helpful" to "actually useful."

Three Core Features That Matter

1. Laravel-Specific MCP Server Your AI agent gets real Laravel superpowers:

• Query your database directly
• Run code through Tinker
• Search documentation
• Understand your project structure

2. Version-Specific Documentation Laravel has vectorized the entire ecosystem documentation, but it's version-aware. Using Laravel 10 with Inertia 1.x? You get exact docs for that combination.

3. Laravel-Maintained AI Guidelines Boost automatically creates configuration files for Cursor, Juni, GitHub Copilot, and Claude with carefully curated, version-specific guidelines.

Installation: Simple as It Should Be

composer require laravel/boost --dev
php artisan boost:install

The interactive installer auto-detects your IDE setup, figures out which packages you're using, and discovers project-specific guidelines.

It automatically discovers guidelines based on your exact package versions—13 different guidelines in the demo, including Inertia V2, PHPUnit, Flux UI, and Tailwind 4.

Project-specific guidelines use Blade templating. Want to query the database in your guidelines? Go for it.

The Arsenal of Tools

The MCP server includes:

• List artisan commands
• Query the database
• Get absolute URLs from relative paths
• Search documentation
• Browser logs
• Application info

Before and After: Night and Day

Without Boost: AI creates functional code that would get rejected in code review.

With Boost: AI searches documentation, finds the correct approach, and implements it properly using the right components.

The search docs tool makes all the difference.

Best part? Laravel Boost launches free within two weeks of Laracon 2025.

🎨 Laravel Design

David Hill explained how Laravel's design team grew from one to six people in the past year. But they're not just making things pretty—they're data mining user feedback:

"We listen, we read, and we watch everything that you share... from your tweets to your support emails, your blog posts, your podcasts, your YouTube videos, and, yes, even the delightful Reddit posts."

This explains why Laravel products feel like they were built by people who actually use them.

🌙 Nightwatch Updates

Taylor announced immediate improvements:

New Pricing:

• Increased included events across all plans
• Additional events now cost 50 cents per 100,000 (significant reduction)

New Features (Available Today):

• Cache Insights Page: See cache hits, misses, and hit rates
• Slack Integration: Get exceptions pushed to Slack channels

And yes, Nightwatch Light Mode is here—properly rethought for accessibility, not just inverted colors.

⚒ Forge 2.0

James Brooks unveiled Forge 2.0—over a year in development. Built with Vue 3, TypeScript, and Inertia, featuring a new UI that mirrors Laravel Cloud while maintaining Forge's personality.

The new interface focuses on contextually relevant information: recent servers, sites, deployments, and activity feeds.

Laravel VPS: The Game Changer

Taylor announced Laravel VPS—purchase servers directly from Laravel through their DigitalOcean partnership. No more API keys, no complex setup. Just sign up for Forge and start creating servers. Taylor set a goal for sub-minute server provisioning. They demolished it—servers ready in 5-10 seconds. The live demo showed a fully operational server with database credentials ready almost instantly.

Plus, you get a free .onforge.com domain—no more sharing IP addresses or setting up DNS before showing clients a working URL.

Professional-Grade Features

Zero Downtime Deployments: Your deployment runs in a new release directory, gets fully prepared, then becomes active. No more crossing fingers during deployments.

Health Checks: After deployment, Forge automatically pings your site from multiple locations worldwide. If something's broken, you know immediately.

Heartbeat Monitoring: Create a heartbeat, get a URL, ping it when scheduled tasks complete. If Forge doesn't hear from your scheduler, you get notified.

Beyond Laravel: Nuxt.js Support

The demo showed a Nuxt.js application with full SSR support, signaling Forge's expansion beyond just Laravel applications.

The Terminal Integration That Changes Everything

Remember SSH key management, copying IP addresses, and the whole dance just to debug something? That's dead.

Control+Backtick drops you into a server terminal. That's it. Full auto-completion, PHP version checks, HTOP—a complete SSH session in your browser.

Site-level terminal access drops you right into that site's directory.

The collaboration features blew minds—see when team members start sessions and join them in real-time. Pair programming for server debugging.

Timeline: All Forge updates launch in 8 weeks.

☁️ Laravel Cloud

Joe Dixon showed how Laravel Cloud is reimagining modern PHP app hosting.

Starter Kits That Deploy Themselves

Pick Laravel, Livewire, Vue, or React. Pick your repo name and region. Boom:

• GitHub repo created
• Starter files pushed
• App deployed
• Auto-deploy setup complete

From idea to deployed app in under a minute.

Auto-Scaling That Actually Thinks

Set custom CPU and memory thresholds for granular scaling control.

It's like having a full-time DevOps engineer who doesn't sleep or mess up.

Managed Queue Clusters: The Horizon Alternative

Set rules like "If jobs wait more than 5 seconds, scale up." Cloud watches CPU, memory, queue length, throughput, job wait times, and worker activity—then auto-scales vertically or horizontally in real time.

The demo with 2,000 jobs showed real-time scaling with replica visualization.

WebSockets with One Click (Managed Reverb)

Spinning up WebSocket servers:

1. Click "Add Resource"
2. Select "WebSockets"
3. Choose connection limit
4. Click "Create"
5. Done

All Reverb environment variables auto-injected, CORS handled, each app gets isolated instances sharing server infrastructure.

Shipping Schedule

✅ Available Today:

• Production-ready MySQL
• Starter Kits with auto-deploy
• Auto-scaling threshold controls

🕒 Coming August 12:

• New Starter & Pro plan pricing
• Custom domains on every plan
• Smart queue clusters

🍂 Coming This Fall:

• Fully managed Reverb
• Laravel Valkey (open-source Redis alternative)
• Cloud API for DevOps automation
• Role-based access control
• Dedicated regions + enterprise compute

🎬 The Wrap-Up

Taylor closed with a statement that resonated through the entire auditorium:

"There is no full stack experience like this. There's just nothing even close to this."

And honestly? He's absolutely right. The combination of Laravel's developer experience, AI-powered tooling with Laravel Boost, and this level of deployment and testing automation through Laravel Cloud creates something genuinely unprecedented in web development.

We're not just watching Laravel evolve—we're watching the future of web development unfold before our eyes. From attribute-based bindings that eliminate boilerplate, to AI that actually understands your codebase, to infrastructure that scales itself while you sleep, Laravel continues to push the boundaries of what's possible.

The ecosystem has never been stronger, and if this keynote is any indication, we're just getting started. 🚀

Want to dive deeper into any of these features? Check out the official Laravel documentation and keep an eye on the release announcements. The future is here, and it's more exciting than we ever imagined.

Let's learn how to use Wayfinder with the Laravel React Starter Kit. First, create a new Laravel app using the following command:

laravel new wayfinder-blog --react

Then, cd into your project, execute composer run dev, and open the app in your code editor. We're ready to start wayfinding.

Post Migration

To test things out with Wayfinder, we'll need to create a Post model and a posts migration. We can do that by running:

php artisan make:model Post -mf

The -mf flag will also create a migration and a factory.

Here is what that migration should look like:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->unsignedInteger('user_id');
            $table->string('title');
            $table->text('body')->nullable();
            $table->string('image')->nullable();
            $table->string('slug')->unique();
            $table->string('excerpt')->nullable();
            $table->string('type')->default('post');
            $table->string('status')->default('DRAFT');
            $table->boolean('active')->default(1);
            $table->boolean('featured')->default(0);

            // SEO COLUMNS
            $table->string('meta_title')->nullable();
            $table->string('meta_description')->nullable();
            $table->text('meta_schema')->nullable();
            $table->text('meta_data')->nullable();

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

And the Factory should look like this:

<?php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'user_id' => User::first()->id,
            'title' => fake()->sentence(),
            'body' => fake()->paragraphs(4, true),
            'slug' => fake()->unique()->slug()
        ];
    }
}

Now that we have our migration and Factory, we need to run our migration:

php artisan migrate

Adding Posts

Inside our PostFactory, we have a foreign key, user_id that references the first user in our database. We need to add a user first before we can create posts. Let's run php artisan tinker and run the following:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

App\Models\User::factory()->create()

Next, we need to create some sample posts we can play with. Let's run php artisan tinker and run the following:

App\Models\Post::factory()->count(30)->create()

Create our PostController

Let's create a new controller for our posts. We can do that by running:

php artisan make:controller PostController

This will create a new controller in the app/Http/Controllers directory.

Let's add a few methods to our Controller:

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;

class PostController extends Controller
{
    public function index() : JsonResponse
    {
        return response()->json(Post::all());
    }

    public function show(Post $post) : JsonResponse
    {
        return response()->json($post);
    }
}

Add Post Routes

We need to specify the routes for our PostController. Add the following routes to your routes/web.php file:

// Post routes
Route::get('posts', [PostController::class, 'index'])->name('posts.index');
Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show');

Installing Wayfinder

Let's install Wayfinder by running:

composer require laravel/wayfinder

Then we need to generate our typescript definitions by running the following:

php artisan wayfinder:generate

Now, you'll see many new definitions if you go into your resources/js/actions directory. One of them will be at resources/js/actions/App/Http/Controllers/PostController.ts, which will look like the following:

import { queryParams, type QueryParams } from './../../../../wayfinder'

/** 
 * @see \App\Http\Controllers\PostController::index
 * @see app/Http/Controllers/PostController.php:11
 * @route /posts
 */
export const index = (options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: index.url(options),
    method: 'get',
})

index.definition = {
    methods: ['get',' head'],
    url: '\/posts',
}

/** 
 * @see \App\Http\Controllers\PostController::index
 * @see app/Http/Controllers/PostController.php:11
 * @route /posts
 */
index.url = (options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => {
    return index.definition.url + queryParams(options)
}

/** 
 * @see \App\Http\Controllers\PostController::index
 * @see app/Http/Controllers/PostController.php:11
 * @route /posts
 */
index.get = (options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: index.url(options),
    method: 'get',
})

/** 
 * @see \App\Http\Controllers\PostController::index
 * @see app/Http/Controllers/PostController.php:11
 * @route /posts
 */
index.head = (options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: index.url(options),
    method: 'head',
})

/** 
 * @see \App\Http\Controllers\PostController::show
 * @see app/Http/Controllers/PostController.php:16
 * @route /posts/{post}
 */
export const show = (args: { post: number | { id: number } } | [post: number | { id: number }] | number | { id: number }, options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: show.url(args, options),
    method: 'get',
})

show.definition = {
    methods: ['get',' head'],
    url: '\/posts\/{post}',
}

/** 
 * @see \App\Http\Controllers\PostController::show
 * @see app/Http/Controllers/PostController.php:16
 * @route /posts/{post}
 */
show.url = (args: { post: number | { id: number } } | [post: number | { id: number }] | number | { id: number }, options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => {
    if (typeof args === 'string' || typeof args === 'number') {
        args = { post: args }
    }

    if (typeof args === 'object' && !Array.isArray(args) && 'id' in args) {
        args = { post: args.id }
    }

    if (Array.isArray(args)) {
        args = {
            post: args[0],
        }
    }

    const parsedArgs = {
        post: typeof args.post === 'object'
            ? args.post.id
            : args.post,
    }

    return show.definition.url
            .replace('{post}', parsedArgs.post.toString())
            .replace(/\/+$/, '') + queryParams(options)
}

/** 
 * @see \App\Http\Controllers\PostController::show
 * @see app/Http/Controllers/PostController.php:16
 * @route /posts/{post}
 */
show.get = (args: { post: number | { id: number } } | [post: number | { id: number }] | number | { id: number }, options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: show.url(args, options),
    method: 'get',
})

/** 
 * @see \App\Http\Controllers\PostController::show
 * @see app/Http/Controllers/PostController.php:16
 * @route /posts/{post}
 */
show.head = (args: { post: number | { id: number } } | [post: number | { id: number }] | number | { id: number }, options?: { query?: QueryParams, mergeQuery?: QueryParams }, ) => ({
    url: show.url(args, options),
    method: 'head',
})

const PostController = { index, show }

export default PostController

Using our new definitions

We can now refer to this PostController by importing it into any page. Let's open up our resources/js/pages/dashboard.ts page and add the following:

import { show } from "@/actions/App/Http/Controllers/PostController";

export default function Dashboard() {
    console.log(show(1));
    return (
        ...
        ...

If you visit your dashboard page now, you should see the following console output:

{
    url: '/posts/1', 
    method: 'get'
}

This will define how we can get a post from our show method inside our PostController. If we ever decide to change a route in our application, for instance, if we were to change the following:

Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show');

To be singular post/ instead of posts/:

Route::get('post/{post}', [PostController::class, 'show'])->name('posts.show');

We don't have to do anything in our application except run the php artisan wayfinder:generate again. Wayfinder will automatically update the definitions for us.

Forms with Wayfinder

If you are using a traditional form to submit data, Wayfinder can make your life a lot easier and allow you to destructure the action and method for your form, like the following:

<form {...store.form()} className="space-y-4">

Let's cover an example of how we can use this. First, we'll need to add a new route to our routes/web.php file:

// create a post route to create new posts
Route::post('post', [PostController::class, 'store'])->name('posts.store');

We will also need to create the store() method inside our PostController. Add the following to your PostController.php file:

public function store(Request $request) : JsonResponse
{
    $post = Post::create($request->all());
    return response()->json($post);
}

You will obviously want to validate the input for the new post, but we will keep it simple for this example. Next, we want to regenerate our typescript definitions, but this time, we want to specify that we also want to include form variants:

php artisan wayfinder:generate --with-form

Now, we can call store.form() to get the form action and method. Here is an example of the full dashboard.tsx with the form:

import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, useForm, usePage } from '@inertiajs/react';
import { store } from "@/actions/App/Http/Controllers/PostController";

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
];

export default function Dashboard() {
    const props = usePage().props;
    const { data, setData, processing, errors, reset } = useForm({ user_id: 1,  title: '', body: '', slug: '' });
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title= "Dashboard"/>
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                <h2 className="text-2xl font-bold mb-4">Create New Post</h2>
                
                <form {...store.form()} className="space-y-4">
                    <input type="hidden" name="user_id" value={data.user_id} />
                    <input type="hidden" name="_token" value={props.csrf_token} />
                    
                    <div className="space-y-2">
                        <input 
                            placeholder= "Title"
                            name= "title"
                            value={data.title}
                            onChange={e => setData('title', e.target.value)}
                            className="w-full p-2 border rounded-md"
                            required
                        />
                        {errors.title && <div className="text-red-500">{errors.title}</div>}
                    </div>
                    
                    <div className="space-y-2">
                        <textarea 
                            placeholder= "Body"
                            name= "body"
                            value={data.body}
                            onChange={e => setData('body', e.target.value)}
                            className="w-full p-2 border rounded-md h-32"
                            required
                        />
                        {errors.body && <div className="text-red-500">{errors.body}</div>}
                    </div>
                    
                    <div className="space-y-2">
                        <input 
                            placeholder= "Slug"
                            name= "slug"
                            value={data.slug}
                            onChange={e => setData('slug', e.target.value)}
                            className="w-full p-2 border rounded-md"
                            required
                        />
                        {errors.slug && <div className="text-red-500">{errors.slug}</div>}
                    </div>
                    
                    <button 
                        type= "submit"
                        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
                        disabled={processing}
                    >
                        {processing ? 'Creating...': 'Create Post'}
                    </button>
                </form>
            </div>
        </AppLayout>
    );
}

Quick tip: We needed the csrf_token for our form, so you will need to add the csrf_token() to the HandleInertiaRequests middleware to make it available via usePage().props

If you visit the /dashboard page, you'll see a simple Post form that allows you to create a new post.

Conclusion

Laravel Wayfinder is a game-changer for bridging the gap between your backend routes and your frontend code. By automatically generating fully-typed TypeScript functions for your Laravel controllers and routes, it eliminates guesswork, reduces errors, and ensures your frontend stays in sync with your backend—effortlessly. Whether you're building forms or fetching data, Wayfinder brings a new level of developer experience to full-stack Laravel apps. Be sure to try Wayfinder in your next project and enjoy type-safe routing magic that just works. 🚀

Installing React with Vite

The simplest way today is to use Vite. You'll need to have NodeJS installed on your machine, and then you can run the following command:

npm create vite@latest

This will give you a prompt that looks like the following:

The first prompt will ask you which folder you want to install your new React application in. Then, it will prompt you which framework you want to use. Select React.

Next, you'll see another prompt that asks you which variant of React you want to use:

• TypeScript
• TypeScript + SWC
• JavaScript
• JavaScript + SWC
• React Router v7

If you are more familiar with Javascript, select the Javascript version. Otherwise, choose Typescript if you want to use Typescript. The SWC stands for Speedy Web Compiler, a new and faster compiler built in Rust. It's up to you if you want to use it. Select the variant you wish to use.

In this case, I'm going to select the Javascript version. After selecting the version you want, you'll see a message that says the following:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

cd my-project
npm install
npm run dev

Go ahead and run those commands, and you'll see a message that looks like the following:

Then, visit that URL in the browser (in my case, https://localhost:5173), and you'll see a new React app in front of you.

Time to start building 🛠️

Installing React with Laravel

Another option for installing React with a super-powered back-end is using React in a Laravel application.

Before installing a React+Laravel application, you must download Herd on your machine: https://herd.laravel.com. After installing, move into your Herd directory, which will be ~/Herd on Mac and c:>Herd on Windows.

Next, run the following command:

laravel new my-project --using=tnylea/react-starter

This will install a React+Laravel application into a folder named my-project. After the installation is completed, you'll see the following message:

Be sure to cd into your directory and run composer run dev. Now you'll be able to visit HTTP://my-project.test in your browser, and you'll see the following page:

And now it's time to start building your new masterpiece.

Conclusion

There are many ways to install a React application. Choose the method that works best for you. I recommend installing React with Laravel, but if you do not need a back-end, go ahead and use Vite.

Using a solid CMS with frameworks like Next.js can make a lot of difference if you're managing a lot of content.

While big names dominate the space, today we will explore BCMS and how to use it with Next.js. Plus, some starter templates to get you started.

Let's jump in.

What is covered?

In a nutshell, we are covering these topics in detail.

1. What is BCMS and why should you use it?
2. A step-by-step guide on how to get started with BCMS and Next.js.
3. Starter templates you can use.

If you want to explore yourself, please read the docs.

1. What is BCMS and why should you use it?

BCMS is one of the underrated options as a headless CMS for building Next.js projects. It even provides flexible content modeling for other tech stacks including Astro, Gatsby.js, Nuxt.js and Svelte.

You also get:

✅ Option for Global CDN.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

✅ Component based content modeling.

✅ Flexible content for multilingual sites.

✅ 10+ input options with detailed permissions.

You can do all sorts of stuff like handling forms, HR tools, sending e-mails, custom reporting, all through BCMS using webhooks, functions and cron jobs.

🎯 Before we proceed, let's understand what Headless CMS means.

A headless CMS simply allows you to manage content in one place and deploy it on any digital channel.

In short, it's just any backend application, which is 100% built upon APIs. Headless means frontend less body which can be attached to any frontend or Head.

If you're interested to know more, you can check the article by StoryBlok and The Ultimate Guide to Headless CMS by the Builder.io team. It has visual diagrams, use cases, merits and a lot more.

Why should you use BCMS?

There are many useful features that make BCMS worth it. Let's explore some of them.

✅ BCMS lets you store content in flexible inputs like dropdowns, files, numbers and rich text, all built to work smoothly with Next.js applications.

✅ You can easily upload and manage any media in your Next.js project using BCMS's organized folder system (much better than the others). Read the docs.

✅ You also get dynamic components for your blog or e-commerce site. They are called Widgets in BCMS which are reusable building blocks that are used inside of the entry's content area. Read the docs.

✅ There is also the concept of Groups which helps you to define reusable content structures, like author profiles or addresses, to be easily queried in your Next.js application.

You can use them in templates, widgets or even inside other groups. Read the docs.

✅ To write multilingual content in BCMS, all you need to do is just click add and choose from nearly 100 languages.

English is the default and can’t be deleted, but other languages can be removed which will also remove all associated data with that language.

✅ There is also the concept of entry which is like a single document or item created from a predefined template.

The template decides what details each entry should have. These details, called properties, appear in a section called meta. Every entry also has a content area where you can write text and add interactive elements.

For example, if you create a Blog template, you can set properties like author, category, tags, and publish date. Then, whenever you add a new blog post (entry), these fields will be ready to fill.

You can duplicate the entry, delete it and even set the entry status to indicate when a blog post is ready for publishing. Read the docs to know more.

You can read about all the features on thebcms.com/nextjs-cms.

By the way, BCMS is open source with with hundreds of stars on GitHub. You can find jobs, plugins and more from the readme.

Now that we have understood the unique concepts of BCMS, it's time to integrate BCMS with Next.js in the next section.

2. A step-by-step guide on how to get started with BCMS and Next.js.

We will keep it simple and easy to understand even if you know nothing about the concepts. You can read the docs if you're interested in following everything from scratch.

The first thing you need to install is the BCMS CLI, by running the following command.

npx @thebcms/cli create next

You will get the option to install the package and authenticate with BCMS in case you are not.

Once you log in, this is how the dashboard looks. It's available at app.thebcms.com/.

This sets up a new Next.js project and lets you pick a starter template based on your needs. You can also start from scratch, but to keep things simple, I will go with the blog starter.

This will set up a new nextjs project and it will give you options to select a starter project (based on your use case). There is also the option to start from scratch but for the sake of easiness, I'm selecting the blog starter.

This is how the directory structure looks.

In the root of your project, you will find bcms.config.cjs which is the main configuration file.

/**

* @type {import('@thebcms/cli/config').BCMSConfig}

*/

module.exports = {

    client: {

        orgId: process.env.BCMS_ORG_ID,

        instanceId: process.env.BCMS_INSTANCE_ID,

        apiKey: {

            id: process.env.BCMS_API_KEY_ID,

            secret: process.env.BCMS_API_KEY_SECRET,

        },

    },

};

You will see the codebase pre-filled with some content, a .env file, and the necessary BCMS config.

In the dashboard, you can explore settings if you want to adjust functions, webhooks, dependencies or environment variables.

If you skip the starter template, you will need to create a new API Key under settings. You will get the option to allow necessary permissions once you create entries in the template. Don't worry if this sounds confusing, we will go over it soon.

You just need to install the dependencies and run the server using the following commands.

npm i

npm run dev

The bcms --pull types --lng ts command starts the BCMS CLI and pulls types from BCMS, saving them in /bcms/types/. These types work for both JavaScript and TypeScript.

Then, go to http://localhost:3000 to view the locally hosted version. Here's how it looks.

Congrats! 🎉

You have just integrated BCMS with Next.js, it's that simple!

Let's study more about what is involved. Head over to the BCMS dashboard and look for the Templates option in the sidebar.

You'll find a Blog template already created, with six properties: title, slug, date, description, cover_image, and category. Each property type is displayed as a badge (media, string, date).

You can easily update any properties based on your use case.

You can also create a template from scratch as shown.

Once your template is ready, you will need to create entries for it. In this case, the Blog template already has four entries.

Each entry contains all the necessary details.

When creating a new entry, it will automatically include the required fields based on your template properties.

Similarly, for the cover image, just upload and select it accordingly.

Once you refresh your local setup, the updates will appear.

The entry will be accessible at the route based on the slug URL you set in the dashboard.

Let's talk about the codebase.

First, the BCMS Client is initialized by creating bcms.ts inside the /src directory.

The main logic for fetching and displaying data from BCMS is in /src/app/page.tsx.

import React from 'react';
import { bcms } from './bcms-client';
import { BlogEntry, BlogEntryMetaItem } from '../../bcms/types/ts';
import { Metadata } from 'next';
import BlogCard from '@/components/blog/Card';
import Tag from '@/components/Tag';

const pageTitle = 'Blogs - Simple Blog';
export const metadata: Metadata = {
    title: pageTitle,
    openGraph: {
        title: pageTitle,
    },
    twitter: {
        title: pageTitle,
    },
};

const HomePage: React.FC = async () => {
    const blogs = (await bcms.entry.getAll('blog')) as BlogEntry[];

    const items = blogs.map((blog) => {
        return blog.meta.en as BlogEntryMetaItem;
    });
    return (
        <div className="py-24 md:py-32">
            <div className="container">
                <div className="flex flex-col gap-6 items-center text-center mb-20 md:mb-[120px]">
                    <Tag size="lg">Hi, I’m Anmol 👋</Tag>
                    <h1 className="text-4xl font-bold leading-none md:text-5xl">
                        This is my blog
                    </h1>
                </div>
                <div>
                    <div className="grid grid-cols-1 gap-12 max-w-[1040px] mx-auto">
                        {items.map((item, index) => {
                            return <BlogCard key={index} blog={item} />;
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HomePage;

The BlogPage route is defined in src/app/blog/[slug]/page.tsx.

Core components like ContentManager and Tag are inside the src/app/components directory.

It's simple to understand if you're aware of Next.js concepts.

3. Starter templates you can use.

Learning the concepts is great, but having everything pre-built for different use cases is amazing. Here are some starter templates that might save you time and effort.

✅ Personal website

This is one of the most decent portfolio templates I've come across. It’s clean, unique and well-structured, with some really good sections.

Built with Next.js and BCMS, this template offers a great starting point for developers. Read this tutorial if you want to explore everything that is involved.

You can check the GitHub Repository and live demo.

✅ E-Commerce site

This is a next.js e-commerce template that comes with analytics, multilingual support and more.

If you want a detailed breakdown including templates, groups, elements involved and the step-by-step process to make this, read this guide.

You can check the GitHub Repository and live demo.

✅ Podcast website

If you're planning to launch a podcast or audio-focused platform, this template is a great choice.

The official tutorial is for Gatsby, but the GitHub repository provides a Next.js version as well.

You can check the GitHub Repository and live demo.

✅ Job board

This is for people looking to build a job board or a career page for an organization.

The official tutorial is for Nuxt but you can find the GitHub repository that includes a Next.js version as well.

You can check the GitHub Repository and live demo.

BCMS provides 10+ templates across different frameworks like Astro, Gatsby, Next and Nuxt. You can find all the samples on the official BCMS repository and the official website at thebcms.com/starters.

Other available templates include an agency website, job board, conference starter, recipe website and more. Each of these websites is really unique which makes things a lot better.

If you're exploring other options, you can check Sanity, Contentful, Payload and Strapi.

I'm aware that there are other decent options out there but BCMS has its own perks.

Underrated tools can sometimes be the best fit for your workflow.

Let me know if you have any other ideas or if you have used any Headless CMS options.

Have a great day! Until next time :)

Check my work at anmolbaranwal.com and reach out to hi@anmolbaranwal.com for any collab or sponsorships.

You can connect me on GitHub, Twitter and LinkedIn if you loved the content :)

(Laravel 11)

Install Laravel Octane (FrankenPHP)

composer require laravel/octane

When prompted, say “yes” to auto-install FrankenPHP.

php artisan octane:install --server=frankenphp

To monitor file changes, install chokidar (hot reloading):

npm install --save-dev chokidar

Link your Herd (Valet) URL to Octane, with https://

In your Laravel project folder, run:

herd unlink

herd proxy YOUR_APP_URL.test http://127.0.0.1:8000 --secure

(Herd will now route requests for https://YOUR_APP_URL.test to Octane on port 8000.)

Set Up File Storage (S3 / MinIO)

Install the AWS S3 Flysystem driver (required even if you’re using MinIO locally):

composer require league/flysystem-aws-s3-v3 "^3.0" --with-all-dependencies

Follow Herd’s documentation to enable MinIO locally:

• https://herd.laravel.com/docs/macos/herd-pro-services/minio

Make sure your local MinIO bucket has PUBLIC read access for development.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Update your .env with the MinIO credentials found in Herd → Services → MinIO:

FILESYSTEM_DISK=s3

AWS_BUCKET=
AWS_ACCESS_KEY_ID=herd
AWS_USE_PATH_STYLE_ENDPOINT=true
AWS_SECRET_ACCESS_KEY=secretkey
AWS_DEFAULT_REGION=
AWS_URL=
AWS_ENDPOINT=

Configure Default Storage, Filament, Livewire and Spatie Media Library

If using Filament or Spatie Media Library, point them to the s3 disk in your .env:

FILESYSTEM_DISK=s3
FILAMENT_FILESYSTEM_DISK=s3
MEDIA_DISK=s3

For Livewire’s temporary file uploads (in config/livewire.php):

'temporary_file_upload' => [
    'disk' => env('FILAMENT_FILESYSTEM_DISK', 'local'), //or simply 's3'
    // ...
],

Start Octane

You may need to restart Herd services and clear your cache before starting Octane:

php artisan octane:frankenphp --watch

If chokidar is installed, Octane will watch and hot-reload on file changes. Now visit https://YOUR_APP_URL.test and enjoy the speed!

Troubleshooting

• If you see 404s on stored images, confirm that your bucket has public read access. The same applies if you get errors when uploading files with Filament or Livewire.
• Memory errors? Read the Laravel documentation carefully about memory leaks and try increasing the memory limit in Herd php settings

In fact, even if you're trenched in the JS ecosystem, you can still feel overwhelmed. Whenever I see something like the following image:

I immediately disregard all options except for NPM. Why are there so many options 🤦‍♂️

Curiosity finally got the better of me, and I decided to figure out what the hell PNPM is and whether or not I should give a f*ck. So, here's a quick write-up to help anyone else screaming internally, "Why the hell do we need another package manager?"

TLDR

PNPM is faster and saves disk space. The extra P stands for Performant. Instead of adding all the dependencies to a single project, PNPM uses a symlink strategy to share dependencies across projects. That's it! That's all you need to know.

But honestly, PNPM should stand for Please No-more Package Managers. Am I right? Am I right?... (nervous chuckle)... Yeah, okay. Anyway,… moving on. 🫠

Managing Versions

You may be wondering, like I was, how it manages different versions. Apparently, that is one of the big selling points for why developers choose PNPM.

• If two projects use the same dependency version, PNPM symlinks them in a shared place.
• If two projects need different versions of the same dependency, PNPM will store both versions in a shared place but save disk space by reusing common files.

The way PNPM handles dependencies is what makes it faster.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Should you use PNPM

It's totally up to you. For now, I will stick to NPM because that's what I'm used to. If that changes, I'll be sure to update this post. Or I'll forget. Who knows?

Damn You Javascript

This is a prime example of why web development has earned its reputation as "difficult to learn." Every week, a new library or package is released that claims to be "better," "faster," or "revolutionary," but it mainly just adds to the confusion.

Ending on a Positive Note

The JS ecosystem may be chaotic, but at least you have options for everything under the sun. So, Whether you're sticking with NPM out of habit or switching to PNPM to save some disk space, all that matters is being productive and writing code.

Grab your favorite package manager, write some code, and one day, JavaScript may finally chill out. Probably not, though. 😂

What are Multi-Platform Images?

Multi-platform images are Docker images that can run on different CPU architectures. Instead of building separate images for each architecture, we can create a single image that works across:

• AMD64 (regular Intel/AMD computers)
• ARM64 (M1/M2 Macs, newer Raspberry Pis)
• ARMv7 (older Raspberry Pis)
• And more!

Prerequisites

Before we start, you'll need:

• Docker installed on your machine
• Docker BuildKit enabled (it's enabled by default in newer Docker versions)
• Docker Hub account (or another registry) to push your images

Setting Up BuildX

BuildX is Docker's tool for building multi-platform images. Let's set it up:

1. Create a new builder instance:

docker buildx create --name mybuilder --use

2. Start the builder:

docker buildx inspect --bootstrap

Creating a Simple Multi-Platform Image

Let's create a basic web server as an example. First, make a new directory:

mkdir multi-arch-demo
cd multi-arch-demo

Create a simple index.html:

echo "<h1>Hello from $(uname -m)</h1>" > index.html

Now create a Dockerfile:

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

Building for Multiple Platforms

Here's the cool part! Build and push the image for multiple platforms in one command:

docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 \
  -t yourusername/multi-arch-demo:latest \
  --push .

This command:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• Builds for three different architectures
• Tags the image with your username
• Pushes it to Docker Hub

Testing Your Multi-Platform Image

To test your image, you can pull and run it on different devices:

# On a regular computer (AMD64)
docker run -p 80:80 yourusername/multi-arch-demo:latest

# On a Raspberry Pi (ARM)
docker run -p 80:80 yourusername/multi-arch-demo:latest

# On an M1/M2 Mac (ARM64)
docker run -p 80:80 yourusername/multi-arch-demo:latest

Docker automatically picks the right version for each device!

Real-World Example: Python Application

Let's create a more practical example with a Python application:

Create a simple app.py:

from flask import Flask
import platform

app = Flask(__name__)

@app.route('/')
def hello():
    return f"Hello from {platform.machine()}!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Create a requirements.txt:

flask==2.0.1

Create a multi-platform Dockerfile:

FROM --platform=$BUILDPLATFORM python:3.9-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt

COPY app.py .
EXPOSE 5000

CMD ["python", "app.py"]

Build and push for multiple platforms:

docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 \
  -t yourusername/python-multi-arch:latest \
  --push .

Tips and Tricks

1. Cache Management

docker buildx build --platform linux/amd64,linux/arm64 \
  --cache-from type=registry,ref=yourusername/myapp:cache \
  --cache-to type=registry,ref=yourusername/myapp:cache \
  -t yourusername/myapp:latest \
  --push .

2. Checking Available Platforms

docker buildx ls

3. Inspecting Multi-Platform Images

docker buildx imagetools inspect yourusername/multi-arch-demo:latest

Common Issues and Solutions

1. No space left on device Solution: Clean up your builder:

docker buildx prune

2. QEMU errors Solution: Install QEMU support:

docker run --privileged --rm tonistiigi/binfmt --install all

3. Build taking too long Solution: Build only the platforms you need:

docker buildx build --platform linux/amd64,linux/arm64 \
  -t yourusername/myapp:latest \
  --push .

Conclusion

Multi-platform Docker images are super helpful when you need your application to run on different types of computers. With BuildX, it's pretty straightforward to create images that work everywhere. The key things to remember are:

1. Use BuildX for multi-platform builds
2. Test your images on different architectures
3. Only build for the platforms you actually need
4. Keep your images small and efficient

Now you can build Docker images that run on any device, from your laptop to a Raspberry Pi!

If you want to try this out but don't have a server, you can use my DigitalOcean referral link to get a free $200 credit: Free $200 Credit For DigitalOcean. This is more than enough to spin up a few Droplets and practice building multi-architecture Docker images!

And if you're new to Docker, I've written a free Docker ebook that covers all the basics - you can check it out at Introduction to Docker eBook. The ebook will help you get started with Docker before diving into multi-architecture builds!

If you are already working as a DevOps engineer, check out this DevOps Scorecard and evaluate your DevOps skills across 8 key areas and discover your strengths and growth opportunities

Give it a try and let me know if you have any questions. You can reach me on Twitter @bobbyiliev_.

Probably the most known helper function is url() that allows you to generate internal application URLs.

Another great helper is the retry() function for example: https://laravel.com/docs/11.x/helpers#method-retry

Easy way to retry a statement a certain number of times if it fires an exception. It’s usually used on external API calls, and in fact it was recently integrated as a method in the Laravel HTTP client.

$response = Http::retry(3, 100)->post(/* ... */);

More about HTTP client on the dedicated article: https://inspector.dev/laravel-http-client-overview-and-monitoring/

Laravel helper functions use case

Sometimes we would like to automate tasks related to our business logic and encapsulating it into an helper function could be very convenient. I wrote about the implementation of array_map for associative arrays that is a perfect fit for this use case.

You can refer to the article to know the purpose of this function, in this context I want to make it a custom helper function to be used inside your Laravel application.

How to register new Laravel helper functions

First create a new file helper.php in the app/ directory of your Laravel project.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Paste the code below to declare the array_map_assoc function into the file:

if (!function_exists('array_map_assoc')) {
    /**
     * Apply a mapping callback receiving key and value as arguments.
     * The standard array_map doesn't pass the key to the callback. But in the case of associative arrays,
     * it could be really helpful.
     *
     * array_map_assoc(function ($key, $value) {
     *  ...
     * }, $items)
     *
     * @param callable $callback
     * @param array $array
     * @return array
     */
    function array_map_assoc(callable $callback, array $array): array
    {
        // map original array keys, and call $callable with $key and $value.
        return array_map(function($key) use ($callback, $array){
            return $callback($key, $array[$key]);
        }, array_keys($array));
    }
}

As you can see the function declaration is wrapped by the if to avoid registering functions with the same name.

Include the helper file via Composer's autoload

Laravel doesn't automatically load custom helper files, so you need to manually instruct composer to include the file during the autoload generation.

In the composer.json file of your Laravel project find the "autoload" section, and add the “files” keyword:

"autoload": {
    "psr-4": {
        "App\\": "app/",
        "Database\\Factories\\": "database/factories/",
        "Database\\Seeders\\": "database/seeders/"
    },
    "files": [
        "app/helpers.php"
    ]
},

After adding the file, run composer dump-autoload in your terminal to refresh Composer’s autoload files.

Using Your Laravel Helper Function

Once the helper file is loaded, you can use your custom functions anywhere in your Laravel application just like any other PHP function.

$histogram = array_map_assoc(function ($key, $value) {
    return [
        'label' => $key,
        'value' => $value['doc_count']
    ];
}, $data);

Hope it's helpful to stay organized with your codebase.

For more technical articles you can follow me on Linkedin or X.

Monitor your PHP application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel or Symfony package and you are ready to go.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

When you're building a website or an app, knowing how users interact with it is key to improving the experience. However, many tracking tools are complicated, costly, or don't care about privacy. That's where Pan steps in. Pan is a simple, privacy-friendly tool for tracking user behavior on your Laravel app, created by Nuno Maduro and David Hill from the Laravel team.

In this guide, I'll show you how to integrate Pan into your Laravel project and track things like views, hovers, and clicks without collecting personal data from your users.

What You'll Need

Before we jump in, make sure you have the following ready:

• PHP 8.3 or higher
• A Laravel 11+ project set up
• Composer installed (helps manage your project dependencies)

Check out this intro video by Josh Cirre:

Step 1 — Installing Pan

First up, let's add Pan to your Laravel project. You’ll do this using Composer:

1. Open your terminal.
2. Navigate to your Laravel project folder.
3. Run this command:

composer require panphp/pan

This will install Pan into your project.

4. Now, run this command to set up Pan:

php artisan install:pan

This command will configure everything for you!

Step 2 — Track User Actions

With Pan installed, you can now track parts of your website. Pan uses a data-pan attribute to track specific elements.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

For example, to track when someone clicks or hovers over a "Sign Up" button, you’d add this:

<button data-pan="sign-up-button">Sign Up</button>

Here are more examples:

<div data-pan="hero-section">Welcome to our site!</div>
<a data-pan="learn-more-link" href="/about">Learn More</a>
<form data-pan="contact-form">
  <!-- Your form fields here -->
</form>

Pan will automatically start tracking impressions, hovers, and clicks for these elements!

Step 3 — View Your Tracking Data

Now that Pan is tracking your elements, you can view the data it collects using Artisan:

1. Open your terminal.
2. Go to your project folder.
3. Run this command:

php artisan pan

You'll get a table showing how many times each element has been viewed, hovered over, or clicked.

If you want to check a specific element, use:

php artisan pan --filter=sign-up-button

Replace sign-up-button with the element you’re tracking.

Step 4 — Customize Pan (Optional)

By default, Pan tracks up to 50 elements, but you can change this if needed. To customize Pan, open the AppServiceProvider.php file and add:

use Pan\PanConfiguration;

public function register(): void
{
    // Track specific elements
    PanConfiguration::allowedAnalytics([
        'sign-up-button',
        'contact-form',
    ]);

    // Or increase the limit
    // PanConfiguration::maxAnalytics(10000);

    // Or remove the limit entirely
    // PanConfiguration::unlimitedAnalytics();
}

Step 5 — What Pan Tracks

Here’s what Pan tracks:

1. Impressions: Counts how many times an element is seen.
2. Hovers: Counts how many times users hover over an element.
3. Clicks: Counts how many times users click on an element.

Pan is completely privacy-friendly—it doesn’t collect any personal data about your users.

Step 6 — Use the Data to Improve

With Pan tracking how users interact with your site, you can use that data to improve your site. For example:

• If a button isn’t clicked much, maybe it needs more attention or clearer text.
• If users are hovering over an element but not clicking, maybe it’s confusing.
• If some sections aren’t being viewed, think about moving them to more visible areas.

Step 7 — Clear Tracking Data

If you ever need to clear Pan's tracking data, it’s easy:

1. Open your terminal.
2. Navigate to your project folder.
3. Run this command:

php artisan pan:flush

This will reset Pan's tracking data, so you can start fresh.

Conclusion

Pan makes it easy to understand how users interact with your Laravel app without compromising their privacy.

By adding the data-pan attribute and using Artisan commands, you can track user behavior and make informed improvements to your website or app.

If you are already working as a DevOps engineer, check out this DevOps Scorecard and evaluate your DevOps skills across 8 key areas and discover your strengths and growth opportunities

They are used to store configuration settings and other information required by the system and other applications.

In this article, we'll explore how to work with environment variables in Rust using the standard library and the dotenv crate.

What Are Environment Variables?

Environment variables provide a flexible way to configure your applications without hardcoding values directly in your source code.

This makes it easier to manage different configurations for different environments, (development, testing, and production) and to keep sensitive information, such as API keys, secure.

Let's see 3 different examples of how we can use the environment variables in Rust.

1. Using the std::env module
2. Using the command line (Windows and Linux)
3. Using the dotenv crate

If you prefer a video version:

All the code is available on Github (link in the video description)

1. Environemnt Variables using the std::env module

Rust provides the std::env module to interact with environment variables. This module can read, set, and remove environment variables.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Importing the env Module

First, import the env module from the standard library:

use std::env;

You can test this by typing cargo run in the terminal.

Your output should be something like this:

Setting an Environment Variable

You can set an environment variable using the set_var function. Here's an example where we set a variable AAA with the value 123:

fn main() {
    let key = "AAA";
    std::env::set_var(key, "123"); // Sets AAA to 123
}

Removing an Environment Variable

To remove an environment variable, use the remove_var function:

fn main() {
    let key = "AAA";
    env::remove_var(key); // Removes the variable AAA
}

Checking If an Environment Variable Exists

To check if an environment variable exists, use the env::var function, which returns a Result. You can handle this with a match statement:

fn main() {
    let key = "AAA";

    match env::var(key) {
        Ok(val) => println!("{}: {:?}", key, val),
        Err(e) => println!("Error {}: {}", key, e),
    }
}

2. Environment Variables from the Command Line

You can pass environment variables directly from the command line when running your Rust program:

Here's how you can read the CLI_ARG environment variable:

fn main() {
    let cli_arg = env::var("CLI_ARG");

    match cli_arg {
        Ok(val) => println!("CLI_ARG: {:?}", val),
        Err(e) => println!("Error CLI_ARG: {}", e),
    }
}

To read them from the command line, you can use the following commands:

On Linux/macOS:

CLI_ARG=TEST cargo run

On Windows(powershell):

$env:CLI_ARG="TEST"; cargo run

3. Environment Variables with the dotenv Crate

In addition to the standard library, you can use the dotenv crate to load environment variables from a .env file. This is particularly useful in development environments.

First, add dotenv to your Cargo.toml file:

[dependencies]
dotenv = "0.15.0"

And create a .env file in the root of your project with the following content:

API_KEY=1234567890

Loading Environment Variables from a .env File

After adding dotenv, you can use it to load variables from a .env file:

use dotenv::dotenv;
use std::env;

fn main() {
    dotenv().ok(); // Reads the .env file

    let api_key = env::var("API_KEY");

    match api_key {
        Ok(val) => println!("API_KEY: {:?}", val),
        Err(e) => println!("Error API_KEY: {}", e),
    }

    //Simulate the execution of the rest of the program
    println!("...program continues...");
}

And you if you run the program, you should see the output:

In the example above, the dotenv().ok(); line loads the variables from a .env file located in the root of your project. The program then attempts to read the API_KEY variable and prints its value or an error if it is not set.

Conclusion

These are just three basic examples of working with environment variables in Rust.

I hope everything is clear and you can use them in your projects. If you have any questions, feel free to ask in the comments below.

If you prefer a video version:

All the code is available on Github (link in the video description)

You can find me here: Francesco

I'm Bobby, a Docker Captain and the author of the free Introduction to Docker eBook. Today, we're diving deep into a crucial aspect of Docker that can significantly impact your containerized applications' performance and resource utilization: optimizing Docker image sizes.

The efficiency of our Docker images is increasingly important, especially in cloud-native and microservices architectures where we might be deploying hundreds or thousands of containers. Every megabyte counts when you're scaling up!

Prerequisites

Before we embark on this image-slimming journey, make sure you have:

• Docker installed on your system
• Basic knowledge of Dockerfiles and Docker commands
• Some experience building and running Docker containers

If you're new to Docker or need a refresher, I highly recommend checking out my free Introduction to Docker eBook. It covers all the fundamentals you'll need to follow along with this guide and will give you a solid foundation for understanding the optimization techniques we'll discuss.

Why Optimize Docker Image Sizes?

Before we dive into the specific aproaches, let's take a moment to understand why smaller Docker images are so beneficial:

1. Smaller images mean less data to transfer. This translates to quicker pulls from registries, faster deployments, and reduced time to scale up your applications.

2. In cloud environments, storage isn't free. Smaller images consume less storage space, which can lead to significant cost savings, especially when you're dealing with multiple images and frequent updates.

3. A smaller image means a reduced attack surface. With fewer packages and files, there's less opportunity for vulnerabilities to creep in. It's easier to audit and maintain the security of a lean image.

   Our Amazing Sponsors

   View Website

   DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

   View Website

   Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

   View Website

   A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

4. Smaller images often lead to faster container startup times. In orchestrated environments like Kubernetes, where containers might be frequently started and stopped, this can make a big difference in overall system responsiveness.

5. In environments with limited resources, such as edge computing or IoT devices, every byte counts. Smaller images allow you to run more containers on the same hardware.

Now that we understand the importance of optimizing our Docker images, let's dive into the techniques that can help us achieve this goal.

1. Use Minimal Base Images

One of the most effective ways to reduce your Docker image size is to start with a minimal base image. The base image is the foundation of your Docker image, and choosing the right one can make a significant difference.

Instead of using a full-fledged operating system image like:

FROM ubuntu

Consider using a more lightweight alternative:

FROM alpine

Alpine Linux is a security-oriented, lightweight Linux distribution that's only 5MB in size. It's perfect for creating small, secure Docker images. However, it uses musl libc instead of glibc, which can occasionally cause compatibility issues with some applications.

For even more minimalism, especially for compiled languages, consider using distroless images:

FROM gcr.io/distroless/static-debian11

Distroless images contain only your application and its runtime dependencies. They don't contain package managers, shells, or any other programs you would expect to find in a standard Linux distribution. This makes them extremely small and secure.

Here's a comparison of base image sizes:

• Ubuntu: ~72MB
• Alpine: ~5MB
• Distroless: ~2MB

To learn more about distroless images, check out this blog post: Is Your Container Image Really Distroless?.

By choosing the right base image, you can reduce your starting point from hundreds of MBs to just a few MBs. This sets the stage for a much smaller final image.

2. Multi-stage Builds: The Secret Sauce

Multi-stage builds are a game-changer for creating efficient Docker images. They allow you to use one image for building your application and another for running it. This technique is particularly powerful for compiled languages but can be useful for interpreted languages as well.

Here's an expanded example for a Go application:

# Build stage
FROM golang:1.21-alpine AS builder
WORKDIR /app
COPY . .
# Install any necessary dependencies
RUN go mod download
# Build the application
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .

# Final stage
FROM alpine:3.18
RUN apk --no-cache add ca-certificates
WORKDIR /root/
# Copy the pre-built binary file from the previous stage
COPY --from=builder /app/main .
# Command to run the executable
CMD ["./main"]

Let's break this down:

1. The first stage uses the golang:1.21-alpine image, which includes the Go compiler and tools. We build our application in this stage.

2. We use CGO_ENABLED=0 and GOOS=linux to create a statically linked binary that doesn't depend on C libraries. This allows us to use a very minimal runtime image.

3. The second stage starts from the Alpine image, which is much smaller than the Go image.

4. We only copy the compiled binary from the build stage to the final stage. All the Go development tools and source code are left behind.

5. We add ca-certificates to ensure our application can make HTTPS connections if needed.

This approach separates your build environment from your runtime environment, resulting in a much smaller final image. It's not uncommon to see image sizes reduce from 300-400MB to 10-20MB using this technique.

Multi-stage builds can be adapted for other languages too. For example, in a Node.js application, you might use one stage to install all dependencies and build your application, and another stage with only production dependencies for the final image. The same principle applies for Python, Java, and other languages.

3. Layer Optimization: Every Line Counts

In Docker, each instruction in your Dockerfile creates a new layer. These layers are cached, which can speed up builds, but they also contribute to the final image size. To minimize layers and optimize your image:

1. Combine RUN commands: Use && to chain commands and \ for line breaks to make your Dockerfile more readable. This reduces the number of layers and can significantly decrease your image size.

   Instead of:

   RUN apt-get update
   RUN apt-get install -y package1
   RUN apt-get install -y package2
   RUN apt-get install -y package3
   RUN rm -rf /var/lib/apt/lists/*
   

   Use:

   RUN apt-get update && apt-get install -y \
       package1 \
       package2 \
       package3 \
    && rm -rf /var/lib/apt/lists/*
   

   This not only reduces the number of layers but also ensures that the package lists are updated and cleaned up in the same layer, preventing outdated package lists from persisting in your image.

2. Use COPY instead of ADD: COPY is more transparent in its behavior. Use ADD only when you specifically need its tar auto-extraction feature or copying remote files from URLs. For more information check out the documentation here.

3. Order instructions from least to most frequently changing: Docker caches layers, and this cache is invalidated when the content used in an instruction changes. By putting instructions that change frequently (like copying your application code) towards the end of your Dockerfile, you can take better advantage of the build cache for the layers that change less frequently.

   For example:

   FROM node:14-alpine
   WORKDIR /app
   
   # These layers change less frequently
   COPY package*.json ./
   RUN npm ci --only=production
   
   # This layer changes most frequently
   COPY . .
   
   CMD ["node", "server.js"]
   

4. Use .dockerignore: This file works like .gitignore and prevents unnecessary files from being added to your build context. This can significantly speed up the build process and reduce the final image size.

   Example .dockerignore:

   .git
   *.md
   node_modules
   npm-debug.log
   

   This prevents the .git directory, Markdown files, the node_modules directory, and npm debug logs from being copied into your image.

5. Clean up in the same layer: When installing packages or downloading files, make sure to clean up in the same RUN instruction:

   RUN wget https://example.com/big-file.tar.gz \
       && tar -xzf big-file.tar.gz \
       && make -C big-file \
       && rm -rf big-file big-file.tar.gz
   

   This ensures that the downloaded and extracted files don't persist in the final image.

By carefully considering each instruction in your Dockerfile and how it affects layering, you can create more efficient, smaller images that are faster to build and deploy.

4. Use .dockerignore

The .dockerignore file is a powerful tool for optimizing your Docker builds and reducing image sizes. It works similarly to .gitignore, allowing you to specify which files and directories should be excluded from the Docker build context.

Here's why .dockerignore is crucial:

1. The build context is sent to the Docker daemon before the build starts. A smaller context means faster uploads and builds.

2. By excluding files that change frequently but aren't needed in the image, you can prevent unnecessary cache invalidation and speed up builds.

3. It helps prevent sensitive files (like .env files or ssh keys) from accidentally being included in your image.

Here's an example of a comprehensive .dockerignore file:

# Version control
.git
.gitignore

# Documentation
*.md
docs/

# Development artifacts
node_modules/
npm-debug.log
yarn-error.log
*.log
*.bak

# Build output
dist/
build/
*.exe
*.dll
*.so
*.dylib

# Editor and IDE files
.vscode/
.idea/
*.swp
*.swo

# OS generated files
.DS_Store
Thumbs.db

# Test files
test/
__tests__/
*.test.js

# Configuration files that shouldn't be in the image
.env
.env.*
config.local.js

# Docker files
Dockerfile
docker-compose.yml

By carefully crafting your .dockerignore file, you can significantly reduce your build context size and ensure that only the necessary files are included in your Docker image. This not only speeds up your build process but also helps in creating smaller, more focused images.

Remember to review and update your .dockerignore file regularly, especially as your project structure changes or grows.

5. Use Build Arguments for Flexibility

Build arguments provide a powerful way to create flexible and reusable Dockerfiles. They allow you to pass variables at build-time, enabling you to customize your image building process without maintaining multiple Dockerfiles.

Here's an in-depth look at how to use build arguments effectively:

1. Defining build arguments: In your Dockerfile, you can define build arguments using the ARG instruction:

   ARG VERSION=latest
   FROM base:${VERSION}
   

   This sets a default value of "latest" for the VERSION argument, which can be overridden at build time.

2. Using build arguments: You can use build arguments in various ways throughout your Dockerfile:

   ARG NODE_ENV=production
   ENV NODE_ENV=${NODE_ENV}
   
   ARG USER=nobody
   USER ${USER}
   
   ARG PORT=8080
   EXPOSE ${PORT}
   

3. Passing build arguments: When building your image, you can pass values for your build arguments:

   docker build --build-arg VERSION=18.04 --build-arg NODE_ENV=development -t myapp:custom .
   

4. Multi-stage builds with arguments: Build arguments can be particularly powerful in multi-stage builds:

   ARG GO_VERSION=1.21
   FROM golang:${GO_VERSION}-alpine AS builder
   # ... build stage instructions ...
   
   ARG ALPINE_VERSION=3.18
   FROM alpine:${ALPINE_VERSION}
   # ... final stage instructions ...
   

   This allows you to easily update the versions of your base images by passing different build arguments.

5. Scoping build arguments: It's important to note that each FROM instruction in a multi-stage Dockerfile clears all ARGs defined before it. If you need an ARG in multiple stages, you need to redefine it:

   ARG VERSION=latest
   FROM base:${VERSION} AS builder
   ARG VERSION  # Redefine to use in this stage
   RUN echo "Building version: ${VERSION}"
   
   FROM base:${VERSION} AS final
   ARG VERSION  # Redefine again for this stage
   LABEL version="${VERSION}"
   

6. Security considerations: Be cautious with sensitive information in build arguments. While they're not persisted in the final image like ENV variables, they are visible in the image history. For sensitive data, consider using Docker secrets or environment variables at runtime instead.

By using build arguments, you can create more flexible and maintainable Dockerfiles. This approach allows you to use the same Dockerfile for different environments (development, staging, production) or to easily update versions of base images and dependencies without modifying the Dockerfile itself.

6. Use Docker's BuildKit

BuildKit is Docker's next-generation build engine, offering improved performance, better caching, and more advanced features. It's designed to be faster and more efficient than the legacy builder, especially for complex build scenarios.

Here's a deep dive into using BuildKit for optimizing your Docker builds:

1. Enabling BuildKit: You can enable BuildKit by setting an environment variable:

   export DOCKER_BUILDKIT=1
   

   Or, for a single build:

   DOCKER_BUILDKIT=1 docker build .
   

   You can also enable it by default in the Docker daemon configuration file (/etc/docker/daemon.json):

   {
     "features": {
       "buildkit": true
     }
   }
   

2. Syntax directive: To use BuildKit-specific features, add this line at the top of your Dockerfile:

   # syntax=docker/dockerfile:1.4
   

   This enables the use of the latest Dockerfile syntax and BuildKit features.

3. Improved caching with --mount=type=cache: BuildKit introduces a new caching mechanism that can significantly speed up builds:

   RUN --mount=type=cache,target=/root/.cache/go-build \
       go build -o myapp .
   

   This caches the Go build cache between builds, greatly speeding up subsequent builds.

4. Secret mounting: BuildKit allows you to securely use secrets during build without them being stored in the final image:

   RUN --mount=type=secret,id=mysecret cat /run/secrets/mysecret
   

   You can then pass the secret at build time:

   docker build --secret id=mysecret,src=path/to/secret.txt .
   

5. SSH agent forwarding: BuildKit can forward your SSH agent, allowing secure cloning of private repositories during build:

   RUN --mount=type=ssh ssh-add -l && \
       git clone git@github.com:myorg/myrepo.git
   

   Build with:

   docker build --ssh default .
   

6. Parallel execution: BuildKit can execute independent build stages in parallel, potentially speeding up complex builds.

7. Better output formatting: BuildKit provides cleaner, more informative build output, making it easier to understand what's happening during the build process.

8. Inline cache storage: BuildKit can store cache metadata in the image itself, allowing you to push and pull cached layers along with your image:

   docker build --cache-from myimage:latest --cache-to type=inline .
   

9. Multi-platform builds: BuildKit simplifies creating multi-architecture images:

   docker buildx build --platform linux/amd64,linux/arm64 -t myimage:latest .
   

BuildKit is the future of Docker builds and offers many advanced features that can help optimize your build process. You can check out the official BuildKit documentation for more details.

7. Optimize for Your Specific Language

Different programming languages have different optimization techniques when it comes to Docker images. Here's an in-depth look at optimizing for some popular languages:

Node.js

1. Use npm ci instead of npm install:

   COPY package*.json ./
   RUN npm ci --only=production
   

   npm ci is faster and more reliable for CI environments. It installs exact versions from package-lock.json.

2. Prune development dependencies:

   RUN npm prune --production
   

   This removes dev dependencies after your build step, significantly reducing image size.

3. Use the official Node.js Alpine image:

   FROM node:14-alpine
   

   Alpine-based images are much smaller than the default Node.js images.

4. Use multi-stage builds for front-end applications:

   FROM node:14-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm ci
   COPY . .
   RUN npm run build
   
   FROM nginx:alpine
   COPY --from=builder /app/build /usr/share/nginx/html
   

   This builds your application in one stage and copies only the built assets to the final nginx image.

Python

1. Use pip install --no-cache-dir:

   RUN pip install --no-cache-dir -r requirements.txt
   

   This prevents pip from caching downloaded packages, reducing the image size.

2. Use virtual environments:

   RUN python -m venv /opt/venv
   ENV PATH="/opt/venv/bin:$PATH"
   RUN pip install --no-cache-dir -r requirements.txt
   

   This keeps your Python environment isolated and can help reduce size.

3. Use Python Alpine images:

   FROM python:3.9-alpine
   

   Alpine-based Python images are much smaller than the standard ones.

4. Compile Python bytecode:

   RUN python -m compileall .
   

   This can slightly reduce size and improve startup time.

Java

1. Use JDK for build, JRE for runtime:

   FROM openjdk:11 AS builder
   COPY . /app
   RUN javac /app/Main.java
   
   FROM openjdk:11-jre
   COPY --from=builder /app/Main.class /app/
   CMD ["java", "-cp", "/app", "Main"]
   

   This uses the full JDK to compile, but only the JRE to run.

2. Use jlink to create a custom JRE:

   FROM openjdk:11 AS builder
   WORKDIR /app
   COPY . .
   RUN jlink --add-modules java.base,java.logging --output /javaruntime
   
   FROM alpine:3.18
   COPY --from=builder /javaruntime /opt/java
   COPY --from=builder /app/Main.class /app/
   ENV PATH="/opt/java/bin:${PATH}"
   CMD ["java", "-cp", "/app", "Main"]
   

   This creates a minimal JRE with only the modules your application needs.

3. Use Spring Boot's layered jars: For Spring Boot applications, use the layered jar feature to create more efficient Docker images:

   FROM openjdk:11-jre as builder
   WORKDIR application
   COPY target/*.jar application.jar
   RUN java -Djarmode=layertools -jar application.jar extract
   
   FROM openjdk:11-jre
   WORKDIR application
   COPY --from=builder application/dependencies/ ./
   COPY --from=builder application/spring-boot-loader/ ./
   COPY --from=builder application/snapshot-dependencies/ ./
   COPY --from=builder application/application/ ./
   ENTRYPOINT ["java", "org.springframework.boot.loader.JarLauncher"]
   

Go

1. Build statically linked binaries:

   FROM golang:1.21-alpine AS builder
   WORKDIR /app
   COPY . .
   RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .
   
   FROM scratch
   COPY --from=builder /app/main /main
   ENTRYPOINT ["/main"]
   

   This creates a binary with no external dependencies, allowing the use of a scratch image.

2. Use Alpine for non-static binaries: If you need CGO or can't use static linking:

   FROM golang:1.21-alpine AS builder
   RUN apk add --no-cache git
   WORKDIR /app
   COPY . .
   RUN go build -o main .
   
   FROM alpine:3.18
   RUN apk add --no-cache ca-certificates
   COPY --from=builder /app/main /main
   ENTRYPOINT ["/main"]
   

By optimizing your Dockerfile to the specific needs of your programming language and application, you can create highly optimized Docker images that are both small in size and efficient in runtime.

8. Regular Audits and Updates

Regularly auditing and updating your Docker images is crucial for maintaining efficiency, security, and performance. Here's a detailed look at how to approach this:

1. Use Docker Scout for vulnerability scanning: Docker Scout is a powerful tool for scanning your images for vulnerabilities:

   docker scout cve your-image:tag
   

   This command provides a detailed report of known vulnerabilities in your image.

2. Integrate scanning into your CI/CD pipeline: Here's an example of how you might integrate Docker Scout into a GitHub Actions workflow:

   name: Docker Image CI
   
   on: [push]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v2
       - name: Build the Docker image
         run: docker build . --file Dockerfile --tag my-image:$(date +%s)
       - name: Scan the Docker image
         run: docker scout cve my-image:$(date +%s)
   

3. Regularly update base images: Set up a process to regularly check for and test updates to your base images. You can automate this with tools like Dependabot for GitHub.

4. Monitor image size over time: Keep track of your image sizes over time. You can do this manually or set up a script to record image sizes after each build:

   docker images --format "{{.Size}}\t{{.Repository}}:{{.Tag}}" | sort -h
   

5. Analyze image layers: Regularly inspect your image layers to identify any unexpected growth:

   docker history your-image:tag
   

6. Use image digests for immutability: Instead of relying on tags, which can be overwritten, use image digests for important images:

   docker pull your-image@sha256:a1b2c3...
   

7. Implement a retention policy: Regularly clean up old and unused images to save storage space:

   docker image prune -a --filter "until=240h"
   

   This removes images older than 10 days.

8. Stay informed about Docker updates: Keep your Docker engine and tools up to date, and stay informed about new features that might help optimize your workflows.

9. Perform regular security audits: Beyond just scanning for vulnerabilities, regularly review your Dockerfiles and build processes for security best practices.

10. Test optimized images thoroughly: After making optimizations, always thoroughly test your images to ensure they still function as expected in all required environments.

By implementing these practices, you can ensure that your Docker images remain efficient, secure, and up-to-date over time.

Conclusion

Optimizing Docker image sizes is an ongoing process that requires attention to detail and regular reviews. By implementing these techniques, you can significantly reduce your Docker image sizes, leading to faster deployments, reduced costs, and improved security.

Remember, the goal is to find the right balance between image size and functionality. Don't sacrifice necessary features just to make your image smaller!

If you're looking to dive deeper into Docker and container optimization, don't forget to check out my free Introduction to Docker eBook. It provides a solid foundation for working with Docker and will help you understand the concepts we've covered here in more depth.

Also, if you're setting up your Docker environment and need a reliable host, consider using DigitalOcean. You can get a $200 free credit to get started!

If you are already working as a DevOps engineer, check out this DevOps Scorecard and evaluate your DevOps skills across 8 key areas and discover your strengths and growth opportunities

Happy Dockerizing! 🐳

Laravel offers a complete and flexible authentication system, capable of adapting to various needs and implementations. There are also several external packages to implement additional authentication processes other than what ship with the framework by default.

In this article I show you the implications of the standard authentication system and other auth routes systems I navigated in the last ten years of experience with Laravel.

Authentication Guards e Providers in Laravel

The logic behind routes authentication in Laravel is based on the implementation of two different objects:

• Guard: defines how to determine whether an HTTP request is coming from an authenticated user;
• Provider: defines how to retrieve registered users for the application. You can check out these configurations in the config/auth.php configuration file.

/*
|--------------------------------------------------------------------------
| Authentication Guards
|--------------------------------------------------------------------------
|
*/
'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

/*
|----------------------------------------------------------------------
| User Providers
|----------------------------------------------------------------------
|
*/

'providers' => [
    'users' => [
        'driver' => 'eloquent',
        'model' => \App\Domains\Organization\Models\User::class,
    ],
],

A newly created Laravel application provides a default guard and provider configuration suited to the needs of an application that only delivers web pages and generates the HTML of its pages entirely on the server side.

The default guard is “session” – which uses session cookies to establish whether the request comes from an authenticated user – and the default provider is the “database” that retrieves the registered users information via Eloquent.

If you are not using a traditional relational database to store your users, you can extend Laravel with your own authentication user provider. Here is an example from the official documentation:

<?php
 
namespace App\Providers;
 
use App\Extensions\MongoUserProvider;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    // ...
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Auth::provider('mongo', function (Application $app, array $config) {
            // Return an instance of Illuminate\Contracts\Auth\UserProvider...
 
            return new MongoUserProvider($app->make('mongo.connection'));
        });
    }
}

Than you can change the default provider in the configuration file:

'providers' => [
    'users' => [
        'driver' => 'mongo',
    ],
],

Finally, you must reference this new provider in the guards configuration:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
],

There are many situations where the default configuration is not enough. For example, the case in which your application offers RESTful APIs or if it’s the backend of a Single Page Application. In this case, you need to include and configure other authentication services offered by the Laravel ecosystem.

For example, in the case of the API server, you should opt for a token-type guard, which allows you to recognize clients authenticated by a specific token present in the request. Personally I use a Laravel first-party package called Passport that implements a complete OAuth server so I can manage authentication for frontend and backend API with the same framework and a very granular logic.

User eloquent model as authentication provider

It's not a coincidence that the App\Models\User class does not directly extend the basic Eloquent Model class, but the Illuminate\Foundation\Auth\User class. This allows us to identify it as an appropriate model to be a provider for the users of the application.

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];
}

Check if a session is authenticated

HTTP requests coming from a client that has successfully completed authentication can be spotted at various points in the stack. This allows you to intervene in appropriate ways to prevent certain actions or modify the application behaviors accordingly.

You can perform this check in controllers, views and even routes. Both individual endpoints and grouped routes.

The best way to enforce mandatory authentication on endpoints is using middleware. Laravel provides two built-in middlewares:

• guest – for routes accessible from unauthenticated clients;
• auth – for routes accessible only by authenticated users;

These middlewares are available as "route-specific" middlewares and can therefore be applied to each route, independently of any other middleware.

Navigate to the App\Http\Kernel class or in the bootstrap/app.php file inside the withMiddleware() method.

/**
* The application's route middleware.
*
* These middlewares may be assigned to groups or used individually.
*
* @var array
*/
protected $middlewareAliases = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
	
    ...
];

You can use them to control access to your routes:

// The home page is accessible to everyone
Route::get('/', [WebsiteController:class, 'home']);

// Register routes are accessible only to unauthenticated users
Route::get('/register', [RegisterController::class, 'create'])
	->name('register')
	->middleware('guest');

Route::post('/register', [RegisterController::class, 'store'])
	->middleware('guest');

// Dashboard is accessible only to authenticated users
Route::get('/dashboard', [DashboardController::class, 'home'])
	->middleware('auth');

The difference between GUEST and AUTH route middlewares

The "guest" middleware is used to restrict access to certain routes or actions to unauthenticated users only.

Restrict access to unauthenticated users?

Yes, in fact as you can see in the snippet above the class associated with the guest middleware is "RedirectIfAuthenticated".

So guest allows you to make the routes accessible if you are a “free” user, but the moment you authenticate to the website Laravel will redirect you to the "private" section of the application. You can’t navigate "guest routes" if you are authenticated.

In a nutshell, "guest" is useful for the registration page, not in an e-commerce product page :).

The purpose of the auth middleware, however, is not at all ambiguous. It checks if the current Request is authenticated. Otherwise you are redirected to the public section of the application, such as the login page.

Authentication In Laravel Blade Template

At this point, you may want to change the behavior of some of your application pages to show different content depending on whether it is a visitor or an authenticated user. To do this, we can use the @auth directive:

@auth
    <span>Welcome {{ auth()->user()->name }}</span>
@else
    <a href="{{ route('login') }}">Login</a>
    <a href="{{ route('register') }}">Register</a>
@endauth

The @auth and @guest directives operate like an if statement, thus allowing portions of the view to be rendered if the rendering of the view is requested by an authenticated user or a visitor respectively.

How to get the authenticated user

Laravel provides you with a built-in service called "Auth" that allows you to operate transparently with the underlying user providers and guards.To access the Auth service you can use the Facade Illuminate\Support\Facades\Auth, or the helper function auth().

use Illuminate\Support\Facades\Auth;

// Access the authenticated User instance
$name = Auth::user()->name;
$name = auth()->user()->name;

// Check if the current session is authenticated
if (Auth::check()) {
	// User logged in
}

Logout: Terminate an authenticated session in Laravel

In your routes/web.php you should have the logout route:

Route::get('logout', [LoginController::class, 'logout')->middleware('auth');

In the LoginController.php

public function logout(Request $request) 
{
    Auth::logout();
    return redirect('/login');
}

Now, you are able to logout using yourdomain.com/logout URL or if you have created a logout button, add href to "/logout".

The logout method will clear the authentication information in the user’s session.

Logout other devices

Invalidating sessions on other devices Laravel also provides a mechanism for invalidating and "logging out" user sessions that are active on other devices without invalidating the session on their current device. This feature is typically used when a user changes or updates their password and you want to invalidate sessions on other devices while maintaining the authenticity of the current device.

To implement this feature Laravel provides a built-in middleware that you should add to the “web” middleware group: \Illuminate\Session\Middleware\AuthenticateSession

'web' => [
    // ...
    \Illuminate\Session\Middleware\AuthenticateSession::class,
    // ...
],

Once the middleware is attached you can use the logoutOtherDevices() method on the Auth service.

use Illuminate\Support\Facades\Auth;

public function logoutOtherDevices(Request $request)
{
    $password = $request->input('password');

    if (Hash::check($password, Auth::user()->password)) {
        Auth::logoutOtherDevices($password);
        
        // Optionally, you can regenerate the user's session ID
        $request->session()->regenerate();
        
        return redirect()->back()->with('success', 'Logged out from other devices successfully.');
    }

    return redirect()->back()->withErrors(['password' => 'Invalid password.']);
}

After the logoutOtherDevices method is executed, the user remains logged in on the current device, but all other sessions associated with that user are terminated. When the user tries to access the application from other devices, they will be required to log in again.After logging out from other devices, you can optionally regenerate the user's session ID using $request->session()->regenerate() to further enhance security.

You can follow me on Linkedin or X. I post about building my SaaS product.

Monitor your PHP application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the composer package and you are ready to go.

Inspector is super easy and PHP friendly. You can try our Laravel or Symfony package.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

The peculiarity of Livewire is that it allows the development of a "modern" web application without the need to use dedicated JavaScript frameworks.

With Livewire it is possible to develop Blade components that offer a level of reactivity equal to that offered by Vue or React, without the need to manage the complexity of a project with a decoupled frontend and backend. You can continue developing your application within the borders of Laravel and Blade templates.

How Livewire Works

Livewire is a Composer package that you can add to a Laravel project. It must then be activated on each HTML page (or the page, in case you want to create a Single Page Application) using appropriate Blade directives. Livewire components consist of a PHP class and a Blade file that contains the logic of how a specific frontend component works and it must be rendered.

When the browser asks to access a page where Livewire is used, the following happens:

• The page is rendered with the initial states of the component, like any page created using Blade;
• When the component UI fires an interaction an AJAX call is made to an appropriate route indicating the Livewire component and the interaction that occurred, plus the status of the component;
• The data is processed in the PHP part of the component, which performs the new rendering as a result of the interaction and sends it back to the browser;
• The DOM of the page is changed according to the changes received from the server.

It's very similar to what Vue and React do, but in this case the reactivity logic to respond to an interaction is managed by the backend and not in the javascript side.

To help you better understand the logic I’ll show you an example of this comparison below.

If you want to learn more about the challenges of building a developers driven company, you can follow me on Linkedin or X.

How to install Laravel Livewire

Livewire installation is absolutely minimal. Install the Composer package in your Laravel project and add the necessary Blade directives to all pages (or to the common layout from which all Blade templates in the project are derived).

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

composer require livewire/livewire

<html>
<head>
    ...

    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

How to create a Laravel Livewire Component

Once the Composer package is installed, a new Artisan make sub-command is available to create a new Livewire component. Each component will be made with a PHP class and a Blade view.

It's similar to the class-based components of Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED 🤙

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

The component in this example will "spy" what is written in an HTML input field, without the need to write JavaScript code.

We then insert a public property to the component class:

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;
 
use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

Implement the component view as follows:

// resources/views/livewire/spy-input.blade.php

<div>
    <label>Type here:</label>
    <input type="text" wire:model="message"/>
    <span>You typed: <span>{{ $message }}</span></span>
</div>

And finally put the Livewire component in a blade view:

<html>
<head>
    @livewireStyles
</head>
<body>

    <livewire:spy-input />

    @livewireScripts
</body>
</html>

In a normal Blade component all public properties of the component class are visible in the blade template. So in <span>{{ $message }}</span> the value of the $message property will be automatically displayed. In a normal class based component, however, this only happens on the first component rendering. If you type something in the input field nothing changes in the span tag.

In the Livewire component, however, we used the wire:model="message" attribute in the field. This attribute ensures that the value of the input field is linked to the $message property in the PHP class. When you write the new value in the input field it is sent to the server, which updates the value of $message and performs a new render, sending it back to the frontend which, then, updates the text in <span>{{ $message }}</span>.

By opening the Network tab of the browser's development tools, we will notice that on each key press on the keyboard makes a call to the server on the route below:

/livewire/message/<COMPONENT-NAME>

The response to each call contains the new rendered HTML for the component, which Livewire will insert into the page in place of the old one. Various custom wire attributes are available. For example you can execute a public method of the component class when clicking on a button. Here is an example of this biding:

<button wire:click="doSomething">Click Here</button>

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

where doSomething is a public method of the PHP class of the Livewire component.

Integration with other Laravel features

The PHP class connected to the component behaves like any other PHP class in a Laravel project. The only difference is that it uses the mount method instead of the classic __construct class constructor to initialize the public properties of the class.

{{-- Initial assignment of the the $book property in the ShowBook class --}}
<livewire:show-book :book="$book">

class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

You can also use the protected property $rules to configure the validation restrictions on the data sent from the frontend to the backend. You have to call the validate() method to validate the data:

<form wire:submit.prevent="saveBook">
    <input type="text" wire:model="title"/>
    @error('title') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="excerpt"/>
    @error('excerpt') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="isbn"/>
    @error('isbn') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Book</button>
</form>

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

Or you can use PHP Attributes to declare the desired validation rules for a class property:

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

In general, each Livewire component behaves in the ways that a Laravel developer expects from a PHP class inside a Laravel project. Thus allowing the creation of reactive web interfaces without the need to separate the development projects between Laravel and Vue/React.

Monitor your Laravel application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel package and you are ready to go.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

This article can help you understand how secure your application is from this point of view or if it is necessary to make some changes in your PHP app to increase security.

Spoiler: Despite the title of the article, Laravel doesn't use a salt to hash your user's password, PHP does.

You can follow me on Linkedin or X. I post about building my SaaS product.

Hashing is different from Encryption

To avoid any misunderstanding, let me clarify that Hashing and Encryption are two very different things. Hashing is one way. Starting from a hash you cannot get back to the original string. Encryption instead is two ways. You can encrypt and decrypt strings.In fact these two features are provided through two different Laravel Facades: Illuminate\Support\Facades\Hash (for hashing), Illuminate\Support\Facades\Crypt (for encryption).

In the case of passwords, we want to store the hash so even in case of a data breach there is no way to get back the original password so the user credentials still protected.

How does Laravel make the password hash?

Obviously with the make method on the Hash service:

\Illuminate\Support\Facades\Hash::make(‘password’);

// Output
$2y$10$PeZ29z5axgJUZiy01tMBMuQuego6WLCDUV34LJbVowg4AKcZFl4mC

If you run this instruction multiple times you will get a different result each time:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

$2y$10$PeZ29z5axgJUZiy01tMBMuQuego6WLCDUV34LJbVowg4AKcZFl4mC
$2y$10$cYoHztp3QwzRvdTmzEE5xeXfXjbc6Ix3C9LhBungA/DIHcBLtgAE2
$2y$10$Mz30EAiaHtZZ1J5m6yrVbuHJcZr4r4iV.RYGX8I.pZ9tT2wThGPKW

So, How the hell does Laravel compare two passwords to check if they are the same? It's the check we need to do when a user is logging in.

The counter part of the make() method is check():

use Illuminate\Support\Facades\Hash;

// Stored hashed password retrieved from the database
$storedHash = '$2y$10$Oi4mNb5kKDWtVzbs6fLCie.Uy1eG1n0BnDO1QazrF8b1/LJZVWJSO';

// User-provided password during login attempt
$userInputPassword = 'password';

// Verify if the user-provided password matches the stored hash
if (Hash::check($userInputPassword, $storedHash)) {
    echo "Password verified!";
} else {
    echo "Invalid password!";
}

Laravel Password Hashing is a wrapper of PHP password functions The Laravel password hashing component is an abstraction to use two native PHP functions with a predefined setup: password_hash, and password_verify. Both are a native wrappers of the low level crypt function.

This are the internal implementation of the two methods in the Laravel BcryptHasher:

Hash::make($password);

public function make($value, array $options = [])
{
    $hash = password_hash($value, PASSWORD_BCRYPT, [
        'cost' => $this->cost($options),
    ]);

    if ($hash === false) {
        throw new RuntimeException('Bcrypt hashing not supported.');
    }

    return $hash;
}

Hash::check($password, $storedHash);

public function check($value, $hashedValue, array $options = [])
{
    if (is_null($hashedValue) || strlen($hashedValue) === 0) {
        return false;
    }

    return password_verify($value, $hashedValue);
}

As mentioned in the PHP documentation:

password_hash() uses a strong hash, generates a strong salt, and applies proper rounds automatically. password_hash() is a simple crypt() wrapper and compatible with existing password hashes. Use of password_hash() is encouraged.

In the examples above I reported some results of the Hash::make() that are the result of the password_hash() function eventually. You can notice the same pattern at the beginning of the string. It's a composition of the algorithm, cost and salt as part of the returned hash. Therefore, all information that's needed to verify the hash is included in it. This allows the password_verify() function to verify the hash without needing separate storage for the salt or algorithm information.

Internally, the password_verify() function works by performing the following steps:

Extracting Parameters: It extracts the parameters stored within the hash string itself. These parameters include the hashing algorithm, the cost, and the salt.

Hashing the Input Password: Using the extracted parameters, password_verify() rehashes the user-provided password using the same algorithm, salt, and cost factor that were used to generate the stored hash.

Comparison: After rehashing the input password, it compares the resulting hash with the stored hash. If the two hashes match, the input password is correct.

Here is an example of how the password_verify() function can be implemented in plain PHP so you can understand the process:

function password_verify($userInputPassword, $storedHash) {
    // Extract parameters from the stored hash
    $params = explode('$', $storedHash);
    $algorithm = $params[1];
    $cost = (int)$params[2];
    $salt = $params[3];

    // Rehash the user input password using the extracted parameters
    $rehashedPassword = crypt($userInputPassword, '$' . $algorithm . '$' . $cost . '$' . $salt);

    // Compare the rehashed password with the stored hash
    if ($rehashedPassword === $storedHash) {
        return true;
    } else {
        return false;
    }
}

Security considerations

password_hash() already generates a strong hash with a salt. From the Laravel configuration you can eventually change the cost factor through the bcrypt.rounds parameter in the config/hashing.php file.

/*
|--------------------------------------------------------------------------
| Bcrypt Options
|--------------------------------------------------------------------------
|
| Here you may specify the configuration options that should be used when
| passwords are hashed using the Bcrypt algorithm. This will allow you
| to control the amount of time it takes to hash the given password.
|
*/

'bcrypt' => [
	'rounds' => env('BCRYPT_ROUNDS', 10),
],

Increasing the cost factor (number of rounds) in the Bcrypt algorithm generally improves the security of passwords by making password hashing more computationally intensive and resistant to brute-force attacks.

For example the default value of the rounds parameter is 10, I use 12 in my application to strengthen my passwords a bit.

Monitor your PHP application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the composer package and you are ready to go.

Inspector is super easy and PHP friendly. You can try our Laravel or Symfony package.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

Vitest, a newer framework in the Vite ecosystem, is known for its speed and lightweight design. Using Vite's dev server, Vitest performs very well, especially in larger projects. It works with most Jest APIs, making it easier for teams already using Jest to switch.

While Jest has a bigger community and more third-party tools, Vitest offers native TypeScript support and better integration with ES Modules. Both frameworks can test front-end and back-end code, but Vitest works especially well with Vite-based projects, giving it an advantage in that area.

Setting the Stage

Our application is a simple Express.js API that shows basic CRUD operations. We have an app.js file that sets up our Express app and imports routes from a routes.js file. This keeps our code organized and easy to maintain. The routes.js file has three endpoints: a root endpoint that returns a welcome message, a GET endpoint to get a list of users, and a POST endpoint to create a new user.

app/
├── app.js
├── routes.js
├── server.js
├── test/
│   └── routes.test.js
├── package.json

Our API is simple on purpose so we can focus on testing. The GET /users endpoint returns a hardcoded list of users. The POST /users endpoint simulates creating a user by accepting a name in the request body and returning a new user object with a generated ID. This simplicity helps us focus on how our tests are structured and how they interact with our Express app.

const request = require('supertest');
const app = require('../app');

describe('API Routes', () => {
    test('GET / should return welcome message', async () => {
        const res = await request(app).get('/');
        expect(res.statusCode).toBe(200);
        expect(res.body).toHaveProperty('message', 'Welcome to the Express Jest Demo API!');
    });

    test('GET /users should return list of users', async () => {
        const res = await request(app).get('/users');
        expect(res.statusCode).toBe(200);
        expect(res.body).toBeInstanceOf(Array);
        expect(res.body).toHaveLength(2);
        expect(res.body[0]).toHaveProperty('id');
        expect(res.body[0]).toHaveProperty('name');
    });

    test('POST /users should create a new user', async () => {
        const res = await request(app)
            .post('/users')
            .send({ name: 'Test User' });
        expect(res.statusCode).toBe(201);
        expect(res.body).toHaveProperty('id');
        expect(res.body).toHaveProperty('name', 'Test User');
    });

    test('POST /users should return 400 if name is missing', async () => {
        const res = await request(app)
            .post('/users')
            .send({});
        expect(res.statusCode).toBe(400);
        expect(res.body).toHaveProperty('error', 'Name is required');
    });
});

To ensure our API functions correctly, we've implemented a suite of Jest test cases. These tests are located in the tests/routes.test.js file and use the Supertest library to make HTTP requests to our Express app. Let's break down the test cases:

1. Welcome Message Test: This test verifies that the root endpoint (GET /) returns the expected welcome message with a 200 status code.

2. User List Retrieval Test: Here, we check if the GET /users endpoint returns an array of users with the correct structure and a 200 status code.

3. User Creation Test: This test ensures that the POST /users endpoint successfully creates a new user when provided with a valid name, returning the created user object with a 201 status code.

   Our Amazing Sponsors

   View Website

   DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

   View Website

   Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

   View Website

   A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

4. User Creation Error Handling Test: We also test the error case where a name is not provided in the request body, expecting a 400 status code and an appropriate error message.

These test cases check the basic functions of our API to make sure it works correctly in different situations. By using Jest and Supertest, we can simulate HTTP requests and verify the responses, which helps us trust our API's behavior without doing manual tests.

Step-by-Step Migration Process

Installing Vitest

The first step in our migration process is to update our project dependencies. We'll need to remove Jest and install Vitest along with some related packages. Here's how we can do that:

1. Removing Jest dependencies Let's start by removing Jest and any Jest-related packages from our project. Open your terminal and run the following command:

   npm uninstall jest
   

2. Adding Vitest and related packages Now that we've removed Jest, let's install Vitest and the necessary related packages:

   npm install --save-dev vitest supertest @vitest/coverage-v8
   

Configuring Vitest

While Vitest works out of the box for many projects, we'll create a configuration file to ensure smooth integration with our Express.js app. Create a new file named vitest.config.js in your project root with the following content:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
  },
})

This configuration tells Vitest to use the Node.js environment for our tests, which is appropriate for our Express.js application.

We also need to update our package.json file to use Vitest instead of Jest for running tests. Replace the "test" script in your package.json with the following

"scripts": {
  "test": "vitest",
  "coverage": "vitest run --coverage"
}

This change allows us to run tests with npm test and generate a coverage report with npm run coverage.

Updating Test Files

Now that we have Vitest installed and set up, we need to update our existing test files. Luckily, Vitest is mostly compatible with Jest, so we only need to make a few changes. Let's update our test files to work with Vitest.

The first step in updating our test files is to change the import statements. Unlike Jest, which automatically makes test functions like describe, it, and expect available globally, Vitest requires us to import these functions explicitly (unless you've enabled globals in your Vitest config, which we did earlier).

import { describe, it, expect } from 'vitest';

While Vitest aims to be compatible with Jest, there are a few syntax differences to be aware of:

• Vitest uses test and it interchangeably, just like Jest.

• Vitest handles async tests in the same way as Jest, so your existing async tests should work without modification.

• Vitest supports the same beforeEach, afterEach, beforeAll, and afterAll hooks as Jest. No changes are needed for these.

If you're using Jest's mocking capabilities, you might need to make some adjustments. Vitest provides its own mocking functions that are similar to Jest's. For example:

• Replace jest.fn() with vi.fn()

• Replace jest.spyOn() with vi.spyOn()

• Replace jest.mock() with vi.mock()

Here's an example of how our updated __tests__/routes.test.js file might look after these changes:

import { describe, it, expect } from 'vitest';
import request from 'supertest';
import app from '../app';

describe('API Routes', () => {
  it('GET / should return welcome message', async () => {
    const res = await request(app).get('/');
    expect(res.statusCode).toBe(200);
    expect(res.body).toHaveProperty('message', 'Welcome to the Express Jest Demo API!');
  });

  it('GET /users should return list of users', async () => {
    const res = await request(app).get('/users');
    expect(res.statusCode).toBe(200);
    expect(res.body).toBeInstanceOf(Array);
    expect(res.body).toHaveLength(2);
    expect(res.body[0]).toHaveProperty('id');
    expect(res.body[0]).toHaveProperty('name');
  });

  it('POST /users should create a new user', async () => {
    const res = await request(app)
      .post('/users')
      .send({ name: 'Test User' });
    expect(res.statusCode).toBe(201);
    expect(res.body).toHaveProperty('id');
    expect(res.body).toHaveProperty('name', 'Test User');
  });

  it('POST /users should return 400 if name is missing', async () => {
    const res = await request(app)
      .post('/users')
      .send({});
    expect(res.statusCode).toBe(400);
    expect(res.body).toHaveProperty('error', 'Name is required');
  });
});

The changes needed to switch from Jest to Vitest are small for basic tests. The test structure and assertions stay mostly the same, making the migration easy and simple.

Potential Challenges and Solutions

While migrating from Jest to Vitest is generally straightforward, you may encounter some challenges along the way.

Vitest has better support for ESM, which might cause issues if your project uses CommonJS modules.
If you're using CommonJS (require syntax), you may need to update your import/export statements to use ESM syntax (import/export). Alternatively, you can configure Vitest to support CommonJS:

// vitest.config.js
export default {
  test: {
    environment: 'node'
  }
}

Best Practices Post-Migration

Congratulations 🎉 on successfully moving your test suite from Jest to Vitest! Now that you've switched, it's time to make the most of Vitest's features and improve your test suites. Let's look at some best practices to follow after the migration.

Utilize Concurrent Testing Vitest runs tests concurrently by default, which can significantly speed up your test suite. To take full advantage of this:

• Ensure your tests are isolated and don't depend on shared state.

• Use beforeEach and afterEach hooks to set up and tear down test environments.

  import { beforeEach, afterEach, describe, it } from 'vitest';
  
  describe('My Test Suite', () => {
    beforeEach(() => {
      // Set up test environment
    });
  
    afterEach(() => {
      // Clean up after each test
    });
  
    it('runs concurrently with other tests', () => {
      // Your test here
    });
  });
  

Use Thread-based Parallelism For CPU-intensive tests, Vitest allows you to run tests in separate threads:

// vitest.config.js
export default {
  test: {
    threads: true
  }
}

Take Advantage of Built-in Code Coverage Vitest includes built-in code coverage reporting. Enable it in your configuration:

// vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'json', 'html']
    }
  }
}

Utilize Vitest UI Vitest offers a web-based UI for running and debugging tests. Start it with:

npx vitest --ui

Conclusion

Migrating from Jest to Vitest is easy and requires only a few changes for basic tests. Vitest has many benefits, like faster test runs, built-in TypeScript support, and easy integration with the Vite ecosystem. Although Jest is older and has a bigger community, Vitest's speed and modern features make it a great choice, especially for projects using Vite or those needing a lightweight solution.

Frequently Asked Questions

What is the difference between Jest and Vitest for testing JavaScript applications?

Jest is a popular testing framework for JavaScript, especially in React apps. It has strong features like snapshot testing, mocking, and built-in code coverage. Vitest is a newer framework made for the Vite ecosystem, offering faster test runs and native TypeScript support. While Jest has a bigger community, Vitest is faster and works well with modern ES modules.

Why should I switch to Vitest from Jest for Vite-based projects?

Vitest is designed for Vite-based projects and provides much faster performance by using Vite’s dev server. It supports most of Jest's APIs, making migration easy while keeping compatibility. If you're using Vite, Vitest offers better integration, faster tests, and improved ES module support compared to Jest.

How do I migrate my Jest tests to Vitest?

Migrating from Jest to Vitest is quite easy. First, uninstall Jest and install Vitest with its dependencies. Next, update the test configuration (e.g., vitest.config.js), change any jest.fn() to vi.fn(), and ensure your import statements are compatible. Most projects will need only a few code changes because Vitest supports many Jest-like APIs.

Is Vitest faster than Jest for testing?

Yes, Vitest is usually faster than Jest, especially for Vite-based projects. Vitest uses Vite's hot module replacement (HMR) and dev server, which makes tests run quicker. Also, Vitest runs tests at the same time by default, which boosts performance for large test suites.

Can Vitest be used for testing non-Vite projects like Express.js?

Yes, Vitest can be used for testing non-Vite projects, including back-end frameworks like Express.js. While Vitest is optimized for Vite, it supports Node.js environments, making it flexible for both front-end and back-end testing. You just need to configure vitest.config.js to use the Node environment and make a few small changes to your tests.

How do I set up code coverage in Vitest like I do in Jest?

Vitest has built-in code coverage reporting, just like Jest. To enable it, configure the vitest.config.js file with coverage options such as reporters (text, json, html). Then, run npm run coverage to generate a coverage report, which helps you track test coverage in your Vitest project.

The main goal of acceptance testing are to :

• Ensure the system or software meets the specified functional and non-functional requirements.

• Verify that the system or application satisfies the end-user's expectations and needs.

• Confirm the system or application is ready for deployment and can be used in a production environment.

Instead of the development team, end users, business stakeholders, or customers frequently conduct acceptance testing. This guarantees a dispassionate assessment of the program from the viewpoint of its users.

What are Key Characteristics of Acceptance Testing?

Acceptance tests are useful for verifying whether a software product satisfies user or customer requirements and expectations because they have a few essential features.

• The end-user or customer is the one who writes acceptance tests. They put a lot of effort into making sure the delivered product meets the needs of its intended users by confirming that the software behaves as expected in practical situations.

  Our Amazing Sponsors

  View Website

  DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

  View Website

  Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

  View Website

  A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• Clear pass/fail criteria are used in acceptance tests. The test's result ought to be unambiguous and binary, meaning it should either pass or fail. Having this clarity aids in deciding whether to release the software or not.

• Acceptance tests should have a manageable scope even though they strive to cover every important component of the program. The objective is to test the most crucial features and functionalities rather than a large number of tests that might be challenging to manage.

• Although acceptance tests aim to cover every significant aspect of the program, their scope should be manageable. Instead of testing numerous features and functionalities that could be difficult to manage, the goal is to test the most important ones.

Different Types of Acceptance Testing

Acceptance testing can be categorised into multiple types, the below mentioned are few

• Business Acceptance Tests (BATs): Evaluates whether the system meets the organization's business objectives and requirements.

• User Acceptance Tests (UATs): Validates the system from the end-user's perspective to ensure it meets their requirements.

• Regulations Acceptance Testing (RAT) : Ensures the system complies with relevant laws, regulations, and industry standards.

Acceptance testing is a critical step in the software development lifecycle, as it helps to identify and address any remaining issues or defects before the system is deployed to the production environment.

What are Benefits of Acceptance Testing?

• Ensures the software meets user requirements by validating that the application aligns with the specific functional and non-functional requirements.

• Reduces the risk of delivering a product that doesn't meet expectations

• Improves communication and collaboration between stakeholders by involving the customer and business user in the testing process.

Some Best Practices for Acceptance Testing

• Involve users/customers throughout the testing process

  Engage users or customers early and often during acceptance testing to ensure that the product aligns with their needs and expectations. Their feedback is invaluable for validating whether the software meets the defined acceptance criteria. Involving them also fosters a sense of ownership and helps in catching issues that may not be apparent to developers or testers.

• Automate acceptance tests for efficiency and consistency

  Automating acceptance tests helps to streamline the testing process, allowing for faster and more reliable execution of test cases. Automated tests can be run frequently, ensuring that new changes do not introduce regressions. This not only saves time and resources but also improves the overall consistency and repeatability of the testing process, making it easier to detect defects early in the development cycle.

• Maintain clear traceability between requirements and test cases

  Establishing a clear linkage between requirements and their corresponding test cases ensures that every user story or requirement is adequately covered by the acceptance tests. This traceability helps in verifying that all aspects of the product have been tested and nothing is overlooked.

• Continuously review and update acceptance criteria

  As the project evolves, so should the acceptance criteria. Regularly reviewing and updating these criteria ensures they remain relevant and aligned with the project’s goals.

Conclusion

Acceptance testing plays a pivotal role in ensuring that software meets both functional and non-functional requirements while aligning with the expectations of end-users and stakeholders. By validating the system through real-world scenarios and involving the customer throughout the process, acceptance testing helps to deliver a product that is ready for deployment and capable of providing value to its users.

Frequently Asked Questions

Who conducts Acceptance Testing?

Acceptance testing is usually conducted by end-users, business stakeholders, or customers rather than the development team. This approach ensures an unbiased evaluation of the software from the users' perspective.

Can Acceptance Testing be automated?

Yes, acceptance tests can be automated to increase efficiency and consistency. Automation allows for frequent execution of test cases, ensuring that new changes do not introduce regressions and helps in detecting defects early in the development cycle.

What are best practices for Acceptance Testing?

• Involving users/customers throughout the testing process

• Automating acceptance tests for efficiency and consistency

• Maintaining clear traceability between requirements and test cases

• Continuously reviewing and updating acceptance criteria

Difference between Acceptance and Sandwich Testing

Acceptance Testing validates the entire system against user requirements and is performed at the end of the development cycle by end-users or stakeholders. Sandwich Testing is an integration testing method that combines top-down and bottom-up approaches to test different layers of the system simultaneously. It is usually conducted during the integration phase by developers or testers.

How do you measure the success of Acceptance Testing?

The success of acceptance testing is measured by how well the software meets the predefined acceptance criteria. A successful acceptance test means the software is approved for deployment, with any identified defects either resolved or deferred by mutual agreement.

Can Acceptance Testing be performed in Agile development?

Yes, acceptance testing can be integrated into Agile development. In Agile, acceptance tests are often written as part of the user stories, and testing is conducted iteratively throughout the development cycle, allowing for continuous feedback and adjustments.

I decided to implement this code because it makes a list of items so easy to scroll based on their history.

Group array by date in pure PHP

This implementation uses the array_reduce function. It allows to progressively create a new array where each date becomes a key, with the corresponding element as its value.

$data = [
    ['date' => '2023-06-01', 'value' => 10],
    ['date' => '2023-06-02', 'value' => 20],
    ['date' => '2023-06-01', 'value' => 30],
    ['date' => '2023-06-03', 'value' => 40],
    ['date' => '2023-06-02', 'value' => 50],
];

$groupedData = array_reduce($data, function ($result, $item) {
    $date = new DateTime($item['date']);
    $formattedDate = $date->format('Y-m-d');
    
    if (!isset($result[$formattedDate])) {
        $result[$formattedDate] = [];
    }
    
    $result[$formattedDate][] = $item;
    
    return $result;
}, []); // <-- Start with an empty array

Thanks to the DateTime object and the format method you can customize the grouping logic by month, or year, by simply changing the format string: 'Y-m' for month, or 'Y' for year.

Filtering and grouping

You can also introduce a filter function to filter the elements before grouping them by the date field.

$groupedData = array_reduce(array_filter($data, function ($item) use ($filter) {
		// Filter condition: keep elements with value greater than 20
		return $item['value'] > $filter;
	}), 
	function ($result, $item) {
		$date = new DateTime($item['date']);
		$formattedDate = $date->format('Y-m-d');
		
		if (!isset($result[$formattedDate])) {
			$result[$formattedDate] = [];
		}
		
		$result[$formattedDate][] = $item;
		
		return $result;
	}, []);

Inside the callback function of array_filter(), we specify the filter condition. In this example, we keep only the elements where the ‘value’ field is greater than $filter. You can modify this condition based on your specific use case.

Showing results in the UI with Laravel blade

Obviously you can take inspiration and use the same strategy in your specific technology (like Symfony + Twig, or similar).

To keep the data manipulation statements separated from the view I keep the filtering and grouping process at the controller level, and I implement only the data structure iteration on the template side.

Here is the Controller:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

namespace App\Http;


use Illuminate\Http\Request;


class DashboardController extends Controller
{
    /**
     * The dashboard.
     *
     * @param ImpersonatesUsers $impersonator
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index(Request $request)
    {
		$data = $this->getData();
		
		$data = array_reduce(array_filter($data, function ($item) use ($filter) {
			// Filter condition: keep elements with value greater than 20
			return $item['value'] > $filter;
		}), 
		function ($result, $item) {
			$date = new DateTime($item['date']);
			$formattedDate = $date->format('Y-m-d');
			
			if (!isset($result[$formattedDate])) {
				$result[$formattedDate] = [];
			}
			
			$result[$formattedDate][] = $item;
			
			return $result;
		}, []);
		
        return view('dashboard', compact('data'));
    }
}

And here is the blade view:

<ul>
    @foreach ($groupedData as $date => $items)
        <li>
            <strong>{{ $date }}</strong>
            <ul>
                @foreach ($items as $item)
                    <li>Value: {{ $item['value'] }}</li>
                @endforeach
            </ul>
        </li>
    @endforeach
</ul>

Group a Laravel Collection by date

Thanks to the builtin utilities provided by the Laravel Collection class it's really straightforward:

$groupedData = collect($data)->groupBy(function ($item) {
    return Carbon::parse($item->date)->format('Y-m-d');
});

You can follow me on Linkedin or X. I post about building my SaaS business.

Monitor your PHP application for free

Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the composer package and you are ready to go.

Inspector is super easy and PHP friendly. You can try our Laravel or Symfony package.

If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.

Or learn more on the website: https://inspector.dev

The Laracon US 2024 keynote by Taylor Otwell just wrapped up, and there are some exciting new features coming to the Laravel ecosystem. Let's break down the key announcements!

You can watch the video here if you prefer too:

1. Laravel Cloud ☁️

Laravel Cloud is set to change how we deploy Laravel applications:

• 🚀 Deploy from GitHub to a live URL in under a minute
• 🔄 Automatic scaling and load balancing
• 🐘 Serverless PostgreSQL databases that auto-scale
• 💤 App and database hibernation to reduce costs
• 🌿 Branch-based preview environments
• 🧑‍🔧 Integrated queue workers and job processing

This platform aims to make deployment fast and worry-free for Laravel developers.

Larave Forge which we all love, will still remain if this is your thing!

2. Inertia 2.0 ✨

Inertia.js is getting a major upgrade with version 2.0:

• 🏎️ Async requests for better performance
• 🔄 Easy data polling
• 👀 "When visible" lazy loading
• 🛝 Helpers for infinite scrolling
• 🏃‍♂️ Page prefetching for faster navigation
• 🚚 Deferred props to optimize initial page loads

These features will help create more responsive and faster-loading applications with Inertia.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

3. Official VS Code Extension 💻

I don't know about you but this is a huge thing for me! I wrote a post on the VS Code extensions that I am using and it will be great to update that post and just include that official VS Code extension!

8 Awesome VS Code Extensions for Laravel Developers

Laravel is releasing an official Visual Studio Code extension:

• 🧠 Enhanced autocompletion for Laravel code
• 🕵️ Improved error detection
• 🗺️ Easy navigation between related files
• 🧪 Built-in testing tools

This extension will make Laravel development in VS Code more efficient and user-friendly.

4. Framework Updates 🛠️

The improvements to the Framework are worth of a totally separate post themselves! But some of the the Laravel framework new features that were announce were:

• 🎯 Container attributes for simpler dependency injection
• 🏃‍♂️ Deferred functions for background processing without queues
• 🚦 Concurrency facade for parallel processing
• 🧊 Improved caching with flexible time-to-live options
• 🗄️ Local private file serving

I love the new deffered functions! A game changer for simple tasks where you don't want to introduce jobs and queues.

These updates focus on improving performance and simplifying common tasks.

5. Design Improvements 🎨

The Laravel team is also focusing on design:

• Refreshing the Laravel.com website
• Creating a new brand resource site
• Improving the documentation experience

These changes aim to enhance the overall Laravel brand and make resources more accessible.

Conclusion

Laracon US 2024 has shown that Laravel continues to evolve and improve. From Laravel Cloud to Inertia 2.0, the VS Code extension, and core framework updates, there's a lot to look forward to in the Laravel ecosystem.

Keep an eye on the official Laravel channels for more information about release dates and how to get early access to Laravel Cloud.

What new feature are you most excited about? We'd love to hear your thoughts!

Hello there!

I'm Bobby, a Docker Captain and the author of the free Introduction to Docker eBook. In this guide, we'll dive deep into containerizing a microservices architecture using Docker and Redpanda, a Kafka-compatible event streaming platform.

As we progress through 2024, microservices and event-driven architectures continue to be at the leading approach of modern application development, and Docker remains an indispensable tool for deploying and managing these complex systems.

Prerequisites

Before we go any further, make sure that you have:

• Docker and Docker Compose installed on your system
• Basic knowledge of Docker, microservices concepts, and event streaming

If you're new to Docker or need a refresher, I highly recommend checking out my free Introduction to Docker eBook. It covers all the fundamentals you'll need to follow along with this guide.

Our Example Architecture

For this article, we'll build a simple e-commerce platform with the following microservices:

1. Product Service (Go)
2. User Service (Python)
3. Order Service (Node.js)
4. API Gateway (Nginx)
5. Event Streaming Platform (Redpanda)
6. Database (PostgreSQL)

This architecture demonstrates a typical microservices setup, with each service responsible for a specific domain and communicating through both REST APIs and event streaming.

An example diagram of the architecture is shown below. The client apps (web, mobile, etc.) interact with the API Gateway, which routes requests to the appropriate microservices. The services communicate with a PostgreSQL database for persistent storage and with Redpanda for event streaming.

                  +-------------------+
                  |    Client Apps    |
                  | (Web, Mobile, etc)|
                  +---------+---------+
                            |
                            | HTTP/HTTPS
                            |
                  +---------v---------+
                  |                   |
                  |    API Gateway    |
                  |     (Nginx)       |
                  |                   |
                  +----+------+-------+
                       |      |
           +-----------+      +-----------+
           |                              |
     +-----v------+  +-----------+  +-----v------+
     |            |  |           |  |            |
     |  Product   |  |   User    |  |   Order    |
     |  Service   |  |  Service  |  |  Service   |
     |   (Go)     |  | (Python)  |  | (Node.js)  |
     |            |  |           |  |            |
     +-----+------+  +-----+-----+  +-----+------+
           |              |              |
           |              |              |
    +------v--------------v--------------v------+
    |                                           |
    |              PostgreSQL                   |
    |              Database                     |
    |                                           |
    +-------------------------------------------+
                       |
                       | (Event Streaming)
                       |
               +-------v-------+
               |               |
               |   Redpanda    |
               |               |
               +-------+-------+
                       |
                       | (External Systems)
                       |
               +-------v-------+
               | Notifications |
               |   Analytics   |
               | Materialize   |
               | Other Services|
               +---------------+

Step 1: Dockerizing Individual Services

Let's start by creating Dockerfiles for each service and include some basic code examples. We'll go through each service, explaining the Dockerfile and the code in detail.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Product Service (Go)

Dockerfile:

FROM golang:1.21-alpine AS builder
WORKDIR /app
COPY . .
RUN go build -o main .

FROM alpine:3.18
COPY --from=builder /app/main /app/main
CMD ["/app/main"]

This Dockerfile uses a multi-stage build:

1. The first stage uses the golang:1.21-alpine image to build our Go application.
2. The second stage uses a minimal alpine:3.18 image and copies only the compiled binary from the first stage.
3. This approach significantly reduces the final image size by excluding all build tools and intermediate files.

Basic Go code (main.go):

package main

import (
    "encoding/json"
    "log"
    "net/http"
)

type Product struct {
    ID    string  `json:"id"`
    Name  string  `json:"name"`
    Price float64 `json:"price"`
}

func main() {
    http.HandleFunc("/products", func(w http.ResponseWriter, r *http.Request) {
        products := []Product{
            {ID: "1", Name: "Product 1", Price: 19.99},
            {ID: "2", Name: "Product 2", Price: 29.99},
        }
        json.NewEncoder(w).Encode(products)
    })

    log.Fatal(http.ListenAndServe(":8080", nil))
}

This Go code:

1. Defines a simple Product struct.
2. Creates an HTTP server that listens on port 8080.
3. Implements a /products endpoint that returns a JSON array of product data.
4. In a real-world scenario, this would interact with a database instead of using hardcoded data but for simplicity, we're using hardcoded data.

User Service (Python)

Dockerfile:

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["python", "app.py"]

This Dockerfile:

1. Uses the official Python 3.11 slim image as the base.
2. Sets the working directory to /app.
3. Copies and installs the Python dependencies first (for better caching).
4. Copies the rest of the application code.
5. Specifies the command to run the Python application.

Basic Python code (app.py):

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/users')
def get_users():
    users = [
        {"id": "1", "name": "John Doe"},
        {"id": "2", "name": "Jane Smith"}
    ]
    return jsonify(users)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8081)

This Python code:

1. Uses Flask to create a simple web server.
2. Defines a /users endpoint that returns a JSON array of user data.
3. Runs the server on port 8081 and binds to all available network interfaces (0.0.0.0).
4. Like the product service, in a real-world scenario, this would interact with a database.

Order Service (Node.js)

Dockerfile:

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
CMD ["node", "server.js"]

This Dockerfile:

1. Uses the official Node.js 20 Alpine image as the base.
2. Sets the working directory to /app.
3. Copies package.json and package-lock.json files first.
4. Installs production dependencies using npm ci for faster, more reliable builds.
5. Copies the rest of the application code.
6. Specifies the command to run the Node.js application.

Basic Node.js code (server.js):

const express = require('express');
const { Kafka } = require('kafkajs');

const app = express();
const kafka = new Kafka({
  clientId: 'order-service',
  brokers: ['redpanda:9092']
});

const producer = kafka.producer();

app.use(express.json());

app.post('/orders', async (req, res) => {
  const order = req.body;
  await producer.connect();
  await producer.send({
    topic: 'orders',
    messages: [{ value: JSON.stringify(order) }],
  });
  await producer.disconnect();
  res.status(201).json({ message: 'Order created' });
});

app.listen(8082, () => console.log('Order service listening on port 8082'));

This Node.js code:

1. Uses Express to create a web server.
2. Configures a Kafka producer to connect to our Redpanda service.
3. Implements a POST /orders endpoint that:
   • Receives order data in the request body.
   • Sends the order data to a Kafka topic named 'orders'.
   • Responds with a success message.
4. This service demonstrates how to integrate with Redpanda for event streaming.

Step 2: Creating the Docker Compose File

Now, let's create a compose.yaml file to orchestrate our microservices. We'll go through each section of the Compose file in detail:

version: '3.9'

services:
  product-service:
    build: ./product-service
    ports:
      - "8080:8080"
    environment:
      - DB_HOST=postgres
    depends_on:
      - postgres

  user-service:
    build: ./user-service
    ports:
      - "8081:8081"
    environment:
      - DB_HOST=postgres
    depends_on:
      - postgres

  order-service:
    build: ./order-service
    ports:
      - "8082:8082"
    environment:
      - DB_HOST=postgres
      - REDPANDA_HOST=redpanda
    depends_on:
      - postgres
      - redpanda

  api-gateway:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - product-service
      - user-service
      - order-service

  postgres:
    image: postgres:13-alpine
    environment:
      POSTGRES_PASSWORD: mysecretpassword
    volumes:
      - pgdata:/var/lib/postgresql/data

  redpanda:
    container_name: redpanda
    image: docker.vectorized.io/vectorized/redpanda:v23.3.5
    depends_on:
      - postgres
    command:
      - redpanda start
      - --overprovisioned
      - --smp 1
      - --memory 1G
      - --reserve-memory 0M
      - --node-id 0
      - --check=false
      - --kafka-addr 0.0.0.0:9092
      - --advertise-kafka-addr redpanda:9092
      - --pandaproxy-addr 0.0.0.0:8082
      - --advertise-pandaproxy-addr redpanda:8082
      - --set redpanda.enable_transactions=true
      - --set redpanda.enable_idempotence=true
      - --set redpanda.auto_create_topics_enabled=true
      - --set redpanda.default_topic_partitions=1
    ports:
      - 9092:9092
      - 8081:8081
      - 8082:8082
    healthcheck:
      test: curl -f localhost:9644/v1/status/ready
      interval: 1s
      start_period: 30s

volumes:
  pgdata:

Let's break down the key components of this Compose file:

1. Version: We're using version 3.9 of the Compose file format, which is compatible with Docker Engine 19.03.0+.

2. Services:

   • Each service is defined under the services key.
   • For our custom services (product, user, order), we use the build directive to specify the location of the Dockerfile.
   • We map ports from the container to the host for each service.
   • Environment variables are set using the environment key.
   • Dependencies between services are specified using depends_on.

3. API Gateway:

   • Uses the official Nginx Alpine image.
   • Mounts a custom Nginx configuration file.
   • Depends on all other services to ensure they're running before the gateway starts.

4. PostgreSQL:

   • Uses the official PostgreSQL Alpine image.
   • Sets a password using an environment variable.
   • Uses a named volume for data persistence.

5. Redpanda:

   • Uses the official Redpanda image.
   • Configures various Redpanda-specific options.
   • Exposes necessary ports for Kafka protocol and admin interface.
   • Includes a health check to ensure the service is ready.

6. Volumes:

   • Defines a named volume pgdata for PostgreSQL data persistence. This volume is automatically created by Docker and will persist even if the container is removed or recreated.

Step 3: Configuring the API Gateway

The API Gateway uses Nginx to route requests to the appropriate microservices. Here's a detailed explanation of the nginx.conf file:

events {
    worker_connections 1024;
}

http {
    upstream product-service {
        server product-service:8080;
    }

    upstream user-service {
        server user-service:8081;
    }

    upstream order-service {
        server order-service:8082;
    }

    server {
        listen 80;

        location /products {
            proxy_pass http://product-service;
        }

        location /users {
            proxy_pass http://user-service;
        }

        location /orders {
            proxy_pass http://order-service;
        }
    }
}

This Nginx configuration:

1. Defines upstream servers for each of our microservices.
2. Creates a server block that listens on port 80.
3. Uses location blocks to route requests to the appropriate service based on the URL path.
4. This setup allows us to access all our microservices through a single entry point.

Step 4: Running the Microservices

To start all services, use the following command:

docker compose up -d

This command:

1. Builds any images that aren't cached (on the first run or when changes are made).
2. Creates and starts containers for all services defined in the Compose file.
3. The -d flag runs the containers in detached mode (in the background).

To view the logs of all running containers:

docker compose logs -f

The -f flag "follows" the log output, showing logs in real-time.

To stop all services:

docker compose down

This stops and removes all containers defined in the Compose file. Add the -v flag to also remove volumes.

Step 5: Testing the Services

You can test the services using curl or a tool like Postman. Here are some example curl commands:

1. Get products:

   curl http://localhost/products
   

   This should return a JSON array of products.

2. Get users:

   curl http://localhost/users
   

   This should return a JSON array of users.

3. Create an order:

   curl -X POST http://localhost/orders -H "Content-Type: application/json" -d '{"productId": "1", "userId": "1", "quantity": 2}'
   

   This should return a success message and send the order data to Redpanda.

Step 6: Scaling Services

One of the advantages of this architecture is the ability to scale services independently. To scale a service, use:

docker compose up -d --scale product-service=3

This command:

1. Increases the number of product-service containers to 3.
2. The API Gateway (Nginx) will automatically load balance requests between these instances.

You can verify the running containers with:

docker compose ps

Step 7: Monitoring and Logging

For a production environment, you'd want to add monitoring and centralized logging. Here's a basic example of adding Prometheus for monitoring:

Add this to your compose.yaml:

  prometheus:
    image: prom/prometheus
    ports:
      - "9090:9090"
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml

Create a prometheus.yml file:

global:
  scrape_interval: 15s

scrape_configs:
  - job_name: 'prometheus'
    static_configs:
      - targets: ['localhost:9090']

  - job_name: 'redpanda'
    static_configs:
      - targets: ['redpanda:9644']

This setup will allow Prometheus to scrape metrics from itself and Redpanda.

Conclusion

Docker Compose is awesome for local development environments and cross-team collaboration by providing a unified, easily shareable configuration that ensures consistent setup across different machines, allowing developers to quickly spin up the entire microservices ecosystem with a single command, regardless of their individual development environments. For production deployments, you'd typically use a container orchestration platform like Kubernetes or Docker Swarm.

If you're looking to dive deeper into Docker and container orchestration, don't forget to check out my free Introduction to Docker eBook. It provides a solid foundation for working with Docker and will help you understand the concepts we've covered here in more depth.

Also, if you're setting up your containerized microservices and need a reliable host, consider using DigitalOcean. You can get a $200 free credit to get started!

If you are already working as a DevOps engineer, check out this DevOps Scorecard and evaluate your DevOps skills across 8 key areas and discover your strengths and growth opportunities

Happy Dockerizing, and may your microservices always be scalable, resilient, and secure!

Hey! I'm Bobby, a Docker Captain and the author of the free Introduction to Docker eBook.

In this article, I'll share five Docker best practices that I wish I knew when I first started using Docker. These tips will help you avoid common mistakes and improve your Docker workflows, making your containerization journey smoother and more efficient.

Prerequisites

To follow along, you should have:

• Basic knowledge of Docker
• Docker installed on your system

If you're new to Docker, I encourage you to check out my free Introduction to Docker eBook. It covers all the basics you need to get started with Docker and will provide a solid foundation for understanding the best practices we'll discuss in this article.

Step 1 — Use Multi-Stage Builds for Smaller Images

Multi-stage builds are a powerful feature in Docker that help you create smaller, more efficient Docker images. This is crucial because smaller images offer several advantages:

1. They're faster to push and pull from registries, reducing deployment times.
2. They use less storage space, which can lead to cost savings in cloud environments.
3. They have a smaller attack surface, potentially improving security.

Here's an example of a multi-stage Dockerfile for a Go application:

# Build stage
FROM golang:1.16 AS builder
WORKDIR /app
COPY . .
RUN go build -o main .

# Final stage
FROM alpine:latest
WORKDIR /root/
COPY --from=builder /app/main .
CMD ["./main"]

Let's break this down:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

1. The first stage, labeled as builder, uses the official Go image to compile our application. This stage includes all the necessary build tools and dependencies.

2. The second stage starts from a minimal Alpine Linux image. We copy only the compiled binary from the builder stage using the COPY --from=builder command.

3. The final image contains only the compiled application and the minimal runtime requirements, resulting in a much smaller image.

By using this approach, you can significantly reduce your image size. For example, a Go application image could shrink from several hundred megabytes to just a few megabytes. This not only saves space but also reduces the time it takes to deploy your application.

Step 2 — Use .dockerignore Files

A .dockerignore file is to Docker what a .gitignore file is to Git. It helps you exclude files and directories from your Docker build context. This is important for several reasons:

1. It speeds up the build process by reducing the amount of data sent to the Docker daemon.
2. It prevents sensitive or unnecessary files from being inadvertently included in your Docker image.
3. It helps reduce the final size of your Docker image.

Here's an example of a .dockerignore file:

.git
*.md
*.log
node_modules
test

Let's go through each line:

• .git: Excludes the entire Git repository, which is usually not needed in the Docker image.
• *.md: Ignores all Markdown files, typically documentation that's not required for running the application.
• *.log: Prevents any log files from being included in the image.
• node_modules: For Node.js projects, this excludes all dependencies, which should be installed fresh during the build process.
• test: Excludes the test directory, as tests typically aren't needed in production images.

By using a .dockerignore file, your Docker builds will be faster and your images will be cleaner and more secure. It's a simple step that can make a big difference in your Docker workflow.

For more information check out the official .dockerignore documentation.

Step 3 — Implement Health Checks in Your Dockerfiles

Health checks are an important feature in Docker that help you make sure that your containers are not only running, but actually working as expected. They allow Docker to regularly check if your application is functioning correctly.

Here's an example of how to add a health check to a Dockerfile for an Nginx server:

FROM nginx:latest
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost/ || exit 1

Let's break down the health check options:

• --interval=30s: Docker will run the health check every 30 seconds.
• --timeout=3s: The health check must complete within 3 seconds, or it's considered failed.
• --start-period=5s: Docker will wait 5 seconds before running the first health check, giving the application time to start up.
• --retries=3: If the health check fails 3 times in a row, the container is considered unhealthy.

The actual health check command (curl -f http://localhost/ || exit 1) attempts to make an HTTP request to the server. If the request fails, the health check fails.

Implementing health checks offers several benefits:

1. It allows Docker to automatically restart containers that have become unhealthy.
2. In a swarm or orchestrated environment, it enables automatic rerouting of traffic away from unhealthy containers.
3. It provides a clear indicator of application health, making it easier to monitor and troubleshoot issues.

By implementing health checks, you're adding an extra layer of reliability to your containerized applications.

Step 4 — Use Docker Compose for Local Development

Docker Compose is a tool for defining and running multi-container Docker applications. It's especially useful for local development environments where you might need to run several interconnected services.

As of recent updates to Docker, the default path for a Compose file is compose.yaml (preferred) or compose.yml in the working directory. Docker Compose also supports docker-compose.yaml and docker-compose.yml for backwards compatibility. If both files exist, Compose prefers the canonical compose.yaml.

Here's an example of a compose.yaml file:

version: '3'
services:
  web:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - .:/code
    environment:
      - DEBUG=True
  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_PASSWORD=secret

This compose.yaml file defines two services:

1. web: This is your application. It builds from the current directory (.), maps port 8000, mounts the current directory as a volume for live code reloading, and sets an environment variable.

2. db: This is a PostgreSQL database using the official image. It sets up a database named myapp with a password.

To run this multi-container setup, you simply use:

docker compose up

Docker Compose offers several advantages for local development:

1. It allows you to define your entire application stack in a single file.
2. You can start all services with a single command.
3. It provides an isolated environment that closely mimics production.
4. It's easy to add or remove services as your application evolves.

By using Docker Compose, you can significantly simplify your development workflow and ensure consistency across your team.

Step 5 — Be Cautious with the Latest Tag

While using the latest tag might seem convenient, it can lead to unexpected issues and make your builds less reproducible. Here's why you should be cautious with the latest tag:

1. Unpredictability: The latest tag doesn't refer to a specific version. It usually points to the most recent version, which can change without warning.
2. Lack of consistency: Different team members or environments might pull the latest image at different times, potentially getting different versions.
3. Difficulties in debugging: If an issue arises, it's harder to pinpoint which exact version of the image is causing the problem.

Instead of using latest, it's better to specify exact versions in your Dockerfile or compose file. For example:

FROM node:18.20.4

Or in your compose.yaml:

services:
  db:
    image: postgres:13.3

By specifying exact versions:

1. You ensure that everyone on your team is using the same version.
2. You can easily reproduce builds and deployments.
3. You have more control over when and how you update your dependencies.

When you're ready to update to a new version, you can do so intentionally by changing the version number in your Dockerfile or compose file. This gives you the opportunity to test the new version thoroughly before deploying it to production.

Bonus Tip: Implement Regular Security Scans

Security should be a top priority when working with Docker images. Implementing regular security scans can help you identify and address vulnerabilities in your containers before they become a problem.

One powerful tool for this purpose is Docker Scout, which is integrated directly into Docker Desktop and the Docker CLI. Here's how you can use it:

1. First, ensure you have the latest version of Docker installed.

2. To scan an image, use the following command:

   docker scout cve <image_name>
   

   For example:

   docker scout cve nginx:latest
   

3. This command will provide a detailed report of any known vulnerabilities in the image, including severity levels and available fixes.

You can also integrate Docker Scout into your CI/CD pipeline to automatically scan images before deployment. Here's an example of how you might do this in a GitHub Actions workflow:

name: Docker Image CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Build the Docker image
      run: docker build . --file Dockerfile --tag my-image:$(date +%s)
    - name: Scan the Docker image
      run: docker scout cve my-image:$(date +%s)

By implementing regular security scans, you can:

1. Identify vulnerabilities early in your development process
2. Keep your production environments more secure
3. Stay informed about the security status of your Docker images
4. Make informed decisions about when to update your base images or dependencies

Regular scans, combined with prompt updates and patches, will help keep your Docker environments secure.

Conclusion

These tips - using multi-stage builds, leveraging .dockerignore files, implementing health checks, using Docker Compose for local development, being cautious with the latest tag and running security scans - will help you create more efficient, reliable, and maintainable Docker workflows.

If you're looking to dive deeper into Docker, I encourage you to check out my free Introduction to Docker eBook.

Also, if you're setting up your Docker environment and need a reliable host, consider using DigitalOcean. You can get a $200 free credit to get started!

Happy Dockerizing, and may your containers always run smoothly!

- Bobby

Whether you're looking to cut costs, avoid vendor lock-in, or explore new tools, open-source options offer customizable solutions that rival their proprietary counterparts.

In this article, we'll explore 17 powerful open-source tools that can effectively replace some of the most commonly used software and apps.

From diagramming and design platforms to API development and workflow automation, these alternatives are designed to enhance your productivity and workflow.

Each tool will include a direct link, category, description, top features, preview images, and links to the code and website for the initial impression.

1. Drawio

Category: Diagrams

Open Source Alternative to: LucidChart

Drawio is a free, open-source diagramming tool used for creating flowcharts, network diagrams, and other visuals.

It enhances productivity by offering an intuitive interface and seamless integration with commonly used platforms like Google Drive and GitHub.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Reasons to choose:

• Free to use with no subscription costs.
• Can be used offline, unlike many cloud-based diagramming tools.
• Integrates seamlessly with popular platforms.
• Open-source, allowing access to code and improve it.
• User-friendly interface suitable for both beginners and professionals.

👩‍💻 Github link: https://github.com/jgraph/drawio

⭐ Github stars: 40.3K

💻 Website link: https://app.diagrams.net/

2. Penpot

Category: Design

Open Source Alternative to: Figma

Penpot is an open-source design and prototyping platform for cross-domain teams.

It streamlines design workflows by enabling real-time collaboration and flexible design systems.

Reasons to choose:

• Open-source with no vendor lock-in.
• Supports real-time collaboration across teams.
• Cross-platform compatibility, working in any web browser.
• Flexible design systems for better team collaboration.
• Great community support and continuous updates.

👩‍💻 Github link: https://github.com/penpot/penpot

⭐ Github stars: 31.8K

💻 Website link: https://penpot.app/

3. Hoppscotch

Category: API Development

Open Source Alternative to: Postman

Hoppscotch is a lightweight and fast open-source API development tool.

It boosts productivity with its user-friendly interface for testing APIs without the need for complex setups.

Reasons to choose:

• Lightweight and faster than most API testing tools.
• Open-source with active community contributions.
• Supports a wide range of API types, including REST, GraphQL, and WebSocket.
• No installation required; runs in the browser.
• Simple and intuitive user interface.

👩‍💻 Github link: https://github.com/hoppscotch/hoppscotch

⭐ Github stars: 63.4K

💻 Website link: https://hoppscotch.io/

4. Supertokens

Category: Authentication

Open Source Alternative to: Okta, Auth0

Supertokens is an open-source authentication solution designed to secure web and mobile applications.

It simplifies user authentication and session management, enhancing both security and productivity.

Reasons to choose:

• Easy integration with popular front-end frameworks.
• Granular session management with strong security features.
• Support for multi-factor authentication.
• Customizable authentication workflows.
• Scalable architecture suitable for large applications.

👩‍💻 Github link: https://github.com/supertokens/supertokens-core

⭐ Github stars: 12.5K

💻 Website link: https://supertokens.com/

5. n8n

Category: Workflow Automation

Open Source Alternative to: Zapier, Make

n8n is an open-source workflow automation tool that connects different apps and services.

It enhances productivity by automating repetitive tasks and integrating with a wide range of platforms.

Reasons to choose:

• Visual workflow editor with drag-and-drop functionality.
• Pre-built integrations with various services.
• Powerful conditional logic and branching in workflows.
• Ability to self-host, ensuring full data privacy and control.
• Highly customizable with custom nodes and scripts.

👩‍💻 Github link: https://github.com/n8n-io/n8n

⭐ Github stars: 44K

💻 Website link: https://n8n.io/

6. umami

Category: Web Analytics

Open Source Alternative to: Google Analytics

umami is an open-source web analytics solution that respects user privacy.

It provides detailed insights into website performance without compromising on data privacy.

Reasons to choose:

• Lightweight and fast, reducing website load times.
• Simple, clean interface for easy navigation and data interpretation.
• Real-time data tracking and reporting.
• All data is anonymized, and no personal information is ever collected.
• Customizable dashboard and tracking capabilities.

👩‍💻 Github link: https://github.com/umami-software/umami

⭐ Github stars: 21.1K

💻 Website link: https://umami.is/

7. Seafile

Category: File Hosting

Open Source Alternative to: Google Drive

Seafile is an open-source file hosting and synchronization platform.

It improves productivity by enabling secure file sharing and collaboration within teams.

Reasons to choose:

• High-speed file synchronization with delta file transfer.
• Built-in file encryption for secure storage.
• Supports advanced permissions and role management.
• Flexible deployment options, including cross-platform support.
• Integrated wiki and document collaboration features.

👩‍💻 Github link: https://github.com/haiwen/seafile

⭐ Github stars: 12K

💻 Website link: https://www.seafile.com/

8. ceph

Category: Storage

Open Source Alternative to: Amazon S3

ceph is an open-source distributed storage system that provides object, block, and file storage.

It supports massive scalability and high availability, making it ideal for cloud environments.

Reasons to choose:

• Highly scalable, supporting petabytes of data across thousands of nodes.
• Provides unified storage for object, block, and file systems.
• Self-healing capabilities to ensure data integrity.
• Efficient use of resources with erasure coding and data compression.
• Supports multi-site replication and disaster recovery.

👩‍💻 Github link: https://github.com/ceph/ceph

⭐ Github stars: 13.7K

💻 Website link: https://ceph.io/

9. ShareX

Category: Screen Capture

Open Source Alternative to: Lightshot

ShareX is a free and open-source tool for screen capture and file sharing.

It enhances productivity with powerful screenshot, GIF creation, and file upload capabilities.

Reasons to choose:

• Extensive capture modes, including region captures.
• Built-in image editor with advanced annotation tools.
• Supports automated workflows for post-capture processing.
• Quick upload to a wide range of file hosting services.
• Customizable keyboard shortcuts for efficient usage.

👩‍💻 Github link: https://github.com/ShareX/ShareX

⭐ Github stars: 28.9K

💻 Website link: https://getsharex.com/

10. Strapi

Category: Headless CMS

Open Source Alternative to: Contentful

Strapi is an open-source headless CMS for managing content in any digital experience.

It streamlines content creation and management with a highly customizable admin panel.

Reasons to choose:

• Fully customizable API with flexible content structures.
• User-friendly admin panel for content management.
• Supports RESTful and GraphQL APIs out-of-the-box.
• Role-based access control with advanced permissions.
• Extensible with plugins to add new features and functionalities.

👩‍💻 Github link: https://github.com/strapi/strapi

⭐ Github stars: 62.4K

💻 Website link: https://strapi.io/

11. Rocket.Chat

Category: Communication

Open Source Alternative to: Slack, Microsoft Teams, Discord

Rocket.Chat is an open-source communication platform for team collaboration.

It boosts productivity by enabling real-time messaging, video calls, and file sharing.

Reasons to choose:

• Highly customizable user interface and features.
• Supports a wide range of communication methods, including messaging, voice, and video.
• Strong security features, including end-to-end encryption.
• Integrates well with third-party apps and services.
• Scalable for organizations of all sizes.

👩‍💻 Github link: https://github.com/RocketChat/Rocket.Chat

⭐ Github stars: 39.8K

💻 Website link: https://rocket.chat/

12. Discourse

Category: Community

Open Source Alternative to: Tribe, Circle

Discourse is an open-source discussion platform that powers online communities.

It enhances community engagement with features like threaded discussions, notifications, and moderation tools.

Reasons to choose:

• Threaded conversations for clear and organized discussions.
• Strong moderation tools with automated spam filtering.
• Real-time notifications and engagement features.
• Easy-to-use interface that adapts well to mobile devices.
• Plugin architecture for expanding functionalities.

👩‍💻 Github link: https://github.com/discourse/discourse

⭐ Github stars: 41.5K

💻 Website link: https://www.discourse.org/

13. Peppermint

Category: Support

Open Source Alternative to: Zendesk

Peppermint is an open-source support ticketing system designed for your businesses.

It streamlines customer support by organizing and prioritizing customer inquiries efficiently.

Reasons to choose:

• Simple and intuitive ticket management system.
• Fast setup and easy to use with a minimal learning curve.
• Ability to customize fields and workflows to fit business needs.
• Provides insights with basic analytics and reporting tools.
• Integrates with existing communication tools like email.

👩‍💻 Github link: https://github.com/Peppermint-Lab/peppermint

⭐ Github stars: 1.8K

💻 Website link: https://peppermint.sh/

14. Prometheus

Category: Monitoring

Open Source Alternative to: Datadog

Prometheus is an open-source monitoring and alerting toolkit for complex systems.

It improves productivity by offering powerful data collection and visualization capabilities for system performance.

Reasons to choose:

• Powerful multi-dimensional data model with flexible queries.
• High performance, designed for large-scale monitoring.
• Real-time alerting with configurable rules.
• Integration with Grafana for advanced visualizations.
• Built-in service discovery for dynamic environments.

👩‍💻 Github link: https://github.com/prometheus/prometheus

⭐ Github stars: 54.4K

💻 Website link: https://prometheus.io/

15. NocoDB

Category: Database

Open Source Alternative to: Airtable

NocoDB is an open-source no-code platform that turns databases into smart spreadsheets.

It boosts productivity by enabling users to create applications without coding knowledge.

Reasons to choose:

• User-friendly interface that mimics traditional spreadsheets.
• Extensive integration with a variety of databases and apps.
• Rich field types, including formulas, file attachments, and relations.
• Collaboration features like commenting and real-time updates.
• Advanced filtering, sorting, and grouping options.

👩‍💻 Github link: https://github.com/nocodb/nocodb

⭐ Github stars: 44.4K

💻 Website link: https://www.nocodb.com/

16. Dbeaver

Category: Database Management

Open Source Alternative to: Toad

Dbeaver is an open-source database management tool that supports a wide range of databases.

It enhances productivity with its universal database interface and advanced SQL editor.

Reasons to choose:

• Universal database tool supporting a wide variety of databases.
• Advanced SQL editor with features like autocompletion and syntax highlighting.
• Visual query builder for non-technical users.
• Ability to manage and visualize database schemas.
• Supports data import/export in multiple formats.

👩‍💻 Github link: https://github.com/dbeaver/dbeaver

⭐ Github stars: 38.9K

💻 Website link: https://dbeaver.io/

17. Dokku

Category: Deployment

Open Source Alternative to: Heroku, Render

Dokku is an open-source PaaS solution that simplifies application deployment.

It streamlines deployment processes with its Heroku-like interface for managing and scaling apps.

Reasons to choose:

• Simple deployment process similar to Heroku's git push model.
• Supports Docker containers for application management.
• Scalable, with support for plugins to add more features.
• Easy to set up and manage via a command-line interface.
• Comprehensive documentation and strong community support.

👩‍💻 Github link: https://github.com/dokku/dokku

⭐ Github stars: 26.5K

💻 Website link: https://dokku.com/

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Make sure to receive the best resources, tools, productivity tips, and career growth tips I discover by subscribing to my newsletter!

Also, connect with me on Twitter, LinkedIn, and GitHub!

Breaking Down Complex Systems: A Simple Guide to Mastering MicroService-Based Architecture

There are many types of software design patterns available, MicroService-based architecture is one of the most common architectures that is widely used by big giants such as Google, Netflix, Amazon, and Facebook. So basically you can say that we prefer to use the micro-service architecture to support large-scale systems due to its benefits, which we will see in a few minutes.

Understand MicroService-Based Architecture

Before beginning with this article I want to let you know about how many types of main software architecture are available, below is the list of them —

1. Monolithic
2. Microservices
3. Serverless
4. Event-Driven
5. Layered (N-Tier)
6. Service-Oriented Architecture (SOA)
7. Component-Based
8. Peer-to-Peer (P2P)
9. Domain-Driven Design (DDD)

What are Microservices?

The microservice-based architecture is a design pattern in which we divide the larger services into smaller independent services and those services can communicate with each other with the help of well-defined APIs. Every service has its roles and responsibilities and it focuses only on that business function. Some characteristics of microservice include:

• Modularity: We are developing the services in independent modules that are easy to develop, maintain, reuse, and scale.
• Decentralization: This is another key characteristic of microservice Architecture, different services can use different technologies such as databases, programming languages, etc.
• Scalability: We can scale independent services based on the demand which is more useful to optimize the resources.
• Autonomy: We can develop, deploy, and run each service independently, which helps us to improve flexibility and resilience.
• Continuous Deployment: The independent running service is more flexible to update and maintain, which helps to achieve continuous integration and deployment.

Below is the diagram for MicroService-Based Architecture, let’s understand the each and every individual components of it.

MicroService Architecture

Static Files and CDN

Static files in websites are nothing but files like javascript (.js), CSS (.css), images (.jpg, .png, .webp, or .gif), and videos (.mp4). To store those files we are using the storage buckets and to serve them we are using CDN (content delivery network) which is another type of networking system that delivers the files from the nearest server.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Load Balancer

A load balancer is a device or software that is used to distribute the incoming traffic across the services to prevent the primary server from getting overloaded. Some main features of load balancer are as follows-

• Traffic Distribution: It helps to distribute the incoming requests across multiple servers to prevent the single server from becoming a bottleneck
• High Availability: It also helps the application to keep working in server failure by redirecting the traffic to a healthy one.
• Scalability: Load balancer allows to addition of more servers and distribution of the load across them at the time surge (high requests)
• Performance Optimization: It improves the performance by reducing the latency of the requests and making them more available.

API Gateway

The API Gateway is a server that acts as an entry point for any API request and it helps to manage and route the request to the appropriate backend service in an application. It captures incoming requests and routes them to the appropriate backend service. The key features of API gateway include -

• Request Routing: It redirects the API request to the appropriate microservice based on its URL or params (query params or route params).
• Load Balancing: It also distributes the requests to multiple instances of micro-service to keep the load evenly distributed and ensure high availability.
• Authentication and Authorization: The load balancer also acts as the route guard for the API requests by validating the credentials and permissions before providing them access.
• Rate Limiting: Api gateway can prevent the number of requests based on the IP or other configuration to prevent overuse or attack.
• Aggregation: The response from different micro-services can also be combined into one single response.

Identity Provider

An Identity Provider is a service used to manage and authenticate user identities. It provides a centralized system to authenticate the user’s access and various micro-services. The key features of Identity Provider include -

• Authentication: Authentication is a process that verifies the authenticity of a user’s identity to access the feature.
• Single Sign-On (SSO): SSO is the process of authentication that allows users to authenticate using a single identity at many places.
• User Management: This refers to the management of users based on their roles, restricting or allowing them to use a particular resource.

Message Broker

It is a middleware between different services that is used to communicate internally to exchange data. It acts as an intermediary that receives, stores, and sends them from consumer to producer.

Kafka (Message Broker)

Key functions include:

• Message Routing: It is a key requirement for system and service integration. One pattern that can be used to separate a message source from its destination is message routing.
• Message Queuing: A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.
• Message Transformation: In microservices, message transformation refers to transforming messages that are sent back and forth between services into a format that is understandable to each service.

Service Registry and Discovery

Services can locate and communicate with each other dynamically thanks to service registry and discovery. Service Discovery allows services to find and connect based on the information supplied by the registry, guaranteeing scalability and resilience in the system. The Service Registry maintains track of all available service instances and their locations.

There are two types of Service Discovery available

• Client-Side Service Discovery
• Server-Side Service Discovery

Service Coordination (Zookeeper)

ZooKeeper is a distributed, open-source coordination service for distributed applications. It exposes a simple set of primitives that distributed applications can build upon to implement higher level services for synchronization, configuration maintenance, and groups and naming. It is designed to be easy to program to, and uses a data model styled after the familiar directory tree structure of file systems. It runs in Java and has bindings for both Java and C.[source]

Database

An organized set of electronically recorded data is called a database. Any kind of data, including text, numbers, pictures, videos, and files, can be included. Data may be stored, retrieved, and edited using software known as a database management system (DBMS).

Pro/Cons

Pros of Microservices:

1. Scalability: We can scale up and down the services independently based on their usages or demand
2. Flexibility: Microservice allows to use the of multiple technologies together such as multiple programming languages as per their advantages such as Python, golang, or Java.
3. Resilience: As the services are running individually they are affecting less during the outage, and your entire system will not crash.

Cons of Microservices:

1. Complexity: As we need to develop and run the services individually, it increases the codebase and complexity of the overall system which is a little bit hard to manage.
2. Communication Overhead: In microservice, we have to establish the communication between the service to exchange information which is a little bit overhead here.
3. Data Consistency: Maintaining consistency across distributed services can be challenging, as each service may have its own database and data model.

Thank you for reading this blog post, if you are interested in learning more about golang or full-stack development, consider following me. I keep writing posts about it regularly.

• Medium — https://medium.com/@harendra21
• Twitter (X) — https://x.com/harendraverma2

How to Get Coverage nativally?

Running NYC locally is straightforward with a simple command:

"start": "nyc node ./dist/main.js",

However, there are more stages involved in getting support within Docker. Let’s explore the nuances of this.

What are the Challenges with Signal Handling in Docker Containers ?

Sending a docker an interrupt signal is quite a deal in our case. Reason? Instead of running a binary I’m running a script(to talk about later)

You see my dear readers, what I’ve to face? my docker container doesn’t die, but why? Its because of the signal Handling in Docker and shell behaviour.

1. PID 1 in Containers:In a Docker container, the CMD or ENTRYPOINT process runs as PID 1. This process is responsible for handling system signals.When using sh or bash to run a script, sh becomes the PID 1 process inside the container.

2. Signal Forwarding: The shell (sh) does not automatically forward signals to child processes. Instead, it handles the signals itself, often not propagating them to the processes it spawns.
   When you press Ctrl+C, Docker sends a SIGINT signal to the PID 1 process. If sh is the PID 1 process, it might not forward the signal to the actual application process (e.g., node, yarn start).

3. Zombie Processes: If the shell does not correctly forward the signal to the child processes, those processes continue running. This can lead to zombie processes and an unresponsive container.

   Our Amazing Sponsors

   View Website

   DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

   View Website

   Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

   View Website

   A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

How to solve this? A simple trap signal and passing it to child processes should work fine.

#!/bin/sh

set -a
. ".env.$ENVIRONMENT_NAME"
set +a

# Function to handle SIGINT signal
handle_int() {
    echo "SIGINT received, forwarding to child process..."
    kill -INT "$child" 2>/dev/null
    exit 0
}

# Trap SIGINT signal
trap 'handle_int' INT TERM

sleep 10  # Ensure services like DB are up

# Start yarn and get its PID
yarn start &

child=$!
echo "Started yarn with PID $child"

# Wait for child process to finish
wait "$child"

# Copy nyc output to host directory (optional, if you need it)