Real-time applications allow instant communication and dynamic interaction between users and systems, such as chat apps, live notifications, and collaborative tools. The core idea is to have immediate updates that keep everyone in sync without delays.

WebSockets provide a bidirectional communication protocol to maintain an open connection between client and server, enabling real-time data exchange.

Using NestJS for WebSocket integration simplifies the development of real-time apps by providing structured modules like WebSocket gateways and streamlined event handling. This brings scalability, maintainability, and ease of implementation for developers building high-performance live systems.

To understand more about Nest.js check this article

Importance and Benefits of Using NestJS with WebSockets

Combining NestJS with WebSockets offers several advantages:

• Type Safety: TypeScript support ensures robust, error-free code

• Scalability: Built-in support for microservices and modular architecture

• Developer Experience: Decorators and dependency injection make code clean and maintainable

• Real-time Capabilities: Seamless WebSocket integration for instant communication

• Testing Support: Built-in testing utilities and mocking capabilities

Note: The following article includes code snippets to illustrate various concepts. Please refer to the explanations and additional information in the official documentation.

Setting Up the NestJS Project

Installing NestJS CLI

npm install -g @nestjs/cli

Generating a New NestJS Project

bashnest new real-time-app
cd real-time-app

The generated project structure:

src/
├── app.controller.spec.ts
├── app.controller.ts
├── app.module.ts
├── app.service.ts
└── main.ts

Update main.ts to enable CORS for our React frontend:

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.enableCors({
    origin: 'http://localhost:3000', // frontend url
    credentials: true,
  });

  const PORT = 3001;
  await app.listen(PORT);
  console.log(`API running on http://localhost:${PORT}`);
}
bootstrap();

Installing Necessary WebSockets Dependencies

npm install @nestjs/websockets @nestjs/platform-socket.io socket.io
npm install --save-dev @types/socket.io

Create a WebSocket gateway:

// src/chat/chat.gateway.ts
import {
  WebSocketGateway,
  SubscribeMessage,
  MessageBody,
  ConnectedSocket,
  OnGatewayInit,
  OnGatewayConnection,
  OnGatewayDisconnect,
} from '@nestjs/websockets';
import { Socket, Server } from 'socket.io';
import { Logger } from '@nestjs/common';

@WebSocketGateway()
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  private logger: Logger = new Logger('ChatGateway');
  private connectedClients: Map<string, Socket> = new Map();

  afterInit(server: Server) {
    this.logger.log('WebSocket Gateway initialized');
  }

  handleConnection(client: Socket) {
    this.logger.log(`Client connected: ${client.id}`);
    this.connectedClients.set(client.id, client);

    // Send welcome message
    client.emit('connection-success', {
      message: 'Successfully connected to chat server',
      clientId: client.id,
    });
  }

  handleDisconnect(client: Socket) {
    this.logger.log(`Client disconnected: ${client.id}`);
    this.connectedClients.delete(client.id);
  }

  @SubscribeMessage('send-message')
  handleMessage(
    @MessageBody() data: { message: string; username: string },
    @ConnectedSocket() client: Socket,
  ): void {
    this.logger.log(`Message from ${data.username}: ${data.message}`);

    // Broadcast message to all connected clients
    client.broadcast.emit('receive-message', {
      message: data.message,
      username: data.username,
      timestamp: new Date().toISOString(),
      clientId: client.id,
    });
  }

  @SubscribeMessage('join-room')
  handleJoinRoom(
    @MessageBody() data: { room: string; username: string },
    @ConnectedSocket() client: Socket,
  ): void {
    client.join(data.room);
    this.logger.log(`${data.username} joined room: ${data.room}`);

    client.to(data.room).emit('user-joined', {
      username: data.username,
      room: data.room,
      timestamp: new Date().toISOString(),
    });
  }
}

What's happening here:

@WebSocketGateway() marks this class as a WebSocket server that can handle real-time connections from multiple clients simultaneously.

@SubscribeMessage('send-message') tells the server to execute the handleMessage method whenever a client sends a message with the event name 'send-message'.

@MessageBody() extracts the actual data payload from incoming WebSocket messages, similar to how REST APIs extract JSON from request bodies.

@ConnectedSocket() injects the specific client's socket connection into the method, allowing the server to interact with that particular client.

client.broadcast.emit() sends messages to all connected clients except the sender, preventing users from seeing their own messages duplicated.

client.join(data.room) adds the client to a specific chat room using Socket.IO's built-in room management system.

client.to(data.room).emit() sends messages only to clients within a specific room rather than broadcasting to the entire server.

Map<string, Socket> stores all active client connections using their unique IDs as keys, enabling the server to track who's online and manage connections efficiently.

The lifecycle methods (afterInit, handleConnection, handleDisconnect) automatically execute when the server starts, clients connect, or clients disconnect, providing hooks for initialization and cleanup tasks.

Logger provides structured logging for debugging and monitoring chat activity, tracking connections, messages, and room activities throughout the application.

Create a chat module and register the gateway:

// src/chat/chat.module.ts
import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';

@Module({
  providers: [ChatGateway],
})
export class ChatModule {}

providers: [ChatGateway] registers the ChatGateway class with NestJS's dependency injection system, making it available throughout the application.

Update the main app module:

// src/app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ChatModule } from './chat/chat.module';

@Module({
  imports: [ChatModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Broadcasting Messages to Connected Clients

Here's how to implement different broadcasting patterns:

// src/chat/chat.gateway.ts (extended)
export class ChatGateway {
  @WebSocketServer()
  server: Server;

  // Broadcast to all clients
  @SubscribeMessage('broadcast-message')
  broadcastToAll(@MessageBody() data: any): void {
    this.server.emit('global-message', data);
  }

  // Broadcast to specific room
  @SubscribeMessage('room-message')
  broadcastToRoom(
    @MessageBody() data: { room: string; message: string },
  ): void {
    this.server.to(data.room).emit('room-message', data);
  }

  // Send to specific client
  sendToClient(clientId: string, event: string, data: any): void {
    const client = this.connectedClients.get(clientId);
    if (client) {
      client.emit(event, data);
    }
  }
}

@WebSocketServer() injects the main Socket.IO server instance, giving access to all connected clients and server-level operations.

this.server.emit() broadcasts messages to every single connected client on the server without any filtering or exclusions.

this.server.to(data.room).emit() sends messages only to clients who have joined a specific room, enabling targeted group communication.

this.connectedClients.get(clientId) retrieves a specific client's socket connection from the stored Map using their unique ID.

client.emit(event, data) sends a message directly to one individual client, enabling private messaging or targeted notifications.

The sendToClient method provides programmatic access to send messages to specific users from other parts of the application, not just in response to incoming WebSocket events.

React.js Frontend Implementation

Create a React component to interact with the WebSocket server:

// src/components/ChatComponent.tsx
import React, { useState, useEffect } from 'react';
import { io, Socket } from 'socket.io-client';

interface Message {
  message: string;
  username: string;
  timestamp: string;
  clientId: string;
}

const ChatComponent: React.FC = () => {
  const [socket, setSocket] = useState<Socket | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // Initialize socket connection
    const newSocket = io('http://localhost:3001');
    setSocket(newSocket);

    // Connection event handlers
    newSocket.on('connect', () => {
      setIsConnected(true);
      console.log('Connected to server');
    });

    newSocket.on('disconnect', () => {
      setIsConnected(false);
      console.log('Disconnected from server');
    });

    newSocket.on('connection-success', (data) => {
      console.log('Connection success:', data);
    });

    newSocket.on('receive-message', (data: Message) => {
      setMessages(prev => [...prev, data]);
    });

    // Cleanup on unmount
    return () => {
      newSocket.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket && message.trim() && username.trim()) {
      socket.emit('send-message', {
        message: message.trim(),
        username: username.trim(),
      });

      // Add own message to chat
      setMessages(prev => [...prev, {
        message: message.trim(),
        username: username.trim(),
        timestamp: new Date().toISOString(),
        clientId: 'self',
      }]);

      setMessage('');
    }
  };

  return (
    <div className="chat-container">
      <div className="connection-status">
        Status: {isConnected ? '🟢 Connected' : '🔴 Disconnected'}
      </div>

      <div className="user-setup">
        <input
          type="text"
          placeholder="Enter your username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      <div className="messages-container">
        {messages.map((msg, index) => (
          <div key={index} className="message">
            <strong>{msg.username}:</strong> {msg.message}
            <small>{new Date(msg.timestamp).toLocaleTimeString()}</small>
          </div>
        ))}
      </div>

      <div className="message-input">
        <input
          type="text"
          placeholder="Type your message..."
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
};

export default ChatComponent;

io('http://localhost:3001') creates a Socket.IO client connection to the WebSocket server running on port 3001.

useState<Socket | null>(null) manages the socket connection instance in React state, allowing the component to track connection status.

useState<Message[]>([]) stores all chat messages in an array that updates when new messages arrive.

useEffect(() => {}, []) runs once when the component mounts to initialize the socket connection and set up event listeners.

newSocket.on('connect') listens for successful connection events from the server and updates the UI connection status.

newSocket.on('receive-message') listens for incoming messages from other users and adds them to the messages array using setMessages(prev => [...prev, data]).

socket.emit('send-message') sends the user's message to the server with the event name that matches the server's @SubscribeMessage('send-message').

setMessages(prev => [...prev, {...}]) adds the user's own message to the chat immediately for instant feedback, since broadcast messages don't include the sender.

onKeyPress={(e) => e.key === 'Enter' && sendMessage()} allows users to send messages by pressing Enter instead of clicking the button.

return () => { newSocket.close(); } cleans up the socket connection when the component unmounts to prevent memory leaks.

Tools and Techniques for Efficient Debugging

1. Socket.IO Admin UI: Monitor connections and events

2. Browser DevTools: Network tab for WebSocket frames

3. Logging: Comprehensive logging for all events

4. Health Checks: Monitor server performance

// Health check endpoint
@Controller('health')
export class HealthController {
  constructor(private chatService: ChatService) {}

  @Get('websockets')
  getWebSocketHealth() {
    return {
      activeConnections: this.chatService.getActiveConnections(),
      uptime: process.uptime(),
      timestamp: new Date().toISOString(),
    };
  }
}

Best Practices for Building Real-Time Apps

Security Considerations

1. Authentication: Verify user identity before allowing connections

    @UseGuards(WsJwtAuthGuard)
    @SubscribeMessage('send-message')
    handleMessage() {
      // Only authenticated users can send messages
    }
   

2. Rate Limiting: Prevent spam and DoS attacks

    // Custom rate limiter
    @Injectable()
    export class RateLimitGuard implements CanActivate {
      private requests = new Map();
   
      canActivate(context: ExecutionContext): boolean {
        const client = context.switchToWs().getClient();
        const now = Date.now();
        const windowMs = 60000; // 1 minute
        const maxRequests = 10;
   
        const clientRequests = this.requests.get(client.id) || [];
        const validRequests = clientRequests.filter(time => now - time < windowMs);
   
        if (validRequests.length >= maxRequests) {
          return false;
        }
   
        validRequests.push(now);
        this.requests.set(client.id, validRequests);
        return true;
      }
    }
   

3. Input Validation: Sanitize all incoming data

    // DTO with validation
    export class SendMessageDto {
      @IsString()
      @Length(1, 500)
      message: string;
   
      @IsString()
      @Length(1, 50)
      username: string;
    }
   

Conclusion

NestJS combined with WebSockets offers a clean, efficient way to build real-time applications that scale. Its modular architecture and built-in support simplify handling live data like chat, notifications, and updates. Paired with React.js for the frontend, it empowers developers to create dynamic, interactive user experiences with minimal complexity.

Exploring NestJS’s advanced features and best practices unlocks even greater potential for real-time app development. This approach is a solid foundation for modern applications seeking seamless real-time communication.

Let me know in the comments if you want a full code example—I'm excited to share it with you!

Introduction

JavaScript has come a long way from being just a front-end scripting language. With Node.js, JavaScript unleashed its power on the backend, empowering developers to build high-performance, event-driven servers using a familiar language. However, as apps grow complex, maintaining clean and scalable backend code can become a headache-it’s like trying to tame a wild octopus with spaghetti arms.

Enter NestJS: the rising star in the JavaScript backend arena. Built on top of Express and optionally Fastify, NestJS applies modern TypeScript and object-oriented programming principles to backend development. Since its debut, it has skyrocketed in popularity for offering a scalable, maintainable architecture that plays well with large teams and complex projects.

The Core Features of NestJS

Modular Architecture

Modularity is the secret sauce of modern web dev. Splitting the app into distinct modules makes code easier to manage, test, and scale-in other words, less spaghetti and more lasagna layers.

NestJS implements this by letting developers group related components, controllers, and services into modules that can be independently modified or replaced without breaking the whole app.

TypeScript Support

TypeScript is the superhero cape JavaScript always needed. It adds static typing, early error detection, and improved tooling.

NestJS is built from the ground up with TypeScript, enabling features like autocomplete, refactoring support, and compile-time checks that prevent runtime disasters.

Dependency Injection

Dependency Injection (DI) is like the butler for your code, making sure each part gets served exactly what it needs without the components having to fetch it themselves. This pattern helps reduce tight coupling, improves testability, and promotes reusable code.

NestJS’s built-in DI container makes implementing DI straightforward and elegant, encouraging clean architecture even in sprawling codebases.

import { Injectable } from '@nestjs/common';

@Injectable()
export class CatsService {
  private cats = [];

  findAll() {
    return this.cats;
  }
}

@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @Get()
  findAll() {
    return this.catsService.findAll();
  }
}

Scalability with NestJS

Building Scalable Applications

Scalability requires a solid foundation. Thanks to its modular design, DI, and support for microservices and asynchronous programming, NestJS shines in building apps that can grow gracefully.

Examples Supporting Scalability

NestJS supports:

• Microservices architecture with support for TCP, Redis, and message brokers like RabbitMQ and Kafka.

• WebSockets for real-time communication.

• Distributed systems that can handle complex loads without breaking a sweat.

Case Studies of Scalable Applications

From fintech platforms handling thousands of transactions per second to social apps with millions of users, companies like Adidas, Decathlon, and others have adopted NestJS to build their scalable backends. More example here https://docs.nestjs.com/discover/companies.

Clean and Maintainable Code

Code Organization in NestJS

NestJS encourages clear separation of concerns using controllers for routing, services for business logic, and repositories for data access-the famous three-tier architecture.

Use of Decorators and Metadata

Decorators in NestJS add metadata that simplifies configuration and routing without boilerplate. These are inspired by Angular and make your code declarative and readable.

Enforcing Coding Standards

Thanks to TypeScript and standardized architecture, NestJS helps developers consistently write clean and maintainable code, enabling easier onboarding and collaboration.

Ecosystem and Community Support

Overview of the NestJS Ecosystem

NestJS’s ecosystem is a Swiss army knife of libraries covering ORM integration (TypeORM, Prisma, Mongoose), authentication (Passport-based), validation, swagger for API docs, and more. Check more here https://docs.nestjs.com/recipes

Libraries and Plugins

Ecosystem plugins include support for GraphQL, microservices, caching, queues, and automatic API documentation generation, streamlining common backend needs.

Active Community and Resources

NestJS boasts a vibrant community with plenty of tutorials, online courses, and open-source contributions that accelerate learning and problem-solving.

Comparisons with Other Frameworks

Real-world Use Cases of NestJS

Popular Companies Using NestJS

• Adidas

• Decathlon

• Roche

• Capgemini

• Check more here - https://docs.nestjs.com/discover/companies

Specific Applications and Success Stories

• Real-time chat apps handling thousands of concurrent users.

• Scalable e-commerce backends managing high traffic spikes.

Conclusion

NestJS offers the best of both worlds: powerful backend capabilities with TypeScript, modular design, and dependency injection, wrapped in a growing supportive ecosystem ideal for scalable and maintainable applications.

Choosing NestJS means betting on a future-proof framework that helps teams build clean, scalable, and robust backend applications with less pain and more joy. Plus, it’s backed by a thriving community that makes the journey even more enjoyable.

Want to build scalable applications powered by NestJs?

Contact us here https://www.mcdorcis.com/

Instead of writing all the logic and validation rules in your forms manually, we can make use of libraries such as react-hook-form or formik. In this post, we are going to look at handling and validating forms in a React application using react-hook-form

What is React Hook Form

React Hook Form is a library that helps you validate forms in React. It is a minimal library without any other dependencies while being performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries.

It takes a slightly different approach than other form libraries in the React ecosystem by adopting the use of uncontrolled inputs using ref instead of depending on the state to control the inputs. This approach makes the forms more performant and reduces the number of re-renders.

To install React Hook Form, run the following command:

npm install react-hook-form

Check my previous blog here to read more on handling forms in React without using a library

What is ZOD

Zod is a JavaScript validation library that allows you to define schemas that model the shape and constraints of your data. These schemas generate type safety, automatic validation, and useful error messages. Some key aspects of Zod include:

• Validation of data types, strings, numbers, objects etc.

• Customizable error messages

• Support for nested objects and arrays

• Code auto-completion when using a Zod schema

• Type safety with TypeScript integration

By modeling application data with Zod schemas, you get built-in validation with helpful errors. It makes it easy to reuse validation logic across your application.

To work with Zod in React, you need to install the library and a resolver

npm install @hookform/resolvers zod

Setting Up Our Form

1. Import the required components and hooks:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

2. Define your form schema using Zod:

   Zod allows us to define a schema that lays out the exact shape and constraints we want to apply to our form data. Let's create one for our form:

    export const createUserSchema = z.object({
      name: z.string().min(2, { message: 'Name is required' }),
      email: z.string().email('Must be a valid email'),
      age: z.number().positive().int(),
    });
   

   This schema defines the fields we expect along with constraints like minimum length, email validation, etc. Zod will automatically generate useful error messages for us when validation fails.

3. Create form component:

   Using the schema we created above, we can create form with corresponding inputs as illustrated below.

    type FormData = z.infer<typeof createUserSchema>;
   
    function UserForm() {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm<FormData>({
        resolver: zodResolver(createUserSchema),
      });
   
      const onSubmit = (data: FormData) => {
        console.log(data);
        // Handle form submission
      };
   
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <div>
            <label htmlFor="name">Name</label>
            <input id="name" {...register('name')} />
            {errors.name && <span>{errors.name.message}</span>}
          </div>
   
          <div>
            <label htmlFor="email">Email</label>
            <input id="email" {...register('email')} />
            {errors.email && <span>{errors.email.message}</span>}
          </div>
   
          <div>
            <label htmlFor="age">Age</label>
            <input id="age" type="number" {...register('age', { valueAsNumber: true })} />
            {errors.age && <span>{errors.age.message}</span>}
          </div>
   
          <button type="submit">Submit</button>
        </form>
      );
    }
   

   Here is what's happening:

   • We use z.infer<typeof createUserSchema> to infer the TypeScript type from our Zod schema.

   • The useForm hook is initialized with the zodResolver, which connects React Hook Form with our Zod schema.

   • We destructure register, handleSubmit, and errors from the useForm hook.

   • The register function is used to register our inputs with React Hook Form.

   • We display error messages conditionally based on the errors object.

   • We use the handleSubmit method connect to our own onSubmit method to handle form submission. The onSubmit method will be called when all validation passes and will receive the form data which you can handle as needed such as submitting it to an api.

4. Advanced Usage:

   React Hook Form and Zod offer more advanced features that you can explore:

   • Custom error messages

   • Conditional fields

   • Array fields

   • Async validation

Here's an example of a more complex schema with custom error messages:

    const advancedSchema = z.object({
      username: z.string()
        .min(3, { message: 'Username must be at least 3 characters long' })
        .max(20, { message: 'Username cannot exceed 20 characters' }),
      password: z.string()
        .min(8, { message: 'Password must be at least 8 characters long' })
        .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, {
          message: 'Password must contain at least one uppercase letter, one lowercase letter, and one number'
        }),
      confirmPassword: z.string(),
    }).refine((data) => data.password === data.confirmPassword, {
      message: "Passwords don't match",
      path: ["confirmPassword"],
    });

Conclusion

Using React Hook Form with Zod provides a powerful and type-safe way to handle form validation in React applications. This combination offers several benefits:

1. Reduced boilerplate code

2. Improved performance with uncontrolled components

3. Strong typing and IntelliSense support

4. Flexible and extensible validation rules

By leveraging these libraries, you can create robust forms with complex validation logic while maintaining clean and maintainable code. As your forms grow in complexity, these tools will help you manage that complexity efficiently.

Remember to always refer to the official documentation of React Hook Form and Zod for the most up-to-date information and advanced usage scenarios.

Keep coding :)

🤖

Ever found yourself at the end of the year, pondering those New Year's resolutions made with unwavering determination? We all do it. Those grand plans we enthusiastically set when the year was fresh and brimming with potential, only to watch them slowly fade into the background as life takes over. But here's the million-dollar question: Is it too late to salvage those dreams, the ones we stashed away in our bucket list? You know, like that one thing I've always wanted to do - mastering .NET for web APIs. And trust me, I'm not alone in this rollercoaster of ambition and distraction. Life has a way of side-tracking us from our grand intentions, but here's the good news, folks: the year's not over, and there's still time to make some headway. So, hang onto your hats, because I'm thrilled to unveil a brand-new series - "The .Net Odyssey."

Daily Learning Hustle

Okay, so here's the deal – I've made it a mission to learn .NET every single day. Yep, you heard me right, every single day. And let me tell you, it's been a real rollercoaster. Some days, I'm crushing those APIs like a champ. Other days, it feels like the code's playing pranks on me. But here's the thing, I'm not backing down, and I don't want you to either. If you're in the same boat, know that I'm right there with you, learning and laughing through it all.

The Weekly Adventure

To keep things manageable, I'm tackling .NET one week at a time. Each week, I dive into a different piece of the .NET puzzle. It's like going on an all-you-can-eat buffet, except it's a buffet of tech knowledge, and I'm the hungry explorer. From web API basics to the crazier stuff, I'm sharing all the wins and facepalms along the way.

Monthly Check-Ins

At the end of each month, I'm raising a toast to my small victories and epic flops. Because, let's be real, it's all part of the game. Learning .NET is about more than just code; it's about embracing the journey, the quirks, and the discoveries – and I wouldn't have it any other way.

Conclusion

Now, in case you're thinking I'm about to lay out a detailed roadmap to help you nail your resolutions, think again. Instead, I'm extending an invitation – one to savor the ride, explore the unknown, and find joy in the process. For me, mastering .NET for web APIs is not just about code; it's about enjoying the journey. Come aboard, join me on this exhilarating ride, and together, we'll face those resolutions with a smile. Remember, it's not just about the destination; it's all about the adventure itself! What's your learning journey been like? Share your experiences with me and let's continue this conversation.

Plus

So see yah at the next one

🤖

When creating a website with performance and SEO as key features, font optimization becomes a crucial consideration. In the ever-evolving world of web development, where user experience and page load times are paramount, even the smallest details can make a significant impact. One such detail that often gets overlooked is the way we handle fonts.

Fonts play an integral role in shaping the visual identity of a website. They set the tone, convey the brand's personality, and ensure that the content is not only legible but also aesthetically pleasing. However, if not optimized properly, fonts can become a performance bottleneck, causing slow page load times and potentially harming your search engine rankings.

In this blog post, we'll delve into the world of font optimization in the context of Next.js 13, my favorite framework for building modern, server-rendered React applications. We'll explore why font optimization matters, the challenges it presents, and practical techniques and tools to streamline font delivery, minimize performance impact, and enhance your website's SEO.

Why Font Optimization Matters

Before we dive into the specifics of font optimization in Next.js 13, let's understand why it matters in the first place.

1. Page Load Speed: Research shows that users expect websites to load in a matter of seconds. Slow-loading websites leads to higher bounce rates, lower user engagement, and decreased conversions. Unoptimized fonts can significantly contribute to page load times, as they are additional resources that need to be fetched and rendered.

2. Mobile Responsiveness: With the increasing use of mobile devices for browsing, optimizing fonts becomes even more critical. Mobile networks can be slower than broadband connections and mobile devices have limited processing power. Optimized fonts ensure a smoother experience for mobile users.

3. SEO Rankings: Search engines like Google consider page speed as a ranking factor. Faster websites tend to rank higher in search results. Therefore, optimizing fonts can indirectly impact your SEO rankings and organic traffic.

4. User Experience: Fonts affect the overall look and feel of your website. If fonts are not optimized and cause layout shifts or visual glitches during loading, it can create a poor user experience, leading to user frustration.

To handle font optimization, Next.js introduces next/font which assists in making sure fonts are loaded efficiently on your website.

What is next/font?

Next/font gives you the ability to optimally and painlessly load fonts within your Next.js website.

[From Docs] next/font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.

There are a few requirements needed for you to be able to use next/font:

1. You must be using Next 13 (or newer)

2. You must be using a Google font or a local font.

If you’re not using Next 13, or need a different font library then Fontsource is a great alternative, but it requires a little more configuration.

How to optimise fonts with next/font

Next/font is already included in Next.js directly and we don't need to install any package to use it.

Like I mentioned above, next/font provides two way of importing fonts, either google fonts or local fonts. Regardless of whether we are using google or local font's, we can use fonts in two ways:

• Import them globally (recommended)

• Import them on individual pages

Using Google Fonts

This allows us to automatically self-host any Google Font within our deployment. With this feature, the fonts become an intrinsic part of the deployment package and are seamlessly served from the same domain as your website. Consequently, there is no necessity for the browser to dispatch requests to Google's servers. This not only streamlines font delivery but also enhances both the performance and privacy of your web application.

Get started by importing the font you would like to use from next/font/google as a function.

//app/layout.tsx
import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

To learn more about using Google fonts, check here

Using Local fonts

Import next/font/local and specify the src of your local font file. Like Google Fonts, it’s recommended to use variable fonts if possible.

//app/layout.tsx
import localFont from 'next/font/local'

// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

If you can’t use a variable font, you’ll likely need to import a handful of font files which you can do by including them as an array.

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

You can check out here for more details about using local fonts.

With Tailwind CSS

Like any other tool, we would like to make it easier to work with our favorite styling library. next/font can be used with Tailwind CSS through a CSS variable.

In the example below, we use the font Inter from next/font/google (you can use any font from Google or Local Fonts). Load your font with the variable option to define your CSS variable name and assign it to inter. Then, use inter.variable to add the CSS variable to your HTML document.

//app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Finally, add the CSS variable to your Tailwind CSS config:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

You can now use the font-sans and font-mono utility classes to apply the font to your elements.

Conclusion

It’s as easy as that. Now you’ve got next/font set up you can be certain that you’re loading fonts most optimally across your entire project with minimal effort.

Keep coding :)

🤖

Keystatic Configuration

Every Keystatic project expects an exported config. The config() function can be imported from the @keystatic/core package:

// keystatic.config.ts
import { config } from '@keystatic/core'
export default config({
  // ...
})

Configuration options

Keystatic's config requires at minimum a storage strategy.

It can also define collections and singletons:

// keystatic.config.ts
import { config } from '@keystatic/core'
export default config({
  // Required
  storage: { kind: 'local' },
  // Optional
  collections: {},
  singletons: {}
})

Collections

Picture collections as a way to assemble a bunch of instances of something you hold dear. It's like curating a series of blog posts, your favorite cooking recipes, or heartwarming testimonials from content customers.

Collections find their definition in the collections section of the Keystatic config. Each collection possesses its distinct key and is enveloped within the collection() function.

// keystatic.config.ts
import { config, collection } from '@keystatic/core';

export default config({
  // ...
  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'author',
      schema: {
        author: fields.slug({ name: { label: 'Author' } }),
        quote: fields.text({ label: 'Quote', multiline: true })
      }
    }),
  },
});

To learn more check out the official documentation

Singletons

When you're after a truly one-of-a-kind data entry, think of scenarios like crafting a dedicated "Settings" page or sculpting a finely-tailored set of fields for the cherished "Homepage" of a website. This is where singletons step in.

// keystatic.config.ts
import { config, singleton } from '@keystatic/core';

export default config({
  // ...
  singletons: {
    settings: singleton({
      label: 'Settings',
      schema: {}
    }),
  },
});

To learn more about singletons check out the official documentation

Another key part of Keystatic that is crucial is the field types. Keystatic has several fields that can be used in different scenarios depending on your use case. To learn about all the fields, I recommend you check here.

Now let's get started setting up Keystatic with a schema we will use for the blog.

Here is the new configuration that meets our requirements.

// keystatic.config.ts
import { config, fields, singleton, collection } from '@keystatic/core'

export default config({
    storage: {
        kind: 'local',
    },
    singletons: {
        homepage: singleton({
            label: 'HomeTitle',
            path: 'src/content/homepage',
            schema: {
                headline: fields.text({ label: 'HomeText' }),
            },
        }),
    },/
    collections: {
        articles: collection({
            slugField: "path",
            label: 'Articles',
            path: 'src/content/collections/articles/*/',
            schema: {
                path: fields.slug({name: {label: 'path'}}),
                title: fields.text({label: 'Title'}),
                cover: fields.image({
                    label: 'Cover Image',
                    directory: 'public/images/avatars',
                    publicPath: '/images/avatars/'
                }),
                date: fields.date({label: 'Date'}),
                text: fields.document({
                    label: 'Text',
                    formatting: true,
                    links: true,
                    dividers: true,
                    tables: true,
                    images: true,
                }),
            }
        }),
    }
})

Let's break down the code:

We first declare that our content will be stored locally. You can also store your content on a Github repository with Keystatic.

storage: {
    kind: 'local',
},

The singletons part represents a single piece of data. For our case the title of the website. You must provide a label and a schema, as well as the format of our data. Our title will be a simple text line in this case. We also specify where our content will be stored.

singletons: {
        homepage: singleton({
            label: 'HomeTitle',
            path: 'src/content/homepage',
            schema: {
                headline: fields.text({ label: 'HomeText' }),
            },
        }),
    },

The next part involves configuring a collection for our articles/blogs. Some properties can be used to define our articles. Each article will have a title, an image to illustrate it, a publication date, and finally a content text. The text options will allow us to include links, tables, images, and so on.

collections: {
        articles: collection({
            slugField: "path",
            label: 'Articles',
            path: 'src/content/collections/articles/*/',
            schema: {
                path: fields.slug({name: {label: 'path'}}),
                title: fields.text({label: 'Title'}),
                cover: fields.image({
                    label: 'Cover Image',
                    directory: 'public/images/avatars',
                    publicPath: '/images/avatars/'
                }),
                date: fields.date({label: 'Date'}),
                text: fields.document({
                    label: 'Text',
                    formatting: true,
                    links: true,
                    dividers: true,
                    tables: true,
                    images: true,
                }),
            }
        }),
    }

We can now restart our application and visit http://localhost:3000/keystatic to view the new configurations and update the data.

Your dashboard should look like this:

When you click on articles and the add button. You should be presented with a form with all the inputs we configured.

You can go ahead and add several sample articles.

Rendering Keystatic content

To render our content, we can make use of the Keystatic Reader API which must be run server-side.

Displaying a collection list

The following example displays a list of each post title, with a link to an individual post page:

// src/app/page.tsx
import { createReader } from '@keystatic/core/reader';
import keystaticConfig from '../../keystatic.config';

import Link from 'next/link';

// 1. Create a reader
const reader = createReader(process.cwd(), keystaticConfig);

export default async function Page() {
  // 2. Read the "articles" collection
  const articles = await reader.collections.articles.all();
  return (
    <div className="max-w-[1200px] mx-auto p-4">
      <ul className="">
        {articles.map(article => (
          <li>
            <Link className="shadow block w-[300px] p-4" href={`/${article.slug}`}>{article.entry.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Displaying a single collection entry

To display content from an individual post, you can import and use Keystatic's <DocumentRenderer />:

// src/app/[slug]/page.tsx
import { createReader } from '@keystatic/core/reader';
import { DocumentRenderer } from "@keystatic/core/renderer";
import Image from "next/image";
import { notFound } from "next/navigation";
import keystaticConfig from "../../../keystatic.config";

const reader = createReader(process.cwd(), keystaticConfig);

const page = async ({ params }: { params: { slug: string; }; }) => {
    const article = await reader.collections.articles.read(params?.slug);
    if (!article) return notFound();

    return (
        <div className="max-w-[900px] mx-auto py-8">
            <h1 className="text-3xl font-bold">{article.title}</h1>

            {article.cover &&
                <Image
                    width={300}
                    height={300}
                    alt="Cover Image"
                    src={article.cover + ""}
                    className="!w-full mt-5 rounded-lg"
                />
            }

            <div className="mt-6">
                <DocumentRenderer document={await article.text()} />
            </div>
        </div>
    );
};

export default page;

Now, a quick breakdown on what's happening in this code:

• We're creating a Keystatic Reader, which acts as our connection to the Keystatic content management system.

• This code handles dynamic content pages. These pages are designed to display articles or content based on the slug provided in the URL. Slugs are typically a part of the URL used to identify specific pieces of content.

• Inside the page function, we attempt to retrieve an article from the Keystatic collections based on the slug provided in the URL.

• If no article is found with the given slug, the code returns a "not found" response, indicating that the requested content isn't available.

• If an article is found, the code renders it on the web page. This includes displaying the article's title, cover image (if available), and text content.

• The DocumentRenderer component is used to ensure that the article's text content is properly formatted and displayed.

Now this is all we need to cover about working with Keystatic and displaying content in Nextjs marking the end of Part 2 of this series.

Resources:

https://keystatic.com/

https://nextjs.org/

https://github.com/marville001/nextjs-keystatic-blog

If you would like to see the complete app with styling, please leave a comment and I will share the link.

Keep coding :)

🤖

In this series of blog posts, I want to show you how to make your own blog site using Next.js and Keystatic. They're like the special tools we need to bring our ideas to life online. Think of it as crafting something cool with a digital toolkit!

In this first part, we'll start with the basics. We'll set things up, kind of like getting the foundation ready for a house. It might sound a bit technical, but I promise to explain it all in simple terms. We'll take it slow and steady, making sure we don't miss any important steps.

But wait, there's more to this adventure! We're not just stopping at the beginning. We're going to keep going until we've got our blog up and running for everyone to see. It's like putting the finishing touches on a masterpiece and then displaying it for the world to enjoy, thanks to a special place called Vercel.

As we move forward, we'll learn about designing our blog, adding cool features, and making it work really well. It's going to be a mix of creativity and technology, and I'm here to help you every step of the way.

So, let's jump right in and start with the very first chapter of our journey: getting things ready for our Next.js and Keystatic-powered blog. Get ready for a fun ride filled with learning and creating!

Prerequisites

Before we dive into the exciting world of building your own blog website with Next.js and Keystatic, there are a couple of things you should be familiar with. Don't worry, I'll keep it simple!

1. Basic Understanding of React: Having a grasp of the fundamentals of React, a popular JavaScript library for building user interfaces, will be really helpful. If you've played around with components, state, and props, you're on the right track.

2. Introduction to Next.js: It's good to have a bit of familiarity with Next.js, a framework that works with React and simplifies the process of building web applications. If you know how Next.js handles routing and server-side rendering, you'll be in a great position.

If those prerequisites sound a bit intimidating, don't fret! I'll explain concepts along the way and provide references for you to brush up on if needed. Remember, this journey is about learning and growing. So, if you're ready to embark on this adventure of creating your own blog site, let's get started!

What is Next.js?

Imagine Next.js as a super helper for creating websites. It's like a magic box filled with tools that make building websites easier. Instead of just showing plain pages, Next.js can make your pages load faster and look better. It's like making sure your guests at a party have a super comfy chair to sit on before they even arrive!

What is Keystatic?

Keystatic is a content management system (CMS) that works seamlessly with Next.js. Think of it as the engine that powers the content of your website. With Keystatic, you can easily manage and update your blog posts, images, and other content without diving into complex code. It helps you separate content creation from coding, making your life as a developer and content creator much easier.

Why use Next.js and Keystatic to create a blog website?

Choosing Next.js and Keystatic for your blog website comes with several advantages:

• Faster Loading: Next.js's server-side rendering speeds up page load times, improving user experience and SEO.

• Efficient Development: Next.js simplifies complex tasks, letting you focus more on creating features and less on setup.

• Great User Experience: Faster-loading pages and smooth transitions create a better browsing experience for your readers.

• Easy Content Management: Keystatic's intuitive CMS interface empowers you to manage your blog content effortlessly.

• Flexibility: Next.js allows you to build static sites, server-rendered apps, or a mix of both, giving you flexibility in how you create your website.

• SEO Benefits: Server-side rendering and proper metadata handling in Next.js contribute to better search engine visibility.

• Community and Support: Both Next.js and Keystatic have active communities, ensuring you can find help and resources when needed.

By combining the power of Next.js with the content management capabilities of Keystatic, you'll be equipped to create a blog website that's not only visually appealing but also high-performing and easy to manage. It's a dynamic duo that empowers you to bring your creative vision to life without getting lost in technical complexities. In the upcoming sections of this series, we'll explore how to set up and integrate these tools step by step.

Next.Js Setup - with Tailwindcss

Start by creating a new Next.js project if you don’t have one set up already.

npx create-next-app@latest

As you can see from the above image, I have selected Yes for Tailwind CSS which we will use for our styling.

Next will be to enter your project directory and start the server by running the command npm run dev . This will start the Next.js project on http://localhost:3000.

Adding Keystatic to the Next.js project

NB - From keystatic documentation.

We're going to need to install a few packages to get Keystatic going.

Let's install two packages from npm:

npm install @keystatic/core @keystatic/next

Creating a Keystatic config file

Keystatic needs a config file. This is where you can connect a project with a specific GitHub repository and define a content schema.

Let's create a file called keystatic.config.ts in the root of the project:

// keystatic.config.ts
import { config, fields, singleton } from '@keystatic/core'

export default config({
  storage: {
    kind: 'local',
  },
  singletons: {
    homepage: singleton({
      label: 'Homepage',
      path: 'src/content/_homepage',
      schema: {
        headline: fields.text({ label: 'Headline' }),
      },
    }),
  },
})

We export a config object wrapped in the config function imported from @keystatic/core.

For now, we set the storage strategy to local, and we create a “homepage” singleton which contains one text field: headline.

With that, we are done with all configuration Keystatic needs to start managing content.

Now, let's display the Keystatic Admin UI on our site!

Adding Keystatic Admin UI pages

The Keystatic Admin UI runs in NextJS' app directory.

In your src/app directory, we want every route within the /keystatic segment to become a Keystatic Admin UI route.

Create a keystatic folder in your src/app directory, and add the following files to help with our keystatic admin layout.

// src/app/keystatic/keystatic.ts

"use client";

import { makePage } from "@keystatic/next/ui/app";
import config from "../../keystatic.config";

export default makePage(config);

// src/app/keystatic/layout.tsx

import KeystaticApp from "./keystatic";

export default function RootLayout() {
  return (
    <html>
      <head />
      <body>
        <KeystaticApp />
      </body>
    </html>
  );
}

To ensure all routes in the keystatic segment work as expected, we can leverage Next.js' Optional Catch-all Segments to match file paths of any depth.

Let's create a new folder called [[...params]], and add a page.tsx file with the following:

// src/app/keystatic/[[...params]]/page.tsx

export default function Page() {
  return null;
}

Before we can actually start reading and writing content via the Keystatic Admin UI, we need to create some API routes for Keystatic.

Adding Keystatic API Routes

Create a new file at app/api/keystatic/[...params]/route.ts

Once again, we use Next.js's dynamic route segments here.

// src/app/api/keystatic/[...params]/route.ts

import { makeRouteHandler } from '@keystatic/next/route-handler';
import config from '../../../../../keystatic.config';

export const { POST, GET } = makeRouteHandler({
  config,
});

We should be all set to go for our Keystatic Admin UI now.

Try and visit the /keystatic page in the browser one more time, and click on the “Homepage” singleton:

In our Keystatic config file, we have set the storage kind to local. For our homepage singleton, we set the path property to the following:

path: 'src/content/_homepage',

If you edit the Headline and click create then look in the src directory, a new content folder should have been created.

And with that, we are done with the base setup we need.

Resources:

https://keystatic.com/

https://nextjs.org/

https://github.com/marville001/nextjs-keystatic-blog

In the next part, we will check on displaying Keystatic content on the Next.js front-end.

That's all for part 1.

Keep coding :)

🤖

Remember, improving performance isn't just about satisfying impatient users—it's also about making search engines fall head over heels for your lightning-fast website. So buckle up, tighten your seat belts, and let's hit the pedal to the metal with some Next.js speed hacks!

What is Next.Js?

Next.js is a React framework that is widely recommended as a zero-configuration, single-command toolchain used for React projects. It serves as the fundamental building block for developing high-performance web applications.

To build user-friendly and superfast SEO-friendly, static websites, you will need the support of a robust framework for the unhindered functioning of the applications. Next.Js can build hybrid apps with statically generated and server-side rendered pages. Overall, it involves creating dynamic designs, interactive modules, and performance-based web applications for users.

Next.js offers an array of additional functionalities, including image optimization, a blend of static and server-side rendering, automatic code splitting, bundling, CSS optimization, JavaScript, and more. Nonetheless, even with such an optimized framework, it becomes essential to harness other dependable elements within this framework to ensure the scalability of your applications.

That's why understanding how to enhance Next.js performance is vital in creating top-notch apps for users and delivering them a captivating and immersive experience.

Next.Js speed hacks

Caching is a Piece of Cake

What's better than getting a slice of cake? Caching it! Implementing caching mechanisms like static site generation (SSG) or server-side rendering (SSR) can significantly boost your Next.js app's speed. Serve up pre-rendered pages to your visitors, and they'll be licking their fingers in delight!

Implementing caching can significantly improve the response time of your application while reducing the number of requests made to external services. It's an excellent strategy for optimizing the rendering of your app. In Next.js, caching header tags are typically included for static assets obtained from the /_next/static directory, such as static images, CSS, JavaScript, and other files.

When a request is made, images are dynamically optimized and stored in the <distDir>/cache/images directory. These optimized image files serve as concurrent requests until they expire.

If a cache file is requested after it has expired, it will be deleted. This means that you can generate a new optimized image for caching, ensuring that your application continues to benefit from efficient caching mechanisms.

Optimize Those Images

Images can be heavyweights in the world of web performance. Compress, resize, and lazy load your images to minimize the load on your user's browsers. By making your images light as a feather, you'll keep your website nimble and your users happy.

So how does Next.Js do this?

• Prioritize the images you want to load. It will load the images above the fold and then load them asynchronously while scrolling down. The Next.js picture device does this usually.

• Serves the right image size in the desired format depending on the user’s bandwidth and resources.

• Supports next-generation formats like WebP

• Avoids cumulative layout shifts by using placeholders until the entire image loads

• Adapts to responsive designs so images can scale or fit the size

Delay loading the non-essential scripts until it gets neutral

In many cases, developers have no choice but to include third-party scripts for analytics and customer communication tools due to specific business requirements. However, the downside is that adding heavy scripts to a page can significantly slow down the user experience.

Therefore, it becomes crucial to have control over the loading of resources. This is where Next.js comes to the rescue with its Next/script feature. By utilizing Next/script, you can specify when the browser should fetch the relevant scripts, allowing you to optimize the performance of third-party scripts in your app. Let's take the example of Google Analytics.

Often, these third-party scripts heavily utilize the main thread's resources, resulting in the blocking of render-critical components. However, by using the next/script component in Next.js, you gain the ability to prioritize the loading of scripts. This way, you can ensure that these scripts don't hinder the rendering of important components. Additionally, when combined with a visual development platform like Builder, you can optimize JavaScript while maintaining flexibility in adding and managing third-party scripts.

By taking advantage of Next/script in Next.js, you can fine-tune the loading of third-party scripts, enhancing the performance and overall user experience of your application.

Lazy Load Components

Why load everything at once when you can take it easy? Utilize lazy loading techniques to defer the loading of non-critical components until they're needed.

So, instead of serving everything for that page together, Next.js can support dynamic imports so you can split the code into small chunks and load whenever necessary. It also helps reduce the application size and improve your app performance.

Conclusion

Boosting Next.js performance is crucial for turbocharging your website and delivering a seamless user experience. By implementing a variety of optimization techniques, such as code splitting, server-side rendering, and caching, you can significantly improve your website's speed and responsiveness. Additionally, leveraging advanced features like Next.js Image Optimization and API routes can further enhance performance and reduce load times.

Remember to monitor your website's performance regularly, analyze bottlenecks, and fine-tune your optimizations accordingly. By prioritizing performance and employing the best practices outlined in this blog and others, you can supercharge your Next.js website, delight your users, and stay ahead of the competition in today's fast-paced digital landscape.

That's all for now folks.

Happy coding

🤖

🌟 Brace yourself for an exciting journey into the world of Next.js 13 and Docker! Welcome to our weekly blog, where we blend the magic of website building with the power of smart containers, all while having a boatload of fun! ⚡️

Similar to Dockerizing other applications, encapsulating your Next.js application on a docker container brings numerous advantages. Firstly, you get to ship the entire stack—not just your code, but also the operating system, specific versions of other languages or executables, and more. This means bidding farewell to the dreaded "works on my machine" syndrome.

But that's not all! Docker also empowers you to run multiple copies of your application, allowing for horizontal scaling. With the ease and cost-effectiveness of spinning up a docker container, scaling your Next.js app becomes a breeze, especially when paired with a container orchestrator like Kubernetes. The benefits of portability and scalability offered by Docker are game-changers for your Next.js applications.

And let's not forget about the caching challenge posed by Next.js applications that utilize server-side rendering and API routes. Since these features can't be cached on a Content Delivery Network (CDN), Dockerizing your Next.js app becomes a seamless solution. It enables easy deployment into a Kubernetes cluster or even serverless containers, opening up a world of possibilities.

So, get ready to explore the fascinating realm where Next.js 13 and Docker intersect. Join me each week as I uncover invaluable tips, tricks, and insights to take your web development adventures to new heights. Let's set sail and unlock the full potential of Next.js and Docker together! 🚀

Key Requirements for Building a Docker Image

To ensure a smooth creation of the Docker image, there are a few prerequisites that need to be met:

1. Node.js and NPM must be installed on your system.

2. Docker needs to be installed as well.

Once these requirements are fulfilled, we can proceed with creating the Next.js app.

Creating a Next.js app

In this article, we will work with a basic next js app generated when you run the command:

npx create-next-app@latest nextjs-docker-app

Run the development server using the command npm run dev which should give an output that the server is running on http://localhost:3000. When you open your browser on the provided URL, you should have an output similar to the one below:

Writing a Dockerfile

Before we begin, let us first define the terms Container and Image, and why we are building a Dockerfile.

An image, or a pre-built package containing the application code and its dependencies, is required to execute within a container. To construct an image, you'll require a Dockerfile, which is a set of instructions that instructs Docker how to build the image.

Docker, in a nutshell, allows developers to simply generate, distribute, and deploy images, resulting in faster development cycles and simpler application management.

With that stated, let's create a file named, "Dockerfile" in our root directory and paste the following content within it.

FROM node:16-alpine
RUN mkdir -p /app
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Here, we defined a base image i.e. node:16-alpine.

What exactly does it do? It will download the node:16-alpine image from the Docker Hub (with Node. js, npm, and other necessary tools pre-installed).

Afterward, as per the instruction, it creates a directory and sets it as a working directory, then copies the application files into the working directory. The “RUN npm install” and “RUN npm run build” lines install dependencies & build the application. Finally, we expose port 3000, and start the application using the command "npm start".

This was our configuration stored inside the Dockerfile.

Now, let’s build an image using this.

docker build -t nextjs-docker-app ./

We tagged(or named) this image as "nextjs-docker-app" and then specified the directory where the Dockerfile is located, which is the root directory for us.

As you can see from the logs, it is retrieving the base image and then executing everything specified in the Dockerfile.

After the process finishes, it will generate a docker image, which you can see using the "docker images" command.

It's 894MB in size and in the next section, we’ll see how you can reduce this number drastically.

To run this image within a container(specifying the port as 3000) use the following command.

docker run -d -p 3000:3000 nextjs-docker-app

You can now go to localhost:3000 and see your app running, but this time from the Docker container.

But wait, our docker image is not optimized 🤨.

Optimizing the Docker Image

Previously, we created a simple Dockerfile and provided some basic instructions to create an image that can be run inside a container.

However, there is room for further optimization as the current image size is 894MB which is not ideal for production apps. There are various methods to optimize the image size, and we will focus on a simple approach based on the factors listed below.

1. Pick a different smaller base image(it’s not always the case): You can use a smaller base image to reduce the image size.

2. Combine commands: You may combine the “RUN npm install” and “RUN npm run build” instructions into a single ”RUN npm ci —quiet && npm run build” command. This reduces the number of layers in the image and its size.

3. Use multi-stage builds: You can divide your Dockerfile into two stages, with the first stage building your app and in the second stage you can copy only the files required. This will reduce redundant files and environments that we created in the first stage.

Here, we will primarily use multi-stage builds to demonstrate how we can easily reduce the size by roughly 100 MB.

Let's proceed with the optimization process by replacing the contents of the existing Dockerfile with the following instructions.

# Build Stage
FROM node:16-alpine AS BUILD_IMAGE
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build


# Production Stage
FROM node:16-alpine AS PRODUCTION_STAGE
WORKDIR /app
COPY --from=BUILD_IMAGE /app/package*.json ./
COPY --from=BUILD_IMAGE /app/.next ./.next
COPY --from=BUILD_IMAGE /app/public ./public
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules
ENV NODE_ENV=production
EXPOSE 3000
CMD ["npm", "start"]

We have divided our Dockerfile file into two sections i.e. "Build Stage" and "Production Stage". And the commands are pretty self-explanatory and straightforward.

For the build stage, the commands are similar to the Dockerfile we created earlier. On the other hand, in the production stage, we are just copying the files that we need from the build stage and running the app.

Let’s build a new app with the new Dockerfile and name this image "nextjs-docker-app-2"

docker build -t nextjs-docker-app-2 .

And as you can see from the command "docker images", the second image saved around 791MB.

You can run this image by running the command "docker run -p 3000:3000 nextjs-docker-app-2" as well, and you will get the app on the browser.

Taking Docker Image Optimization to the Next Level

As we can see, even after optimizing images with the help of multi-stage builds, we don't see significant image optimization because smaller Docker images are easier to deploy and scale. This is why we will be exploring other ways to further optimize our image size.

For that, create or update "next.config.js" file in the root directory to contain the below code.

/**
* @type {import('next').NextConfig}
*/

const nextConfig = {
   experimental: {
       outputStandalone: true,
   }
}

module.exports = nextConfig

According to the documentation, it will create a folder at “.next/standalone” which can then be deployed on its own without installing “node_modules”. It is also one of the most effective methods for optimizing the docker file. You can learn more about it here.

Let's modify the Dockerfile now.

FROM node:18-alpine as builder
WORKDIR /my-space

COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine as runner
WORKDIR /my-space
COPY --from=builder /my-space/package.json .
COPY --from=builder /my-space/package-lock.json .
COPY --from=builder /my-space/next.config.js ./
COPY --from=builder /my-space/public ./public
COPY --from=builder /my-space/.next/standalone ./
COPY --from=builder /my-space/.next/static ./.next/static
EXPOSE 3000
ENTRYPOINT ["npm", "start"]

The code in this section is mostly identical to the Dockerfile we created earlier using a multi-stage build.

As you can see, we did not use node_modules here, but rather the standalone folder, which will optimize the image to a greater extent.

Let’s build a new app with the new Dockerfile and name this image "nextjs-docker-app-3".

docker build -t nextjs-docker-app-3 ./

The resulting image size has now been reduced to 203MB.

Now that's impressive. We can have a faster deployment and enhanced scalability 🥳.

What Really Matters for Docker Image Disk Usage

In the earlier section on optimizing Docker images, we explored many aspects that might influence image size, such as using a smaller base image. However, some sources, such as Semaphore, claim that the size of the base image is irrelevant in some cases.

Instead of the size of the base image, the size of frequently changing layers is the most important factor influencing disk usage. Because Docker images are composed of layers that may be reused by other images, the link between size and disk usage is not always clear.

Two images with the same layers, for example, might have drastically different disk consumption if one of the layers changes often. As a result, shrinking the base image may be ineffective in saving disc space and may restrict functionality.

If you wish to go more into the topic, you may do so here.

When to Consider Docker?

Docker, as we've seen, is a great tool for managing software dependencies and providing consistent environments.

Knowing when to use Docker and when to create a Docker image is crucial in achieving the benefits of this platform.

Docker is ideal for:

1. An Isolated environment (for creating and testing apps)

2. Deployment purposes

3. Scalability

4. Continuous Integration and Deployment (CI/CD)

It goes without saying that if you're using Docker, you'll need Docker images as well.

So, whether you require an isolated environment, want to deploy apps reliably and consistently, or want to ensure consistency across different environments, Docker can help.

That's all for now folks.

Happy coding

:)

What is Next.js?

Before we dive into Next.js 13, let's take a step back and understand what Next.js is. Next.js is a React-based framework for building server-side rendered and statically generated web applications. It was created by Vercel, the company behind the popular Jamstack platform, and has gained a significant following among developers in recent years.

What's new in Next.js 13?

Next.js 13 brings a lot of new features and improvements to the table. Here are some of the most noteworthy ones:

• Server Components

Server components are a new feature in Next.js 13 that allow developers to write server-side code directly within their React components. This can make it easier to create highly dynamic and interactive web applications, as well as improve performance by reducing the amount of data that needs to be sent to the client. With server components, developers can also create reusable server-side logic that can be shared across components.

• Incremental Static Regeneration (ISR)

Next.js 13 introduces Incremental Static Regeneration (ISR), which allows pages to be re-generated on demand, rather than on every request. This can significantly reduce load times and improve the overall user experience. ISR is particularly useful for sites with large amounts of data that don't change frequently, such as e-commerce sites, news sites, or blogs.

• Improved Developer Experience

Next.js 13 has made several improvements to its developer experience, making it easier and more enjoyable to work with. For example, it has improved its integration with popular IDEs like VS Code, making it easier to develop and debug Next.js applications. Additionally, it has added new features like automatic image optimization, which can help to improve performance by reducing image file sizes.

Why learn Next.js 13?

Next.js 13 is a highly popular and in-demand framework, so mastering it can help to improve your career prospects. Additionally, its support for server components and ISR makes it a powerful tool for building highly dynamic and performant web applications. Finally, its developer experience enhancements make it easier and more enjoyable to work with, making it a great choice for developers of all levels.

But beyond the practical benefits of learning Next.js 13, there are also some broader reasons why it's worth investing your time and energy into this framework.

• Future-Proofing Your Skills

The web development landscape is constantly evolving, and it's important to stay up-to-date with the latest tools and technologies. By learning Next.js 13, you'll be future-proofing your skills and ensuring that you're equipped to take on whatever challenges the web throws your way.

• Community and Support

Next.js has a large and active community of developers who are constantly sharing their knowledge and expertise. By becoming a part of this community, you'll have access to a wealth of resources and support that can help you to grow as a developer.

• The Joy of Learning

Finally, learning Next.js 13 can be a deeply satisfying and enjoyable experience. There's something incredibly rewarding about mastering a new tool or technology and using it to create something amazing. So, even if you don't have any practical reasons for learning Next.js 13, the joy of learning itself is a great reason to dive in.

My Thoughts

Next.js 13 is a significant step forward for web development.

Server components and Incremental Static Regeneration are two features that can greatly improve the performance and flexibility of web applications. By allowing developers to write server-side code within their React components, server components can simplify the development process and create more dynamic applications. Meanwhile, Incremental Static Regeneration can greatly reduce load times and improve user experience, particularly for sites with large amounts of data.

Overall, I believe that Next.js 13 is a framework worth learning for any web developer who wants to stay up-to-date with the latest trends and tools in the industry. Its support for server-side rendering and static site generation, combined with its ease of use and community support, make it a powerful and versatile tool for building high-quality web applications.

That's all on this one. More articles on the way about Next.js 13

Happy coding :)

🤖

In this article, we'll explore how to use Docker Compose with a basic Node.js application. We'll cover the basics of Docker Compose, show you how to define a simple application, and demonstrate how to run it using Docker Compose. Then we will check a comprehensive docker-compose.yml file configuration and explain it.

To learn the basics about docker, view my list of introductory articles on the topic here.

Prerequisites.

Before we get started, you'll need the following:

• Docker installed on your machine

• Basic knowledge of Node.js

• Basics about Docker and Dockerfile

Step 1: Set Up Your Node.js Application.

First, let's create a basic Node.js application. Create a new folder on your computer called "dockerapp", and initialize a new Node.js project inside it using the command npm init -y. This will create a package.json file for your project. Then install the express package using the command npm install express.

Create a new file called index.js in your project directory and add the following code to it:

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This code sets up an Express.js application that listens for HTTP requests on port 3000 and responds with "Hello World!" when accessed.

Step 2: Create a Dockerfile.

Next, we'll create a Dockerfile that describes how to build our Node.js application. Create a new file in the "dockerapp" folder called "Dockerfile", and add the following code:

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD [ "npm", "start" ]

This Dockerfile starts with a Node.js image, sets the working directory to "/app", copies the package.json and package-lock.json files into the container, installs the dependencies using npm, copies the rest of the files into the container, and starts the application using the npm start command.

Step 3: Define a Docker Compose File.

Now, let's define a Docker Compose file that describes how to run our Node.js application. Create a new file in the "dockerapp" folder called "docker-compose.yml", and add the following code:

version: '3'
services:
  dockerapp:
    build: .
    ports:
      - "3000:3000"

This Docker Compose file defines a service called "dockerapp" that builds the Docker image using the Dockerfile in the current directory and maps port 3000 from the container to port 3000 on the host machine.

Step 4: Run Your Application with Docker Compose.

Finally, let's run our Node.js application using Docker Compose. Open a terminal window, navigate to the "dockerapp" folder, and run the following command:

docker-compose up

This command builds the Docker image, starts the container, and maps the ports as defined in the Docker Compose file. You should see the output of the application in the terminal window, which should look something like this:

~ Server running at http://0.0.0.0:3000/

Docker Compose beyond just building and running an Express.js application.

One common use case for Docker Compose is to set up a development environment for a multi-container application. You can define each service in your application (such as a database, message queue, or API server) in a separate Dockerfile, and then use Docker Compose to start all of these services together in a development environment. This can help to simplify the development process and make it easier to debug issues that arise.

Another use case for Docker Compose is to set up a production environment for a multi-container application. In this case, you would define the services that make up your application in a docker-compose.yml file and use Docker Compose to deploy the application to a production environment. This can help to ensure that the application is running consistently across multiple hosts and can be easily scaled up or down as needed.

In addition to starting and stopping services, Docker Compose also provides other useful features, such as:

• Networking: Docker Compose automatically creates a network for your application and ensures that each service can communicate with the others.

• Environment variables: You can define environment variables for your services in the docker-compose.yml file, making it easy to configure your application for different environments (such as development, staging, or production).

• Volume management: Docker Compose allows you to define volumes for your services, which can be used to persist data between container restarts.

• Health checks: You can define health checks for your services in the docker-compose.yml file, allowing Docker Compose to monitor the health of your application and automatically restart services if they fail.

Overall, Docker Compose is a powerful tool for defining, building and deploying multi-container Docker applications. It can simplify the development process and help to ensure that your application is running consistently across different environments.

Comprehensive Docker Compose file example

Here's an example of a comprehensive Docker Compose file that sets up a multi-container application consisting of a Node.js API server, a MySQL database, and a Redis message queue:

version: '3'

services:
  api:
    build: ./api
    ports:
      - "3000:3000"
    environment:
      DB_HOST: db
      REDIS_HOST: redis
    depends_on:
      - db
      - redis

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: example
      MYSQL_DATABASE: myapp
      MYSQL_USER: myapp
      MYSQL_PASSWORD: example
    ports:
      - "3306:3306"

  redis:
    image: redis:6.2
    ports:
      - "6379:6379"

In this example, we define three services:

1. api: This service builds a Docker image for a Node.js API server using the ./api directory as the build context. It exposes port 3000 and sets environment variables for the database and Redis hostnames. It depends on the db and redis services.

2. db: This service uses the mysql:5.7 image to provide a MySQL database. It sets environment variables for the root password, database name, and user credentials. It exposes port 3306.

3. redis: This service uses the redis:6.2 image to provide a Redis message queue. It exposes port 6379.

By using Docker Compose, we can start all of these services together with a single command:

docker-compose up

This will build the api Docker image and start all three services. We can then access the API server by visiting http://localhost:3000 in a web browser.

Conclusion.

By defining our services in a docker-compose.yml file, we can easily deploy this application to other environments (such as a staging or production server) by running the same command. We can also take advantage of other Docker Compose features, such as volume management and health checks, to ensure that our application is running smoothly.

That's all friends.

Keep coding 😀.

Using Dockerfile, you can easily automate the building of your Docker images, making it easier to deploy your application across different environments. This helps to ensure consistency and reliability in your application deployment.

Dockerfile also provides a way to version control your images, making it easier to manage changes and track updates. This allows you to keep track of the changes made to your application and ensures that everyone on your team is working with the same version.

With Dockerfile, you can also optimize the size of your images by removing unnecessary dependencies, reducing the time it takes to build and deploy your application. This makes Dockerfile a powerful tool for containerization and DevOps.

Overall, Dockerfile is an essential tool for building, deploying, and managing Docker images. With its simplicity and flexibility, it's a must-have for any developer looking to containerize their application and streamline their deployment process.

Let's explore the different types of Dockerfile instructions and how they work together to build a Docker image. By understanding these Dockerfile instructions, you can optimize your Docker image-building process and streamline your application deployment workflow.

Here are the main types of Dockerfile instructions:

1. FROM: Specifies the base image to be used for the container. Every Dockerfile starts with a FROM instruction.

2. RUN: Executes a command during the build process of the Docker image.

3. COPY: Copies files or directories from the build context (the folder where the Dockerfile is located) to the container.

4. ADD: Similar to COPY, but it also supports downloading files from URLs and extracting tar archives.

5. WORKDIR: Sets the working directory for subsequent instructions.

6. ENV: Sets environment variables inside the container.

7. EXPOSE: Informs Docker that the container will listen on the specified network ports at runtime.

8. CMD: Specifies the command to be run when the container starts.

9. ENTRYPOINT: Similar to CMD, but it specifies the command to be run when the container starts as an executable.

10. VOLUME: Creates a mount point in the container for external volumes.

These are the main types of instructions you'll encounter in a Dockerfile. Each instruction plays a specific role in building and configuring the Docker image, and understanding them is essential to creating effective Dockerfiles.

#docker #dockerfile #containerization #devops

In React, you can either choose to allow the browser to handle most of the form elements and collect data through React change events, or you can use React to fully control the elements by setting and updating the input value directly. The first approach is called an uncontrolled component because React is not setting the value. The second approach is called a controlled component because React is actively updating the input.

In this article, we will check the two ways of handling forms in a React.Js application, how to submit a form (e.g. callback handler), and how to reset a form (e.g. after submission). By the end of this tutorial, you’ll be able to make a variety of forms using text inputs, checkboxes, select lists, and more.

Prerequisite

• Have a development environment running Node.js

• A React development environment set up with Create React App.

• Basic knowledge of React such as how to manage state using useState, how to create components, etc.

• You will also need a basic knowledge of JavaScript and HTML. We will also be using Tailwind CSS for our styling and basic knowledge of the framework would be beneficial. However, you don't need to know Tailwind CSS as all the styling is provided.

• Click Here to get the starter code. The code to the complete demo used in this article is provided at the end of the article.

REACT FORM BY EXAMPLE

A common example of a form in various web applications is a login form where we capture both the email and password of the user we want to authenticate. A functional representation of such a form is as shown below

import React from "react";

const Form = () => {
    return (
        <form className="form">
            <div className="form-group">
               <label htmlFor="email">Email</label>
               <input className="form-input" type="email" />
            </div>
            <div className="form-group">
               <label htmlFor="password">Password</label>
               <input className="form-input"  type="password" />
            </div>
            <button className="form-button">Submit</button>
        </form>
    );
};

export default Form;

If you click submit button, the form will reload. This is the default behavior of a form that we should prevent in our form. We need to handle the submit event inside the component

To handle the event, we’ll add an event handler to the <form> element, not the <button>. Create a function called handleSubmit that will take the SyntheticEvent as an argument. TheSyntheticEvent is a wrapper around the standard Event object and contains the same interface. Call .preventDefault to stop the page from submitting the form then trigger an alert to show that the form was submitted:

import React from "react";

const Form = () => {
    const handleSubmit = (event) => {
        event.preventDefault();
        alert("You have submitted the form.");
    };

    return (
        <form className="form" onSubmit={handleSubmit}>
            <h4>Login</h4>
            <div className="form-group">
                <label className="form-label">
                    Email
                </label>
                <input className="form-input" type="email" />
            </div>
            <div className="form-group">
                <label className="form-label">
                    Password
                </label>
                <input className="form-input"  type="password" />
            </div>
            <button className="form-button">Submit</button>
        </form>
    );
};

export default Form;

Collecting Form Data Using Controlled Components

In the form above, we are rendering a simple form having two inputs one for email and the other for password. Nothing special. It is just like our regular HTML input. But to handle this input in React, we will need to understand the concept of a controlled input.

Uncontrolled and Controlled Input

In a React application, an "uncontrolled input" is an input field that is not associated with a React component state. This means that the value of the input is not managed by the React component, and the component does not have direct access to the value of the input.

On the other hand, a "controlled input" is an input field that is associated with a React component state. The value of the input is managed by the React component, and the component has direct access to the value of the input. This means that the component can programmatically control the value of the input, as well as respond to changes in the input value.

We will use the controlled way to handle the input's state. The benefit of using controlled input is that we are making the component state the single source of truth for the inputs. All we have to do is declare a state object where data will live.

const [email, setEmail] = useState("") // Set default value to ""

Now, for us to make the input field a controlled input, we assigned the state variable (which contains a default empty string) to the value prop.

<input className="form-input" value={email} type="text" />

After adding the value prop to input and assigning it to the email value from the state, if you try to write anything in the email text field, nothing will happen. This is because the value prop is assigned a state variable whose value is set to an empty string. And this is being forced on the input.

This is good because we now have total control over the input state. Let’s go ahead and update it. Update the code to include an onChange event handler.

const handleChange = e => {
    setEmail(e.target.value)
  }
...

<input className="form-input" value={email} onChange={handleChange} id="email" type="text" />

React needs an onChange handler to keep track of any changes in the field. Anytime you write something in the input field, this onChange event will trigger and then call its handleChange function that will re-render the state using setEmail function.

At this point, we have a controlled email input field where its state is being managed by its component.

Handling Multiple Inputs

In reality, you’ll be working with multiple input fields in your React application. Our example form has two inputs for email and password. In this scenario, we will make a simple adjustment not only to the handler function but also to the input element and the state.

We could decide to set up another useState Hook for the password input. Then go ahead and assign its state variable to the value prop. But this approach will require us to define another handler function to update the input state.

When we need to handle multiple inputs, we don’t want to make a new onChange handler function for each input. Therefore, we want to make a function that can set all values.

We can do that as follows:

const [state, setState] = useState({
    email: "",
    password: "",
  })

const handleChange = (e)=> {
    setState({
        ...state,  
        [e.target.name]: e.target.value
    });
}

NB: Our form elements must have a name property with a value matching the key for the elements state. For example, the email input must have name="email" since we are using the key email on the state to store the value for that input and the password input must have name="password".

Our input will change to be:

...
# Email Input
<input
    className="form-input"
    type="email"
    name="email"
    value={state.email}
    onChange={handleChange}
/>

...
# Password Input
<input
    className="form-input"
    type="password"
    name="password"
    value={state.password}
    onChange={handleChange}
/>

What is happening?

First, you will notice a significant change in the code. We started by modifying the useState Hook to include an additional input data. From there, we have access to the email and password through state.emailand state.passwordas used in the value prop of their respective input element.

In these input elements, we’ve added a name prop that holds also their respective state name (i.e emailand password). This is very important.

import React, { useState } from "react";

const Form = () => {
    const [state, setState] = useState({
        email: "",
        password: "",
    });

    const handleChange = (e) => {
        setState((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };
    const handleSubmit = (event) => {
        event.preventDefault();
        alert("You have submitted the form.");
    };

    return (
        <form className="form" onSubmit={handleSubmit}>
            <h4>Login</h4>
            <div className="form-group">
                <label className="form-label">
                    Email
                </label>
                <input
                    className="form-input"
                    type="email"
                    name="email"
                    value={state.email}
                    onChange={handleChange}
                />
            </div>
            <div className="form-group">
                <label className="form-label">
                    Password
                </label>
                <input
                    className="form-input"
                    type="password"
                    name="password"
                    value={state.password}
                    onChange={handleChange}
                />
            </div>
            <button className="form-button">Submit</button>
        </form>
    );
};

export default Form;

Now, let’s focus on the handleChange function. Here, we are using the setState function to update the inputs state.

const handleChange = (e)=> {
    setState({
        ...state,  
        [e.target.name]: e.target.value
    });
}

In this function, we are simply assigning to the element that is being targeted (through [e.target.name]) their corresponding values.

Still on the handleChange function. Anytime we group related data as we have it in the state variable, the state returned by the useState hook is not merged with that of the update passed to it. In other words, the useState Hook doesn’t merge the old and new state. Instead, it overrides the entire state with that of the current. So to avoid this scenario, we merge them by spreading the entire state object using the three dots before the state and overriding the part of it.

Now that you know how the control field works in React, adding any other input fields to a form will be a piece of cake. We need to update the state object to include the property for the new input, add the input, eg textarea to our form and add the name, value, and onChange properties to it similar to how we added them to the email and password input. Let's check some examples of other inputs.

The TextArea Input Field

In React, the textarea is defined as a self-closing element just like the input element.

As expected, we will have the state manage the user’s input (i.e textarea message). So, update the state to include a message property like so:

const [state, setState] = useState({
        email: "",
        password: "",
        message: ""
});

Next, add a textarea element in the form like so:

...
return (
    <form className="form" onSubmit={handleSubmit}>
            ...
            <div className="form-group">
                <label className="form-label">
                    Message
                </label>
                <textarea
                    className="form-input"
                    name="message"
                    value={state.message}
                    onChange={handleChange}
                />
            </div>
            <button className="form-button">Submit</button>
        </form>
)

Take note of the value and name prop in the textarea element. Just like the input field, the string assigned to the name prop must be the same as what we declared in the state object.

The Select Input Field

This is not different from the other input fields. As usual, we can make it a controlled input by first having the state manage the input data. Then add a value prop to the element and finally update it through the onChange handler function (but in our case, we don’t have to do anything here because we have the logic set already).

And don’t forget to add a name prop (to the element) that matches the name in the state. So let’s create a dropdown list with options to select car brands.

As expected, add a new property in the state. In my case, I will call it carBrand.

const [state, setState] = useState({
  ...
  carBrand: "",
});

Then, add the select element just before the closing </form> tag:

...
return (
    <form className="form" onSubmit={handleSubmit}>
            ...
            <div className="form-group">
                <label className="form-label">
                    Favorite Car Brand
                </label>
                <select
                    className="form-input"
                    name="carBrand"
                    value={state.carBrand}
                    onChange={handleChange}
                >
                    <option value="mercedes">Mercedes</option>
                    <option value="bmw">BMW</option>
                    <option value="audi">Audi</option>
                </select>
            </div>
            <button className="form-button">Submit</button>
        </form>
)

The Checkbox Input Field

Unlike the other input fields, the checkbox uses a checked prop (which is a Boolean attribute) instead of the value prop. The idea is that a checkbox is either checked or not.

We will need to adjust the handler function to accommodate the checkbox type of input. Ok, let’s start by adding a new property to the state. We can call it isChecked.

const [state, setState] = useState({
  ...
  isChecked: false,
});

Here, we assign a Boolean value of false so that the input field is unchecked by default. Next, add input checkbox just before the closing </form> tag.

...
return (
    <form className="form" onSubmit={handleSubmit}>
            ...
            <div className="form-group">
                <label className="form-label">
                    <input
                        type="checkbox"
                        className="form-input"
                        name="isChecked"
                        checked={state.isChecked}
                        onChange={handleChange}
                    />
                    Remember Me?
                </label>
            </div>
            <button className="form-button">Submit</button>
        </form>
)

Finally, update the handleChange function so you have:

const handleChange = e => {
   const value = e.target.type === "checkbox" ? e.target.checked : e.target.value; 
    setState({
        ...state,
        [e.target.name]: value
    })
}

In this function, we cannot use the earlier logic to manage the checkbox because it doesn’t have the value but checked attribute. So you’d need to adjust it if you want the same handleChange to manage the checkbox.

As seen in the handler, we now target the type and the checked attribute from this event parameter, e. From there, we are using the ternary operator, which is an inline if-statement to check the input types and then assign their corresponding value (either Boolean e.target.checked for the checkbox or e.target.value for every other input types).

The Radio Input Field

The radio input types combine the input text and the checkbox type. In other words, they use both the value and the checked prop.

We will create radio inputs that allow users to select gender. As expected, let’s add that to the state.

const [state, setState] = useState({
  ...
  gender: "",
});

Then, add the radio inputs just before the closing </form> tag:

...
return (
    <form className="form" onSubmit={handleSubmit}>
            ...
            <div className="form-group">
                <label className="form-label">
                    <input
                        type="radio"
                        className="form-input"
                        name="gender"
                        value="male"
                        checked={state.gender === "male"}
                        onChange={handleChange}
                    />
                    Male
                </label>
                <label className="form-label">
                    <input
                        type="radio"
                        className="form-input"
                        name="gender"
                        value="female"
                        checked={state.gender === "female"}
                        onChange={handleChange}
                    />
                    Female
                </label>
            </div>
            <button className="form-button">Submit</button>
        </form>
)

What’s happening?

As you know already, once you have the state manage your input, you immediately assign the state property to the name prop of the input. You should know from HTML that radio group share the same name. This allows us to select only one button at a time.

Notice that the value prop in these inputs are static unlike that of text inputs where its value comes from the state.

And finally, with the checked prop, we are saying that if the condition assigned is true, that radio button should be checked.

Simple as that!

While working with inputs in a React application, these are the most popular and all that we cover in this article.

Conclusion

We should handle input changes by writing controlled components. To do this, we attach an event handler function to the onChange event.

To handle form submission, we attach an onSubmit event handler to the form, and then get the event an object from the parameter and call event.preventDefault inside so we can run JavaScript code in the handler.

To handle multiple input changes with one onChange handler, we get the name and value properties from event.target from the handler’s parameter and update it with the dynamic property name feature available since ES6.

Source Code => https://github.com/marville001/form-handling-react

Be on the lookout for part 2 of this blog covering form validation using libraries such as react-hook-form and formik.

That's all for this article.

Thank you :)

This is a major problem in software development and a couple of technologies have come up trying to solve this challenge of differing environments, deployment configurations, and automation. Docker is the mostly used and effective solution.

To learn about the basics of docker, check out my intro blog to docker Here.

What is Dockerization?

This is the process of packaging your application, together with all its dependencies and environments into a container (a completely isolated running process).

Dockerizing an application involves identifying and specifying everything that your applications need to run into a Dockerfile and then building a Docker image using it. A Docker image is an environment that can be replicated and is guaranteed to run on other machines.

Dockerizing an application simply involves 3 steps

• Preparing a Dockerfile.
• Building a Docker image.
• Running a docker container from the image.

So let's dive into dockerizing a Node.js app

Setting Up a Demo Node.js App

To make the demo for the concepts in this article, we will use a demo nodejs app that provides an endpoint for fetching posts. The app uses the JSONPlaceholder fake API. You can clone the app into your computer using the following command

git clone https://github.com/marville001/docker-nodejs-demo

Once you have downloaded the app, cd into the project folder and run npm install to install all the required dependencies. The app has one file index.js which should look as shown below.

const express = require("express");
const fetch = require("node-fetch");

const app = express();

app.use(express.json());

app.get("/posts", async (req, res, next) => {
    try {
        const URL = "https://jsonplaceholder.typicode.com/posts?_limit=5";

        const response = await fetch(URL);
        const data = await response.json();

        res.status(200).send(data)
    } catch (error) {
        res.status(500).json({
            message: "Failed To Get Posts",
            error: error.message,
        });
    }
});

const PORT = process.env.PORT || 9000;
app.listen(PORT, () => console.log(`App running on post ${PORT}`));

Run the command npm start to start the application and in your browser go to http://localhost:9000/posts to view a list of 5 posts.

Creating a Dockerfile

There are many ways to use Docker, but the best way is through the creation of Dockerfiles. A Dockerfile essentially gives build instructions to Docker when you build a container image.

To get started, we need to specify which base image to pull from. We will specify the base image to be the official Node image since it gives us what we need to run our application and has a small footprint. To be specific we will use node:16-alpine

Create a file called Dockerfile:

# Dockerfile

FROM node:16-alpine

WORKDIR /app

COPY package*.json .

RUN npm install

# Copy the source files into the image
COPY .   .

EXPOSE 9000

CMD ["npm", "start"]

The Dockerfile consists of the following commands:

• FROM: tells Docker what base image to use as a starting point. We specifies the base image to be the official Node.js Alpine Linux image. Alpine Linux is used here due to its small size, which helps a lot when transporting images from one machine to the other
• WORKDIR: changes the active directory. For our case, it sets the working directory to /app. This directory will be created if it doesn't exist.
• RUN: executes commands inside the container.
• EXPOSE: tells Docker which ports should be mapped outside the container. We need to expose the port 9000 that the application will run on through this instruction:
• CMD: defines the command to run when the container starts.

Building images should be fast, efficient, and reliable. Every command you execute results in a new layer that contains the changes compared to the previous layer. These layers will stack on top of each other, adding functionality incrementally.

Create a file called .dockerignore:

.git
.gitignore
node_modules/

The .dockerignore is similar to a .gitignore file and lets us safely ignore files or directories that shouldn’t be included in the final Docker build.

Build the Docker Image

Now that the Dockerfile is complete, it's time to build the Docker image according to the instructions in the file. This is achieved through the docker build command. You need to pass in the directory where the Dockerfile exists and your preferred name for the image:

$ docker build -t demo-app .

You can run docker images to view some basic info about the created image:

Run the Docker Image in a Container

Use the docker run command to run your newly minted Docker image inside of a container. Since the application has been built into the image, it has everything it needs to work. It can be launched directly in an isolated process. Before you can access your running image inside the container, you must expose its port to the outside world through the --publish or -p flag. This lets you bind the port in the container to a port outside the container.

docker run -p 9000:9000 demo-app

The command above starts the demo-app image inside of a container and exposes port 9000 inside the container to port 9000 outside the container. You can access the posts through http://localhost:9000/posts.

That's all from this article. Keep coding :)

Thank you

In this article, we will take a look at the best way to get started with using Docker. You will learn how to create and deploy Docker apps. Then you can also update and share your containerized app.

What we will cover

• What is docker
• The problem Docker solves
• Docker Terminologies
• Docker installation
• Docker commands and how to use them

What Is Docker

In much-simplified terms, Docker is a platform that simplifies the process of building, running, managing, and distributing applications. It is designed to deliver your applications way faster as compared to when not using it. Its key claim is that you can swiftly provide software by separating your software applications from your regular infrastructure. And all of this is accomplished by simply virtualizing the operating system that is installed and functioning on your machine.

The Problem Docker Solves

The Problem

We can consider a scenario where we have 3 different Python applications each using a different version of Python as well as its associated libraries and dependencies. We want to deploy and host these applications on a single server. The problem becomes that we can't have different versions of Python installed on the same machine which prevents us from running the applications on the same computer.

Solution without docker

The solution would be hosting them on three different machines which is not the case we want or getting a machine powerful enough to host and run three virtual machines on it. These two solutions are very costly and have more work for procuring and maintaining the hardware. You also have to consider that you have to set up the Operating System on each machine and the Python environment required for each app manually which is quite cumbersome and repetitive. Now, let's look at docker, how it works and how it can help us solve this problem in a much simpler way.

To work with docker you just require one machine / operating system with Docker installed in it (Docker host). Instead of having to install a virtual machine for each application we have, we just package the application with its dependencies in one unit called a container. Let's look at some docker terminologies before diving even deeper

Docker Terminologies

1. Docker Host - The machine on which docker is installed and running.
2. Docker Engine - a containerization technology based on open-source for containerizing and building your applications. This is responsible for the overall functioning of the Docker platform.
3. Docker Image - This is a template that contains the application, and all the dependencies required to run that application on Docker.
4. Docker Container - This is the running instance of the Docker Image
5. Dockerfile - Is a simple document that contains instructions on how to create Docker Images
6. Docker Compose - This a tool for outlining and running multi-container Docker applications. (We will cover this in another article)
7. Docker Hub - This is the official online repository where you can store, distribute custom images or find other Docker Images available for public use

Docker Installation

Before using docker locally or on a machine instance running on the cloud, you need to have Docker installed. Below are links to install docker on Ubuntu, Debian, and Windows. The steps are straightforward.

• Windows Installation
• Debian Linux Installation
• Ubuntu Installation

If you just want to practice using docker commands, You can use the Docker Playground

Docker Commands

Now that we have already installed docker (assuming you have followed the steps in the links above to install it), let's check some docker commands.

docker create

Allows you to create new containers. It has the following syntax

docker create [options] IMAGE [commands] [arguments]

NB: The things enclosed in brackets are optional. You can also run docker create --help to learn more about each.

Example: docker create ubuntu -t -i ubuntu bash

This will create a container using the ubuntu image. The -t and -i options tell Docker to give the container a terminal so that the user can communicate with it. If the container is launched, the create command is also used to run the bash command. Docker will first check if you have the image locally and if not it will go ahead and download it from the Docker hub and use it to create the container.

docker ps

Allows you to view the currently running containers. To view all containers including those already exited, add -a to the command. docker ps -a

Let's explain some of the details returned by the command

• CONTAINER ID - A singular string consisting of alphanumeric characters, related to each container.
• IMAGE - Name of the Docker image used to create this container.
• COMMAND - Any application-specific command(s) that must be executed when the container is started.
• CREATED - It displays the time taken since this container has been created.
• STATUS - This shows the present status of the container.
• PORTS - This shows whether port mappings are defined for the container or not.
• NAMES - Each container is also given a unique name in addition to the CONTAINER ID. If you want to give the container a name, use the --name (double hyphen name) option in the docker create or docker run command.

docker images

To view all the Docker images on your computer.

Let's explain some of the details returned by the command

• REPOSITORY - This represents the unique name of the Docker Image.
• TAG - Each image is associated with a unique tag. A tag basically represents a version of the image.
• IMAGE ID - A unique string consisting of alpha-numeric characters, associated with each image.
• CREATED - This shows the time elapsed since this image has been created.
• SIZE - This shows the size of the image.

Once you have an image locally on your computer, you can create a container based on it using the docker run command. Eg docker run hello-world. To explicitly name the container when running it, use the –name option, like this: docker run --name helloworld hello-world

docker rmi

This command allows us to remove an image from the Docker host.

docker rm

Once you are done with a container and no longer need it, you can delete it using the docker rm command. You need to first get the container id using the docker ps -a command and specify the id together with the docker rm command.

docker rm 1d0284a0eae1

docker start and docker stop

If you just want to stop a container from running without deleting it, you can use the docker stop id command to halt a container. Then to start the halted container just use docker start id.

docker restart

This command restarts any running container.

That's all from this article. I will prepare another article on how to create custom images using a Dockerfile. Until then, keep coding :)

Thank you.