DEV Community: Rushi Patel

Interview Cheat Sheet: App Performance in React Native

Rushi Patel — Sat, 08 Mar 2025 16:28:36 +0000

Special Article: Interview Cheat Sheet

This cheat sheet is designed to help you quickly answer interview questions and prepare for presentations on optimizing app performance in React Native. It covers the need for performance optimization, detailed app-level and code-level strategies, what React Native offers out of the box, and common mistakes to avoid.

Why Focus on App Performance in React Native?

User Experience
Engagement & Retention
Resource Efficiency
Competitive Advantage

What this cheat sheet covers:

App-Level Optimizations: Strategies that affect the overall app architecture and resource management.
Code-Level Optimizations: Best practices in coding to reduce unnecessary computations and improve rendering.
React Native Features: Built-in tools and libraries that enhance performance.

App-Level Optimizations

Efficient Asset Management:
- Use appropriately sized images and leverage caching tools.
- SVGs & CDN: Utilize SVGs for vector images and host images on a CDN to reduce bundle size.
- Implement lazy loading to defer non-critical assets until needed.
Network Optimizations:
- Request Batching: Combine multiple network requests into one.
- Use caching strategies to reduce redundant calls.
Optimized Build Configuration:
- Code Splitting: Load only the necessary code chunks.
- Tree Shaking: Remove unused code with modern bundlers.
- Minification & Obfuscation: Use production builds to reduce size and improve load times.
Profiling & Monitoring:
- Integrate tools like Flipper to monitor performance.
- Employ error tracking services (e.g., Sentry) to catch runtime issues early.

Code-Level Optimizations

Optimizing Rendering:
- Avoid Unnecessary Renders: Use React.memo, PureComponent, and control re-renders.
- Leverage useMemo and useCallback to memoize values and functions.
Avoid Inline Functions & Objects:
- Define functions and objects outside of render or memoize them to prevent re-creation on each render.
Efficient State Management:
- Keep state localized when possible.
- Use immutable updates to make re-render decisions more efficient.
Optimizing Animations:
- Always set useNativeDriver: true to offload animation work to native code.
- This is transfer the heavy animation operations from JS to Native side (Android/iOS)
Avoid Expensive Computations in Render:
- Precompute heavy values outside the render cycle.
- Reuse the heavy computed values instead of calculating them every single time.
Virtualization:
- Use FlatList, SectionList, or VirtualizedList to render large datasets efficiently.
- Avoid using ScrollView when rendering homogeneous large data and instead leverage the Virtualization.
Effective use of useEffect:
- Manage side effects properly. For example, fetch data on component mount:
- Verify the dependency array is correct to avoid unnecessary trigger of useEffects.
- There is no thumb rule, but try to avoid using too many useEffects in a single component.
Error Boundaries:
- Implement error boundaries to catch and handle runtime errors gracefully.
- This improves the User Experience (UX) as app doesn't crashes for runtime errors.
Leveraging Async Operations:
- Use asynchronous functions (async/await) to offload heavy computations and avoid blocking the main thread.
Advanced Network Optimizations:
- Implement request batching, pagination, and caching responses at the code level to reduce data load and improve performance.

What React Native Provides for a Performant App (Brief)

Hermes JavaScript Engine: Improves start-up time and reduces memory usage.
Native Driver for Animations: Offloads animations to native code.
Flipper Integration: Provides insights into network calls, layout performance, and more.
Fast Refresh: Enhances developer experience by retaining component state during updates.
Bridging Architecture: Efficient communication between JavaScript and native modules. (part of Old Architecture)
Optimized UI Components: Components like FlatList, SectionList, and VirtualizedList are designed for high performance.
Over-the-Air Updates: Use tools like CodePush to deliver performance improvements without a full app update.

Pro-tip:
Leveraging tools like SonarQube, ESLint, and Prettier

Using these tools can significantly improve code quality while writing it. These tools help enforce best practices, catch potential bugs early, and ensure consistency in the codebase.

Integrating them into your development workflow enables real-time feedback, reducing technical debt and improving maintainability.

Closing Comments

This cheat sheet serves as a handy reference to quickly recall essential strategies and best practices when discussing or implementing performance optimizations in React Native. Use it to prepare for interviews, technical discussions, or presentations, and ensure you cover both high-level concepts and practical code-level techniques.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Happy interviewing and coding!

Rushi Patel, Signing Off! 😊

Optimising App Performance in React Native: A Detailed Guide

Rushi Patel — Wed, 05 Mar 2025 05:28:17 +0000

React Native App Performance

In today's fast-paced digital world, app performance directly impacts user experience, engagement, and retention. React Native simplifies cross-platform development, but as apps grow in complexity, maintaining optimal performance becomes challenging.

This guide explores key performance factors, best practices, and optimization strategies—both at the app and code level—along with common pitfalls and real-world examples to help you build smooth, efficient applications.

The Need for a Performant App

A high-performance app is crucial for several reasons:

Enhanced User Experience: Slow load times, laggy interactions, or choppy animations can frustrate users and drive them away from your app.
Higher Engagement & Retention: A smooth, responsive interface encourages users to spend more time on the app, which is key for user retention and engagement.
Better Reviews & Ratings: Users are more likely to leave positive reviews when they have a seamless experience.
Efficient Resource Usage: Optimized performance means your app uses less battery and data, which is essential for mobile devices.

Factors That Influence App Performance

While some performance considerations are specific to React Native, many factors apply universally to mobile apps:

CPU and Memory Usage: Excessive computations or memory leaks can slow down your app, especially on devices with limited resources.
Network Latency: Unoptimized network calls and large payloads can lead to delays in data fetching.
Rendering Efficiency: The way UI elements are rendered (e.g., overdraw, heavy animations) can significantly affect performance.
Concurrency and Multithreading: Proper handling of asynchronous tasks ensures that heavy computations do not block the main UI thread.
Resource Loading: Efficiently loading images, fonts, and other assets is critical to reduce initial load times.
Garbage Collection: Inefficient memory management can lead to frequent garbage collection pauses, causing jank.

Improving Performance in React Native

Optimizing performance in React Native involves strategies at both the app level and the code level. Let's dive into these two areas:

App-Level Optimizations

Efficient Asset Management:
- Image Optimization: Use appropriately sized images and leverage tools like react-native-fast-image to handle caching and progressive loading.
- SVGs & CDN: Use SVGs for vector images when possible and consider hosting your images and other static assets on a Content Delivery Network (CDN) instead of bundling them with the app. This approach reduces bundle size and improves load times.
- Lazy Loading Assets: Load non-critical assets on demand rather than at startup.
Network Optimizations:
- Batching Requests: Reduce the number of network calls by batching data requests.
- Caching Strategies: Implement caching mechanisms to minimize repeated network calls.
Optimized Build Configuration:
- Code Splitting: Break your code into smaller chunks and load them as needed.
- Tree Shaking: Use modern bundlers that support tree shaking to remove dead code and reduce bundle size. (Learn More)
- Minification and Obfuscation: Use production builds with minification to reduce app size and load times. (Learn More)
Profiling and Monitoring:
- Performance Monitoring Tools: Integrate tools like Flipper and React Native Performance Monitor to identify bottlenecks.
- Error Tracking: Use services such as Sentry to monitor runtime errors that could impact performance.

Code-Level Optimizations

Optimizing Rendering:

Avoid Unnecessary Renders: Use React.memo, PureComponent, or shouldComponentUpdate to prevent redundant renders.

useMemo & useCallback: Leverage these hooks to memoize values and callbacks, preventing the creation of new instances on every render.


import React, { useCallback, useMemo } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const MyComponent = ({ data }) => {
  const handlePress = useCallback(() => {
    // handle press action
  }, []);

  const containerStyle = useMemo(() => ({
    padding: 10,
    backgroundColor: '#fff'
  }), []);

  return (
    <TouchableOpacity onPress={handlePress} style={containerStyle}>
      <Text>{data.title}</Text>
    </TouchableOpacity>
  );
};

export default MyComponent;

Avoiding Inline Functions and Objects:
- Define functions and objects outside of render methods or memoize them using hooks to avoid creating new instances on every render. Which will eventually improve the app performance.
Efficient State Management:
- Local vs. Global State: Keep state as localized as possible to avoid unnecessary re-renders. Use libraries like Redux or MobX judiciously.
- Immutable Data Structures: Prefer using immutable updates so React can quickly determine when a re-render is necessary.

Optimizing Animations:

Use Native Driver: For animations, always set useNativeDriver: true when possible. This offloads animation calculations from JavaScript to the native side.

import { Animated } from 'react-native';

Animated.timing(this.state.fadeAnim, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // set this to true where possible
}).start();

Avoiding Expensive Computations in Render:
- Precompute Values: Move heavy calculations outside the render cycle. Consider computing them during data fetching or within lifecycle methods/hooks.
Virtualization:
- Virtualized Lists: Utilize React Native's built-in components like FlatList, SectionList, or VirtualizedList to efficiently render large datasets. Virtualization ensures that only the visible items are rendered, which reduces memory usage and improves performance.
Effective use of useEffect:
- Managing Side Effects: Use the useEffect hook to handle side effects efficiently. For example, fetching data once when a component mounts.
- Make sure hooks have correct variables in dependency array in order to under or over calls of effects.

Error Boundaries:

Handling Runtime Errors: Implement error boundaries in your application to catch errors in the component tree and prevent the entire app from crashing. This is a key factor in User Experience.

Wrap critical components with <ErrorBoundary> to ensure graceful error handling.

import React from 'react';
import { View, Text } from 'react-native';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Log error details to an error reporting service
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View>
          <Text>Something went wrong.</Text>
        </View>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Leveraging Async Operations:
- Offloading Heavy Tasks: Use asynchronous operations (e.g., async/await, Promises) to ensure heavy computations or data fetching do not block the main UI thread.
```
const processData = async (data) => {
  // Process data asynchronously
  const result = await heavyComputation(data);
  return result;
};
```
Advanced Network Optimizations:
- Request Batching, Pagination & Caching: In addition to app-level network strategies, incorporate code-level optimizations such as:
  - Request Batching: Combine multiple API requests into a single call when possible.
  - Pagination: Load data in chunks rather than all at once, which reduces initial load time.
  - Caching Responses: Cache network responses locally to minimize repeated calls and improve perceived performance. Can use some API Clients like React Query which provideds in-built functionality of caching.

What React Native Provides for building a Performant App

React Native comes with several built-in features and tools designed to help you build high-performance applications. Here are some key offerings:

Hermes JavaScript Engine:

Hermes is an open-source JavaScript engine optimized for React Native. It reduces memory usage, improves start-up time, and offers better overall performance by compiling JavaScript ahead-of-time.
Native Driver for Animations:

React Native's Animated API allows you to leverage the native driver (useNativeDriver: true), which offloads animation calculations from the JavaScript thread to the native side, ensuring smoother and more efficient animations.
Flipper Integration:

Flipper is a debugging and performance tool that comes integrated with React Native. It provides insights into network requests, layout performance, and more, allowing you to identify and resolve performance bottlenecks quickly.
Fast Refresh:

While primarily a developer experience feature, Fast Refresh helps you quickly iterate on your app without losing its state. This efficiency can indirectly contribute to better performance tuning by making it easier to test changes in real time.
Bridging Architecture: (Available in React Native Versions below 0.76)

React Native's bridge allows for efficient communication between JavaScript and native modules. This separation ensures that heavy computations or platform-specific operations can be executed natively, reducing the burden on the JavaScript thread.
Optimized UI Components:

Built-in components like FlatList, SectionList, and VirtualizedList are optimized for rendering large datasets, ensuring that your app remains responsive even when handling complex lists.
Code Push and Over-the-Air Updates:

Tools like Microsoft's CodePush allow you to update your app's JavaScript bundle without requiring a full app store update. This enables you to roll out performance improvements quickly and efficiently.

By leveraging these built-in features, you can significantly enhance the performance of your React Native applications while reducing development time and complexity.

Common Mistakes That Affect Performance

Even experienced developers can inadvertently introduce performance issues. Here are some common pitfalls to avoid:

Overusing Anonymous Functions:

Defining functions inline in render methods can lead to unnecessary re-renders. Instead, define them outside or memoize them using useCallback.
Neglecting List Optimization:

Rendering large lists without proper optimization (e.g., using FlatList with initialNumToRender, getItemLayout, and keys) can lead to performance bottlenecks.
Improper Use of State:

Updating state frequently or in large batches can cause excessive re-rendering. Batch updates or use debouncing/throttling where needed.
Ignoring Performance Profiling:

Not taking advantage of profiling tools means missing out on identifying the true bottlenecks in your application.
Excessive Re-renders Due to Inline Styles and Objects:

Recreating style objects and other non-primitive values on every render forces React to re-render components unnecessarily.

Interview Cheat Sheet: React Native App Performance

I've created a special interview-focused guide on optimizing React Native app performance. It serves as a quick reference, covering key optimizations, best practices, and common pitfalls—all in a concise format. Save it now for easy access!

Read the article

Closing Comments

Optimizing React Native performance is an ongoing process that combines architectural decisions with code-level improvements. By avoiding unnecessary re-renders, optimizing lists, and leveraging performance monitoring tools, you can ensure a smooth user experience.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Rushi Patel, Signing Off! 😊

Mapped and Conditional Types in TypeScript: A Deep Dive

Rushi Patel — Mon, 03 Mar 2025 05:18:24 +0000

TypeScript is a top choice for large-scale JavaScript apps, thanks to its powerful type system. Two key features— Mapped Types and Conditional Types —let you transform and optimize types efficiently.

In this post, we’ll explore their syntax, applications, and how to build custom utility types.

Pro Tip:
If you are new to Utility Types of TypeScript, it would be great to refer this article. It'll help you getting maximum from this article. Read Article here

Introduction

In TypeScript, you often need to transform types—making properties optional, required, or filtering keys. While Mapped & Conditional Types aren’t used daily, understanding them can be valuable when needed.

This post covers:

Mapped Types – Syntax, functionality, and common use cases.
Conditional Types – Filtering, transformations, and applications.
Custom Utility Types – Practical snippets combining both concepts.

Let's take User type for reference as below:

interface User {
  id: string;
  name: string;
  isAdmin: boolean;
  age?: number;
}

Mapped Types

Mapped types allow you to create new types by iterating over the properties of an existing type. They are essential when you want to transform each property of a type uniformly.

General Syntax

type MappedType<T> = {
  [Key in UnionType]: ValueType;
};

Here, Key iterates over a union (commonly derived from keyof T), and you assign a new value type to each key.

Applications and Use Cases

Mapped types are incredibly versatile. Let’s explore some common applications with examples:

1. Making All Properties Optional

Use Case: When you need to create a version of an interface where not every property is mandatory—for instance, when accepting partial updates in an API.

type PartialMapped<T> = {
  [key in keyof T]?: T[key];
};

// Valid (isAdmin is no longer a required property)
const userPayload: PartialMapped<User> = {
  id: '1',
  name: 'John'
};

2. Making All Properties Required

Use Case: When you want to enforce that every property is provided, even if the original type allowed some properties to be optional (useful when you’re certain that all data will be available).

type RequiredMapped<T> = {
  [key in keyof T]-?: T[key];
};

// Valid (all property are specified)
const user1: RequiredMapped<User> = {
  id: '1',
  name: 'John',
  isAdmin: false,
  age: 32
};

// In Valid
// Error: Missing properties age, isAdmin from RequiredMapped<User>'
const user2: RequiredMapped<User> = {
  id: '1',
  name: 'John',
};

3. Creating Non-Nullable Versions of a Type

Use Case: Sometimes you want to ensure that none of the properties can be null or undefined. This is very useful when sanitizing or processing data that must be complete.

type NonNullableMapped<T> = {
  [key in keyof T]: Exclude<T[key], null | undefined>;
};

type UserNonNullable = NonNullableMapped<User>;
// Now all properties of UserNonNullable will have null and undefined removed from their types.

4. Creating Read-Only Versions of a Type

Use Case: Enforcing immutability in parts of your application, such as configuration objects or API responses, to prevent accidental changes.

type ReadOnlyMapped<T> = {
  readonly [Key in keyof T]: T[Key];
};

const user: ReadOnlyMapped<User> = { id: "1", name: "John", isAdmin: false  };

user.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

These examples illustrate how mapped types can be applied to modify or enhance the shape of your types to better fit the needs of your application. Mapped types is not limited to only above mentioned usecases, you can leverage it for any suitable scenario as applicable.

Conditional Types

Conditional types introduce logic into your type definitions. They let you create types that can vary based on conditions, similar to the ternary operator in JavaScript but operating at the type level.

General Syntax

T extends U ? X : Y

If type T is assignable to type U, the type resolves to X; otherwise, it resolves to Y.

Applications and Use Cases

Conditional types are ideal for filtering and transforming union types, and making types more dynamic. Here are a few detailed examples:

1. Excluding Specific Types from a Union

Use Case: You might have a union type where certain members are not applicable in a given context. For example, excluding customer role from a set of user roles.

type ExcludeMapped<T, K> = T extends K ? never : T;

// Example
type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'
type AdminRole = ExcludeMapped<UserRoles, 'CUSTOMER'>;

const role: AdminRoles = 'CUSTOMER' // Not Valid ❌
const role: AdminRoles = 'ADMIN' // Valid ✅

2. Extracting Specific Types from a Union

Use Case: You may need to isolate a subset of types from a union, such as extracting roles that have admin responsibilities.

type ExtractMapped<T, K> = T extends K ? T : never;

// Example
type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'

type AdminRoles = ExtractMapped<UserRoles, 'ADMIN' | 'SUPER_ADMIN'> // Only include 'ADMIN' & 'SUPER_ADMIN' from UserRoles

const role: AdminRoles = 'CUSTOMER' // Not Valid ❌
const role: AdminRoles = 'ADMIN' // Valid ✅

3. Dynamic Type Transformation Based on Conditions

Use Case: Conditional types can help adjust the type of a property based on some condition. For example, transforming a type based on whether it extends a particular interface or type.

type ConditionalExample<T> = T extends string ? string[] : T;

// Example
// If T is string, then type becomes string[], otherwise it remains T.
type Test1 = ConditionalExample<string>;  // Test1 is string[]
type Test2 = ConditionalExample<number>;  // Test2 is number

These examples show how conditional types empower you to build flexible, context-aware type definitions that can adapt to various scenarios in your codebase.

Custom Utility Types with Mapped & Conditional Types

One of the most powerful aspects of TypeScript is the ability to create your own utility types. By combining mapped and conditional types, you can design custom types that enhance type safety and code reuse. Below are shared snippets of such utility types.

1. `Partial<Type>`

Creates a version of a type where all properties are optional.

type PartialMapped<T> = {
  [key in keyof T]?: T[key];
};

2. `Required<Type>`

Creates a version of a type where all properties are required.

type RequiredMapped<T> = {
  [key in keyof T]-?: T[key];
};

3. `NonNullable<Type>`

Transforms a type to exclude null and undefined from each property.

type NonNullableMapped<T> = {
  [key in keyof T]: Exclude<T[key], null | undefined>;
};

4. `Pick<Type>`

Extracts a subset of properties from a type.

type PickMapped<T, K extends keyof T> = {
  [Key in K]: T[Key];
};

5. `Omit<Type>`

Creates a type by omitting specific properties from another type.

type OmitMapped<T, K extends keyof T> = {
  [Key in keyof T as Key extends K ? never : Key]: T[Key];
};

6. `ReadOnly<Type>`

Marks all properties of a type as read-only.

type ReadOnlyMapped<T> = {
  readonly [Key in keyof T]: T[Key];
};

7. Conditional Utility Types: `Exclude` & `Extract`

These conditional types allow filtering of union types.

Exclude

  type ExcludeMapped<T, K> = T extends K ? never : T;

Extract

  type ExtractMapped<T, K> = T extends K ? T : never;

Example

  type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'

  // Both below resolves to the union 'ADMIN' | 'SUPER_ADMIN'
  // one using Extract and other using Exclude
  type AdminRoles = ExtractMapped<UserRoles, 'ADMIN' | 'SUPER_ADMIN'>;
  type AdminRole = ExcludeMapped<UserRoles, 'CUSTOMER'>;

Closing Comments

Mapped and conditional types are key to TypeScript’s advanced type system, enabling cleaner, more maintainable code through reusable utilities.

Mastering these concepts will help you tackle (or at least understand) complex type scenarios in TypeScript.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Rushi Patel, Signing Off! 😊

Server-Side Rendering (SSR) and Static Site Generation (SSG) in React: A Deep Dive

Rushi Patel — Fri, 21 Feb 2025 05:16:47 +0000

SSR and SSG in React: A Deep Dive

In today's fast-evolving web landscape, performance and SEO are paramount. As React developers, we often face challenges in delivering fast, efficient, and SEO-friendly applications. Two powerful techniques to address these challenges are Server-Side Rendering (SSR) and Static Site Generation (SSG). In this blog post, we'll explore these rendering strategies in depth---discussing what they are, how they differ from routine client-side rendering, their benefits, how to implement them in React, and more.

Myth: SSR and SSG Are Exclusive to React

Reality: SSR and SSG are generic rendering techniques, not limited to React. They are used in various frameworks like Angular Universal, Nuxt.js (Vue), PHP, Django etc to optimize performance and SEO.

Introduction

Modern web applications need to be not only interactive and dynamic but also quick to load and friendly to search engines. Traditional client-side rendering (CSR) --- where the browser downloads a minimal HTML shell (skeleton) and then renders content using JavaScript --- can sometimes lead to poor performance, especially on slower devices or networks.

This is where SSR and SSG come into play. They offer alternative ways to pre-render content, either on each request (SSR) or at build time (SSG), ultimately leading to improved user experience and SEO. Let's check how they differ from each other.

How Do SSR and SSG Differ from Routine Client-Side Rendering (CSR)?

Client-Side Rendering (CSR):
CSR shifts the heavy lifting (load) to the client's browser. The server sends a skeleton HTML file (with some <div></div>), and JavaScript takes over to render the actual content. While this allows for rich interactivity, it may delay the initial content display, adversely affecting both performance and SEO.
Server-Side Rendering (SSR):
With SSR, the server pre-renders the complete HTML for a page on each request. This means users get fully formed pages right away, which improves the initial load time and SEO. However, this dynamic rendering can increase server load, as every request requires processing.
Static Site Generation (SSG):
SSG builds the HTML pages at compile time. These static files can then be served instantly via a Content Delivery Network (CDN). The approach is incredibly fast and secure, but it's best suited for content that doesn't change frequently.

Why Use SSR and SSG? Benefits & Use Cases

Both SSR and SSG address limitations of CSR by improving:

Performance:
Pre-rendered pages lead to faster Time-to-First-Byte (TTFB) and better perceived performance.
SEO:
Search engines can crawl pre-rendered HTML more effectively, leading to better indexing and ranking. Now a days AI tools also crawl the web pages to provide accurate & latest response.
User Experience:
With faster load times, users are less likely to abandon a page, improving engagement and conversion rates.
Flexibility:
SSR is ideal for dynamic, frequently changing data (e.g., dashboards, e-commerce pages), while SSG is perfect for static content (e.g., blogs, marketing sites, landing pages).

What is Hydration

You might have heard of hydration in Rendering Methods. Let's quickly see what is means.

Hydration is the process where React takes over a pre-rendered HTML page, attaches event listeners, and makes it interactive. Instead of building the DOM from scratch (as in client-side rendering), React "adopts" the existing HTML and efficiently updates it.

How Hydration Works

The server renders and sends static HTML to the browser.
The browser displays the static content immediately, improving perceived performance.
React's JavaScript bundle loads and runs in the background.
React matches the virtual DOM with the actual DOM and attaches event handlers, eventually making it interactive.

As Dan Abramov (one of the core member of React team) puts it:

"Hydration is like watering the 'dry' HTML with the 'water' of interactivity and event handlers."

Deep Dive into Server-Side Rendering (SSR)

Definition & Usage

SSR involves rendering React components on the server on every request, producing a complete HTML page before sending it to the client. Once the browser receives the HTML, React "hydrates" the page---attaching event listeners and making it interactive.

How It Works

Request: A client requests a page.
Render on Server: The server renders the React component tree into HTML.
Response: The server sends this pre-rendered HTML to the browser.
Hydration: The browser loads JavaScript and attaches event handlers, converting the static HTML into a fully interactive application.

Example Code (Next.js Implementation)

// pages/index.js (Next.js example)
export async function getServerSideProps(context) {
  // Fetch data that changes on every request
  const data = await fetchDataFromAPI();
  return { props: { data } };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>SSR with Next.js</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
}

Advantages

Improved SEO: Pre-rendered HTML is easier for search engines to index.
Faster Initial Load: Users see content quicker, improving perceived performance.
Dynamic Content: Ideal for pages that require real-time data.

Limitations

Increased Server Load: Every request triggers a new rendering cycle.
Complexity: Managing state and caching strategies on the server can be challenging.
Scalability: May require additional infrastructure to handle high traffic.
Efforts: Require additional efforts in development with SSR Rendering.

Deep Dive into Static Site Generation (SSG)

Definition & Usage

SSG pre-renders pages at build time, creating static HTML files that are deployed to a CDN. These pages load almost instantaneously since they are served directly without additional processing on each request.

How It Works

Build Time: During the build process, React components are rendered into static HTML.
Deployment: The static files are deployed to a CDN.
Request: When a user requests a page, the CDN serves the pre-built HTML immediately.
Hydration: Similar to SSR, React hydrates the static HTML on the client side.

Example Code (Next.js Implementation)

// pages/blog/[slug].js (Next.js example for SSG)
export async function getStaticPaths() {
  const paths = await fetchBlogPaths(); // e.g., [{ params: { slug: 'my-first-post' } }]
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchBlogPost(params.slug);
  return { props: { post } };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <article>{post.content}</article>
    </div>
  );
}

Advantages

Speed: Static files are served quickly via a CDN.
Security: No server-side processing reduces the attack surface.
Scalability: Easily handles large volumes of traffic without additional server resources.

Limitations

Inflexibility for Dynamic Data: Not suitable for content that changes frequently.
Rebuild Overhead: Every update to content requires a rebuild and redeployment.
Limited Interactivity Pre-Hydration: Content is static until JavaScript is loaded.

Implementing SSR and SSG in React

The React ecosystem has embraced both SSR and SSG, with frameworks like Next.js and Gatsby offering seamless integration.

Next.js:
- SSR: Use getServerSideProps to fetch data on every request.
- SSG: Use getStaticProps (and getStaticPaths for dynamic routes) to generate static pages at build time.
Gatsby:
- Primarily an SSG framework, Gatsby builds static pages using GraphQL queries during the build process.

Both frameworks manage the heavy lifting with help of hydration, routing, and data fetching and making it straightforward to choose the right strategy for your needs.

SSR vs. SSG: A Comparison Table

Aspect	Server-Side Rendering (SSR)	Static Site Generation (SSG)
Rendering Time	On every request	At build time
Content Freshness	Always up-to-date	Requires rebuild for updates
Performance	Good, but can be slower under heavy load	Extremely fast with CDN distribution
SEO	Excellent	Excellent
Server Load	Higher (dynamic rendering per request)	Minimal (static files served)
Use Cases	Dynamic pages (e.g., dashboards, e-commerce)	Static pages (e.g., blogs, landing pages)
Complexity	More complex setup and state management	Simpler, but less flexible for dynamic data

Closing Comments

Understanding SSR and SSG is essential for building high-performance, SEO-friendly React applications. While SSR offers the flexibility needed for dynamic content, SSG provides unbeatable speed and scalability for static content. The choice between them ultimately depends on your project requirements.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Rushi Patel, Signing Off! 😊

Utility Types in TypeScript: Partial, Required, Pick, Omit and 10 more...

Rushi Patel — Tue, 18 Feb 2025 16:45:56 +0000

Utility Types in TypeScript

TypeScript provides utility types to help transform or create new types from existing ones.

These types are built into TypeScript and are extremely useful for making your code cleaner, more expressive, and easier to maintain. You might be aware about some and regularly using it while some from the list might be new to learn.

Below is a breakdown of key utility types with Definitions and examples. Added a summary table in the end, don't forget to read it.

Let's take User type for reference as below:

interface User {
  id: string;
  name: string;
  isAdmin: boolean;
  age?: number;
}

1. `Partial<Type>`

Definition: Makes all properties of Type optional.

Use Case: When you want to create a version of a type where some or all properties might not be defined.

const payload: Partial<User> = { name: "John" }; // Valid ✅

2. `Required<Type>`

Definition: Makes all properties of Type required.

Use Case: To enforce that every property must be provided.

// Not Valid ❌
const user: Required<User> = { name: "John" }; 

// Valid ✅ (all properties provided) 
const user: Required<User> = { 
  id: "1",
  name: "John",
  age: 34,
  isAdmin: false
};

3. `Readonly<Type>`

Definition:: Makes all properties of Type readonly (cannot be reassigned).

Use Case: To create immutable objects.

const user: Readonly<User> = { id: "1", name: "John", isAdmin: false  };

user.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

4. `Pick<Type, Keys>`

Definition:: Constructs a type by picking a subset of properties from a given Type.

Use Case: To extract specific properties from a type.

const userPreview: Pick<User, "id" | "name"> = { id: "1", name: "John" };

5. `Omit<Type, Keys>`

Definition:: Constructs a type by omitting specific properties from a given Type.

Use Case: To exclude certain properties from a type.

const userDetails: Omit<User, "age" | "isAdmin"> = { id: "1", name: "John" };

You can see that we have achieved same underlying type using Pick and Omit. (Picking id and name is same as Omitting age and isAdmin from type User)

6. `Record<Keys, Type>`

Definition:: Constructs a type with keys of Keys and values of Type.

Use Case: To create a dictionary-like object.

type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'

// Valid ✅
const roleMatrix: Record<UserRoles, boolean> = {
  'ADMIN': true,
  'CUSTOMER': true,
  'SUPER_ADMIN': false
}

// Not Valid ❌
const roleMatrix: Record<UserRoles, boolean> = {
  'ADMIN': true,
  'CUSTOMER': true,
  'SUPER_ADMIN': false,
  'MANAGER': true // Error: As MANAGER is not present in UserRoles
}

7. `Exclude<Type, ExcludedUnion>`

Definition:: Excludes from Type those types that are assignable to ExcludedUnion.

Use Case: To filter out specific types from a union.

type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'

type AdminRoles = Exclude<UserRoles, 'CUSTOMER'> // remove the CUSTOMER from UserRoles

const role: AdminRoles = 'CUSTOMER' // Not Valid ❌
const role: AdminRoles = 'ADMIN' // Valid ✅

8. `Extract<Type, Union>`

Definition:: Extracts from Type those types that are assignable to Union.

Use Case: To filter specific types from a union.

type UserRoles = 'ADMIN' | 'CUSTOMER' | 'SUPER_ADMIN'

type AdminRoles = Extract<UserRoles, 'ADMIN' | 'SUPER_ADMIN'> // Only include 'ADMIN' & 'SUPER_ADMIN' from UserRoles

const role: AdminRoles = 'CUSTOMER' // Not Valid ❌
const role: AdminRoles = 'ADMIN' // Valid ✅

9. `NonNullable<Type>`

Definition:: Excludes null and undefined from Type.

Use Case: To ensure a type is not nullable.

type UserId = string | number | null | undefined;

// Valid ✅
const id1: UserId = '12'
const id2: UserId = 12
const id3: UserId = null
const id4: UserId = undefined

type NonNullId = NonNullable<UserId>

// Not Valid ❌
const id5: NonNullId = null; // Error: Type 'null' is not assignable to type 'NonNullId'

Pro Tip:

You can create your own NonNullable type using Exclude. Here is how it can be done.

type UserId = string | number | null | undefined;

type NonNullId = Exclude<UserId, null | undefined>

// Not Valid ❌
const id: NonNullId = null; // Error: Type 'null' is not assignable to type 'NonNullId'

10. `ReturnType<Type>`

Definition:: Constructs a type consisting of the return type of a function type.

Use Case: To infer and reuse function return types.

function getUser() {
  return { id: "1", name: "John" };
}

type User = ReturnType<typeof getUser>; // { id: number; name: string }

11. `Parameters<Type>`

Definition:: Constructs a tuple (array) type of the parameters of a function type.

Use Case: To infer and reuse function parameter types. Gives the type of function parammets.

function updateUser(id: number, name: string) {}

type UpdateParams = Parameters<typeof updateUser>; // [number, string]

// Valid ✅
function updateBook(...params: UpdateParams) {} // params = (id: number, name: string)

updateBook(12, 'Atomic Habits')

Summary Table of Key Utility Types

You might be feeling there are so many utility types provided by TypeScript. Isn't it?
But no worries, this table will summarize all of them so that you can refer it anytime.

Utility Type	Purpose
`Partial<Type>`	Makes all properties optional
`Required<Type>`	Makes all properties required
`Readonly<Type>`	Makes all properties readonly
`Pick<Type, K>`	Picks specific properties
`Omit<Type, K>`	Omits specific properties
`Record<K, T>`	Creates a dictionary-like type
`Exclude<T, U>`	Excludes types from a union
`Extract<T, U>`	Extracts types from a union
`NonNullable<T>`	Removes `null` and `undefined`
`ReturnType<T>`	Gets the return type of a function
`Parameters<T>`	Gets the parameters of a function

Closing Comments 👋

In this article, we learned various Utility Types provided by TypeScript and understood well with help of code snippets.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Rushi Patel, Signing Off! 😊

The New Architecture of React Native: All you need to know

Rushi Patel — Tue, 18 Feb 2025 16:22:12 +0000

React Native lets developers build native mobile apps with JavaScript, and it's been a game-changer. But like all technology, it needs updates to get better. The "New Architecture" is a big change under the hood, making React Native work differently.

This post explains what it is, clears up misunderstandings, and looks at why it's a big deal for React Native development. We'll cover what's new, how it changed over time, the tools involved, and how it compares to the old way of doing things.

1. What is the "New Architecture"? (And Busting Some Myths)

The "New Architecture" isn't a completely new framework. It's a fundamental rewrite of the core of React Native, focusing on improving performance, flexibility, and developer experience. It introduces new core components and paradigms that optimize the interaction between JavaScript and native code.

Common Myths:

Myth 1: The New Architecture replaces JavaScript: False. JavaScript remains the primary language for building React Native UIs.
Myth 2: The New Architecture is only for new projects: False. Existing projects can migrate to the New Architecture incrementally.
Myth 3: The New Architecture is unstable: False. While it went through phases of experimentation, it's now stable and recommended for production apps.

2. Why Was the New Architecture Needed?

Over the years, developers encountered several limitations with the legacy architecture:

The Bridge: Communication between JavaScript and native code relied on a "bridge," which could become a performance bottleneck, especially with complex interactions or large data transfers. This asynchronous bridge could lead to UI jank and slower performance.
UI Blocking: JavaScript execution could block the UI thread, leading to a poor user experience.
Single-Thread Constraints: The old design ran many tasks on a single thread, which limited the ability to perform synchronous operations and hindered support for modern React features like Suspense and Transitions.

The legacy bridge, while functional, became a bottleneck for complex apps, hindering performance and limiting React Native's potential.

3. The Evolution and Timeline

The journey toward the New Architecture began back in 2018 when the React Native team started rethinking the core internals. Here's a brief timeline of its evolution:

2018: Conceptualization of a new core to overcome the limitations of the bridge-based approach.
React Native 0.68: Experimental opt-in release where early adopters could try the New Architecture.
Subsequent Releases (0.69 - 0.75): Progressive improvements were made, with new tools (such as Codegen, Turbo Modules, and Fabric) integrated and bugs ironed out.
React Native 0.76: The New Architecture was enabled by default in production-level apps, signaling its maturity and readiness for widespread adoption.

Each milestone brought incremental enhancements, steadily transforming React Native into a more robust, performance-oriented framework.

4. The Architectural Shift: New Additions & Best Practices

Key Changes & Additions

JSI & Removal of the Bridge: The asynchronous bridge is replaced by the JavaScript Interface (JSI), enabling direct, synchronous communication between JavaScript and native code, significantly improving performance. This paves the way for a future "bridgeless" mode.
Turbo Modules: Native modules are now loaded lazily using the Turbo Module system. This reduces startup overhead and improves memory management, while also supporting type-safe interfaces.
Fabric Renderer: Fabric modernizes the rendering pipeline by unifying rendering logic in C++ and enabling concurrent rendering. This supports React 18 features like Suspense and Transitions and provides more direct access to native UI components for better performance and consistency.
Codegen: Automated code generation from typed JavaScript (or TypeScript/Flow) definitions ensures consistent interfaces between JavaScript and native code, minimizing errors and improving developer experience.
Concurrent React Integration: React 18's concurrent features integrate seamlessly with Fabric, enabling smoother UI updates and improved responsiveness.

JSI, Turbo Modules, and Fabric are the core building blocks of the New Architecture, each playing a crucial role in enhancing performance and developer experience.

Ideal Practices

Incremental Migration: Don't try to rewrite your entire app at once. Migrate to the New Architecture incrementally, starting with less critical components.
Use the New Architecture from the start for new projects: This will save you migration effort later.
Understand the core concepts: Familiarize yourself with Fabric, Turbo Modules, and JSI to optimize your code.
Stay Updated: Since the architecture is continuously evolving, keep your project dependencies and libraries updated.

5. The New "Framework" Approach in React Native

The New Architecture is not just an incremental update---it's a paradigm shift that nudges React Native closer to a cohesive framework rather than a collection of loosely coupled modules. This integrated approach means:

Unified Core: With a shared C++ core, both iOS and Android (and even other platforms) now rely on the same underlying systems.
Enhanced Cross-Platform Consistency: Tools like Fabric and Turbo Modules ensure that your app behaves similarly across platforms, reducing platform-specific bugs.
Future-Proofing: With built-in support for concurrent rendering and upcoming React features, the framework is poised to adopt innovations more swiftly.

This "framework" mindset encourages developers to think in terms of a complete, cohesive solution rather than stitching together disparate parts.

The New Architecture moves React Native towards a more unified and cohesive framework, improving cross-platform consistency and future-proofing the platform.

6. Comparison: Old Architecture vs. New Architecture

Below is a side-by-side comparison highlighting the key differences:

Aspect	Old Architecture	New Architecture
Communication	Asynchronous bridge with JSON serialization	Direct, synchronous communication via JSI
Native Module Loading	Eager initialization; all modules loaded at startup	Lazy loading with Turbo Modules
Rendering	Legacy renderer with potential layout delays	Fabric renderer supporting concurrent rendering
Type Safety & Code Generation	Manual bridging; prone to human errors	Automated Codegen ensuring type-safe interfaces
Performance	Overhead due to serialization; single-thread limitations	Reduced overhead; optimized for concurrent features
Future Readiness	Limited support for modern React features (e.g., Suspense)	Built to leverage React 18 features like Suspense & Transitions

This table makes it easier to appreciate how the New Architecture lays the groundwork for faster, smoother, and more scalable mobile apps.

Verdict: A Significant Leap Forward

The New Architecture represents a significant advancement in React Native.

It addresses the limitations of the older architecture, leading to substantial improvements in performance, flexibility, and developer experience.

While it requires some learning and adaptation, the benefits make it a worthwhile investment for any React Native developer.

Closing Comments

React Native's New Architecture significantly improves performance and developer experience. Understanding its core concepts and best practices is key to building high-performance mobile apps. Staying up-to-date with the latest developments is crucial for maximizing React Native's potential.

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Rushi Patel, Signing Off! 😊

Deploy Next JS App to Google Cloud Run with Github Actions CI/CD - A Complete Guide

Rushi Patel — Sun, 10 Mar 2024 19:15:01 +0000

This guide provides you a step-by-step process to deploy your Next app efficiently to Google Cloud Run. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
Next Project Config
GCP Account & GCP Project Setup
Dockerize your App
Github Actions CI/CD
Testing

Whether you're a seasoned developer seeking a detailed deployment workflow or an enthusiast eager to take your Next project live, this guide will equip you with the necessary knowledge and steps for a successful deployment journey. Let's start with pre-requisites.

Section 1: Pre-requisites

Before diving into deploying a Next app to Google Cloud Run, it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

Next & npm Installed: Make sure Next.js and npm are installed on your machine. Next 18 is used throughout this guide.
Next JS Setup: Familiarize yourself with creating a Next project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: Next JS Project Config

Prepare and Run Next JS Project

If you haven't already set up a Next JS project, create your own project or clone the demo project from Github here.

Open your terminal.
Run the following command to clone Next JS project:

  git clone https://github.com/rushi-2001/next-js-cloud-run-setup

Install the dependencies:

  yarn

Run the app:

  yarn dev

This will start a development server, allowing you to view your Next app in a browser at http://localhost:3000.

Prepare a build of your Next app:

  yarn build

Next Scripts Configuration: Ensure your package.json includes the following scripts:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
  },

Make sure your scripts align with the provided commands for starting & building your Next app.

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for Cloud Run API and enable the Cloud Run API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the us-central1 region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your Next app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google Cloud Run deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. Cloud Run Admin
2. Cloud Build Service Account
3. Cloud Run Service Agent
4. Service Account User
5. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 4: Dockerize your Next App

What is Docker

Docker is a platform that enables developers to automate the deployment of applications inside lightweight, portable containers. Containers encapsulate the application and its dependencies, ensuring consistency and portability across various environments.

Placement:

The Dockerfile, which contains instructions to build a Docker image for your Next app, should be placed in the root directory of your project, alongside your source code.

Example Configuration:

# Use Node.js as the base image
FROM node:18.17.0-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and yarn.lock to the container
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install --frozen-lockfile

# Copy the app's source code to the container
COPY . .

# Build the Next app
RUN yarn build

# Serve the production build
CMD ["yarn", "start"]

Explanation of Configuration:

Base Image: Uses Next.js version 18.17.0 Alpine as the lightweight base image.
Dependency Installation: Copies package.json and yarn.lock, installs dependencies using Yarn, leveraging Docker layer caching for efficiency.
Source Code and Build: Copies the app's source code, builds the Next app, and sets up the working directory.
Serve the Build: Uses yarn start to serve the built Next app from the build directory when the container starts.

Step 5: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.
3. DOCKER_IMAGE_NAME Your preferred name of Docker Image.

Workflow File Name & Placement:

The workflow file can be named cloud-run-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to Cloud Run

env:
  SERVICE_NAME: next-app-project

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  dockerize-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Configure Docker
        run: |
          gcloud auth configure-docker

      - name: Build and Push Docker Image
        run: |
          docker build -t gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest .
          docker push gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy $SERVICE_NAME \
            --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest \
            --platform managed \
            --region us-central1 \
            --allow-unauthenticated

This workflow triggers on pushes or pull requests to the main branch. It uses GitHub Actions to perform various steps such as building the Next app, authenticating with Google Cloud, setting up the Cloud SDK, dockerize your app and deploying the app to Google Cloud Run.

Note: When you are deploying for first time to bucket, remove the service name from gcloud run deploy command on line 42. As first deployment must be of default service. From second deploy you provide preferred service name.

Step 6: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your Next app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your Next application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (*** text) representing your GCP project ID. Replace *** with your project ID and open the URL in your browser.

Access Google Cloud Engine Services:
Go to Google Cloud, locate and click on Cloud Run, then navigate to Services tab. Find your recent deployments and click on the service to open your Next App in a new tab.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your Next app to Google Cloud Run and GitHub Actions! 🎉

Embrace this automated workflow to streamline your development journey and propel your projects to new heights. You can refer the above given repository link as and when required. If you have any queries or need guidance, feel free to chat or drop a comment.

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Deploy Node JS Project to Google Cloud Run with Github Actions CI/CD - A Complete Guide

Rushi Patel — Sun, 10 Mar 2024 19:14:51 +0000

This guide provides you a step-by-step process to deploy your Node app efficiently to Google Cloud Run. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
Node Project Config
GCP Account & GCP Project Setup
Dockerize your App
Github Actions CI/CD
Testing

Whether you're a seasoned developer seeking a detailed deployment workflow or an enthusiast eager to take your Node project live, this guide will equip you with the necessary knowledge and steps for a successful deployment journey. Let's start with pre-requisites.

Section 1: Pre-requisites

Before diving into deploying a Node app to Google Cloud Run, it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

Node & npm Installed: Make sure Node.js and npm are installed on your machine. Node 18 is used throughout this guide.
Node JS Setup: Familiarize yourself with creating a Node project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: Node JS Project Config

Prepare and Run Node JS Project

If you haven't already set up a Node JS project, create your own project or clone the demo project from Github here.

Open your terminal.
Run the following command to clone Node JS project:

  git clone https://github.com/rushi-2001/node-express-cloud-run-setup

Install the dependencies:

  yarn

Run the app:

  yarn start-dev

This will start a development server, allowing you to view your Node server in a browser at http://localhost:8080.

Prepare a build of your Node app:

  yarn build

This command creates a build folder at the root of your project, containing the compiled version of your Node app.

Exclude build folder from Git: Add build/ to your .gitignore file to prevent it from being tracked and pushed to your Git repository.
Node Scripts Configuration: Ensure your package.json includes the following scripts:

  "scripts": {
   "start": "node build/index.js",
   "start-dev": "nodemon src/index.ts",
   "build": "tsc"
  },

Make sure your scripts align with the provided commands for starting & building app.

Important: When deploying your application to Google App Engine, ensure that the start command in your package.json points to the correct file for launching your application.
For JavaScript project you can use "start": "node index.js" and for TypeScript project it must be pointing the JS file inside build folder. "start": "node build/index.js"

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for Cloud Run API and enable the Cloud Run API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the us-central1 region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your Node app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google Cloud Run deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. Cloud Run Admin
2. Cloud Build Service Account
3. Cloud Run Service Agent
4. Service Account User
5. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 4: Dockerize your Node App

What is Docker

Placement:

The Dockerfile, which contains instructions to build a Docker image for your Node app, should be placed in the root directory of your project, alongside your source code.

Example Configuration:

# Use Node.js as the base image
FROM node:18.15.0-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and yarn.lock to the container
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install --frozen-lockfile

# Copy the app's source code to the container
COPY . .

# Build the Next app
RUN yarn build

# Serve the production build
CMD ["yarn", "start"]

Explanation of Configuration:

Base Image: Uses Node.js version 18.15.0 Alpine as the lightweight base image.
Dependency Installation: Copies package.json and yarn.lock, installs dependencies using Yarn, leveraging Docker layer caching for efficiency.
Source Code and Build: Copies the app's source code, builds the Node app, and sets up the working directory.
Serve the Build: Uses npx serve to serve the built Node app from the build directory when the container starts.

Step 5: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.
3. DOCKER_IMAGE_NAME Your preferred name of Docker Image.

Workflow File Name & Placement:

The workflow file can be named cloud-run-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to Cloud Run

env:
  SERVICE_NAME: node-express-api

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  dockerize-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Configure Docker
        run: |
          gcloud auth configure-docker

      - name: Build and Push Docker Image
        run: |
          docker build -t gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest .
          docker push gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy $SERVICE_NAME \
            --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest \
            --platform managed \
            --region us-central1 \
            --allow-unauthenticated

This workflow triggers on pushes or pull requests to the main branch. It uses GitHub Actions to perform various steps such as building the Node app, authenticating with Google Cloud, setting up the Cloud SDK, dockerize your app and deploying the app to Google Cloud Run.

Note: When you are deploying for first time to bucket, remove the service name from gcloud run deploy command on line 43. As first deployment must be of default service. From second deploy you provide preferred service name.

Step 6: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your Node app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your Node application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (**** text) representing your GCP project ID. Replace **** with your project ID and open the URL in your browser.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your Node app to Google Cloud Run and GitHub Actions! 🎉

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Deploy React App to Google Cloud Run with Github Actions CI/CD - A Complete Guide

Rushi Patel — Sun, 10 Mar 2024 19:14:38 +0000

This guide provides you a step-by-step process to deploy your React app efficiently to Google Cloud Run. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
React Project Config
GCP Account & GCP Project Setup
Dockerize your App
Github Actions CI/CD
Testing

Whether you're a seasoned developer seeking a detailed deployment workflow or an enthusiast eager to take your React project live, this guide will equip you with the necessary knowledge and steps for a successful deployment journey. Let's start with pre-requisites.

Section 1: Pre-requisites

Before diving into deploying a React app to Google Cloud Run, it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

Node & npm Installed: Make sure Node.js and npm are installed on your machine. Node 18 is used throughout this guide.
React JS Setup: Familiarize yourself with creating a React project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: React Project Config

Initialize & Run a React App

If you haven't already set up a React project, follow these steps:

Open your terminal.
Run the following command to create a new React app:

  npx create-react-app my-react-app

Replace my-react-app with your own project name.

Run the React app:

  npm start

This will start a development server, allowing you to view your React app in a browser at http://localhost:3000.

Prepare a build of your React app:

  npm run build

This command creates a build folder at the root of your project, containing the compiled version of your React app.

Exclude build folder from Git: Add build/ to your .gitignore file to prevent it from being tracked and pushed to your Git repository.
React Scripts Configuration: Ensure your package.json includes the following scripts:

  "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
  }

Make sure your scripts align with the provided commands for starting, building, testing, and ejecting your React app.

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for Cloud Run API and enable the Cloud Run API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the us-central1 region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your React app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google Cloud Run deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. Cloud Run Admin
2. Cloud Build Service Account
3. Cloud Run Service Agent
4. Service Account User
5. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 4: Dockerize your React App

What is Docker

Placement:

The Dockerfile, which contains instructions to build a Docker image for your React app, should be placed in the root directory of your project, alongside your source code.

Example Configuration:

# Use Node.js as the base image
FROM node:18.15.0-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and yarn.lock to the container
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install --frozen-lockfile

# Install dependencies
RUN yarn install

# Copy the app's source code to the container
COPY . .

# Build the React app
RUN yarn build

# Serve the build
CMD ["npx", "serve", "-s", "build"]

Explanation of Configuration:

Base Image: Uses Node.js version 18.15.0 Alpine as the lightweight base image.
Dependency Installation: Copies package.json and yarn.lock, installs dependencies using Yarn, leveraging Docker layer caching for efficiency.
Source Code and Build: Copies the app's source code, builds the React app, and sets up the working directory.
Serve the Build: Uses npx serve to serve the built React app from the build directory when the container starts.

Step 5: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.
3. DOCKER_IMAGE_NAME Your preferred name of Docker Image.

Workflow File Name & Placement:

The workflow file can be named cloud-run-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to Cloud Run

env:
  SERVICE_NAME: react-app

on:
  push:
    branches:
      - main

jobs:
  dockerize-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Google Cloud SDK
        uses: google-github-actions/setup-gcloud@v0.2.0
        with:
          service_account_key: ${{ secrets.GCP_SA_KEY }}
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Configure Docker
        run: |
          gcloud auth configure-docker

      - name: Build and Push Docker Image
        run: |
          docker build -t gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest .
          docker push gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy $SERVICE_NAME \
            --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest \
            --platform managed \
            --region us-central1 \
            --allow-unauthenticated

This workflow triggers on pushes or pull requests to the main branch. It uses GitHub Actions to perform various steps such as building the React app, authenticating with Google Cloud, setting up the Cloud SDK, dockerize your app and deploying the app to Google Cloud Run.

Note: When you are deploying for first time to bucket, remove the service name from gcloud run deploy command on line 36. As first deployment must be of default service. From second deploy you provide preferred service name.

Step 6: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your React app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your React application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (**** text) representing your GCP project ID. Replace **** with your project ID and open the URL in your browser.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your React app to Google Cloud Run and GitHub Actions! 🎉

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Deploy Next JS App to Google App Engine with Github Actions CI/CD - A Complete Guide

Rushi Patel — Tue, 16 Jan 2024 18:10:27 +0000

This guide provides you a step-by-step process to deploy your Next JS App efficiently to Google App Engine. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
Next JS Project Config
GCP Account & GCP Project Setup
App.yaml & Explanation
Github Actions CI/CD
Testing

Whether you're a seasoned developer seeking a detailed deployment workflow or an enthusiast eager to take your Next JS project live, this guide will equip you with the necessary knowledge and steps for a successful deployment journey. Let's start with pre-requisites.

Section 1: Pre-requisites

Before diving into deploying a Next JS App to Google App Engine (GAE), it's essential to ensure that you have the necessary tools and knowledge in place. Minimum requirements are

Node, YARN & npm Installed: Make sure Node.js, YARN and npm are installed on your machine. Node 18 is used throughout this guide.
Simple Next JS Project: Familiarize yourself with creating a Next Project project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: Next JS Project Config

Prepare and Run Next JS Project

If you haven't already set up a Next JS project, create your own project or clone the demo project from Github here.

Open your terminal.
Run the following command to clone Next JS project:

  git clone https://github.com/rushi-2001/next-js-app-engine-setup

Install the dependencies:

  yarn

Run the app:

  yarn dev

This will start a development server, allowing you to view your Next app in a browser at http://localhost:3000.

Prepare a build of your Next app:

  yarn build

Next Scripts Configuration: Ensure your package.json includes the following scripts:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
  },

Make sure your scripts align with the provided commands for starting & building your Next app.

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for App Engine Admin and enable the App Engine Admin API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the desired region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your Next app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Section 4: Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google App Engine deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. App Engine Admin
2. Cloud Build Service Account
3. Service Account User
4. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 5: Create app.yaml and Explanation

What is app.yaml?

The app.yaml file configures settings and routing for Google App Engine applications.

Placement:

Keep the app.yaml in your project's root directory alongside your source code.

Example Configuration:

# [START app_yaml]
runtime: nodejs18

service: my-next-app

handlers:
  - url: /.*
    secure: always
    script: auto

# [END app_yaml]

Explanation of Configuration:

runtime: Specifies the runtime environment (e.g., nodejs18).
service: Defines the service name, typically a project-specific prefix or subdomain.

This configuration example directs incoming requests to the appropriate static files within the build directory, which further handles the different API routing.

Deploy your App Locally:

Deploy your Node app by executing the command in root directory of your project:

gcloud app deploy

This command will package and upload your compiled build to Google Cloud. The deployment process may take a few minutes.

Note: When you are deploying for first time of the bucket, comment out line 4, where you specify service name. As first deployment must be of default service.

After deployment completion, you'll receive a URL where your Next app is hosted. Open the URL to check the deployed Next App.

Step 6: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.

Workflow File Name & Placement:

The workflow file should be named gcp-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to Goggle App Engine (GAE)

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js and yarn
        uses: actions/setup-node@v2
        with:
          node-version: "18"

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Next Project
        run: yarn build

      - name: Google Cloud Auth
        uses: "google-github-actions/auth@v2"
        with:
          credentials_json: "${{ secrets.GCP_SA_KEY }}"
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: "google-github-actions/setup-gcloud@v2"

      - name: Deploy to Google App Engine
        run: |
          gcloud app deploy app.yaml --quiet

Step 7: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your Next app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your Next application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (**** text) representing your GCP project ID. Replace **** with your project ID and open the URL in your browser.

Access Google Cloud Engine Services:
Go to Google Cloud, locate and click on App Engine, then navigate to Services in the sidebar. Find your recent deployments and click on the service to open your Next App in a new tab.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your Next JS Project to Google App Engine and GitHub Actions! 🎉

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Deploy Node JS Project to Google App Engine with Github Actions CI/CD - A Complete Guide

Rushi Patel — Tue, 16 Jan 2024 18:10:03 +0000

This guide provides you a step-by-step process to deploy your Node JS Project efficiently to Google App Engine. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
Node Project Config
GCP Account & GCP Project Setup
App.yaml & Explanation
Github Actions CI/CD
Testing

Section 1: Pre-requisites

Before diving into deploying a Node JS Project to Google App Engine (GAE), it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

Node, YARN & npm Installed: Make sure Node.js, YARN and npm are installed on your machine. Node 18 is used throughout this guide.
Simple Node JS Project: Familiarize yourself with creating a Node Project project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: Node JS Project Config

Prepare and Run Node JS Project

If you haven't already set up a Node JS project, create your own project or clone the demo project from Github here.

Open your terminal.
Run the following command to clone Node JS project:

   git clone https://github.com/rushi-2001/node-express-app-engine-setup

Install the dependencies:

   yarn

Run the app:

   yarn start-dev

This will start a development server, allowing you to view your Node server in a browser at http://localhost:8080.

Prepare a build of your Node app:

   yarn build

This command creates a build folder at the root of your project, containing the compiled version of your Node app.

Exclude build folder from Git: Add build/ to your .gitignore file to prevent it from being tracked and pushed to your Git repository.
Node Scripts Configuration: Ensure your package.json includes the following scripts:

   "scripts": {
    "start": "node build/index.js",
    "start-dev": "nodemon src/index.ts",
    "build": "tsc"
  },

Make sure your scripts align with the provided commands for starting & building app.

Important: When deploying your application to Google App Engine, ensure that the start command in your package.json points to the correct file for launching your application.
For JavaScript project you can use "start": "node index.js" and for TypeScript project it must be pointing the JS file inside build folder. "start": "node build/index.js"

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for App Engine Admin and enable the App Engine Admin API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the desired region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your Node app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Section 4: Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google App Engine deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. App Engine Admin
2. Cloud Build Service Account
3. Service Account User
4. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 5: Create app.yaml and Explanation

What is app.yaml?

The app.yaml file configures settings and routing for Google App Engine applications.

Placement:

Keep the app.yaml in your project's root directory alongside your source code.

Example Configuration:

# [START app_yaml]

runtime: nodejs18

service: node-express-api

# [END app_yaml]

Explanation of Configuration:

runtime: Specifies the runtime environment (e.g., nodejs18).
service: Defines the service name, typically a project-specific prefix or subdomain.

This configuration example directs incoming requests to the appropriate static files within the build directory, which further handles the different API routing.

Deploy your App Locally:

Deploy your Node app by executing the command in root directory of your project:

   gcloud app deploy

This command will package and upload your compiled build to Google Cloud. The deployment process may take a few minutes.

Note: When you are deploying for first time of the bucket, comment out line 4, where you specify service name. As first deployment must be of default service.

After deployment completion, you'll receive a URL where your Node app is hosted. Open the URL to check the deployed Node App.

Step 6: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.

Workflow File Name & Placement:

The workflow file should be named gcp-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to Goggle App Engine (GAE)

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js and yarn
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Node Project
        run: yarn build

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Deploy to Google App Engine
        run: |
          gcloud app deploy app.yaml --quiet

Step 7: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your Node app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your Node application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (**** text) representing your GCP project ID. Replace **** with your project ID and open the URL in your browser.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your Node JS Project to Google App Engine and GitHub Actions! 🎉

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Deploy React App to Google App Engine with Github Actions CI/CD - A Complete Guide

Rushi Patel — Tue, 09 Jan 2024 12:02:11 +0000

This guide provides you a step-by-step process to deploy your React app efficiently to Google App Engine. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

Pre-requisite
React Project Config
GCP Account & GCP Project Setup
App.yaml and Explanation
Github Actions CI/CD
Testing

Section 1: Pre-requisites

Before diving into deploying a React app to Google App Engine, it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

Node & npm Installed: Make sure Node.js and npm are installed on your machine. Node 18 is used throughout this guide.
React JS Setup: Familiarize yourself with creating a React project and running it locally.
Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: React Project Config

Initialize & Run a React App

If you haven't already set up a React project, follow these steps:

Open your terminal.
Run the following command to create a new React app:

  npx create-react-app my-react-app

Replace my-react-app with your own project name.

Run the React app:

  npm start

This will start a development server, allowing you to view your React app in a browser at http://localhost:3000.

Prepare a build of your React app:

  npm run build

This command creates a build folder at the root of your project, containing the compiled version of your React app.

Exclude build folder from Git: Add build/ to your .gitignore file to prevent it from being tracked and pushed to your Git repository.
React Scripts Configuration: Ensure your package.json includes the following scripts:

  "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
  }

Make sure your scripts align with the provided commands for starting, building, testing, and ejecting your React app.

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

Go to the Google Cloud Console and sign in.
Click on "Select a project" at the top and then click on "New Project."
Choose a unique project name and select the desired organization if applicable.
Once the project is created, note down the Project ID for future reference.
Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

Navigate to the APIs & Services section in the Google Cloud Console.
Click on Library in the left sidebar.
Search for Cloud Storage and enable the Cloud Storage API.
Search for App Engine Admin and enable the App Engine Admin API.

Step 3: Set Up Cloud Storage

Go to the Cloud Storage section in the Google Cloud Console.
Click on Create Bucket to make a new bucket.
Choose a unique name and select the desired region.
Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

Navigate to the root directory of your React app in the terminal.
Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google App Engine deployment, follow these steps:

Go to the Google Cloud Console.
Navigate to IAM & Admin → Service Accounts.
Click on Create Service Account.
Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.
Assign the following roles:
1. App Engine Admin
2. Cloud Build Service Account
3. Service Account User
4. Storage Object Admin
Click the three dots and select Manage keys.
Click on Add Key → Create New Key.
Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 4: Create app.yaml and Explanation

What is app.yaml?

The app.yaml file configures settings and routing for Google App Engine applications.

Placement:

Keep the app.yaml in your project's root directory alongside your source code.

Example Configuration:

# [START app_yaml]

runtime: nodejs18
service: my-react-app # prefix/subdomain of the bucket specific to project and environment

handlers:
  - url: /static/js/(.*)
    static_files: build/static/js/\1
    upload: build/static/js/(.*)
    secure: always

  - url: /static/css/(.*)
    static_files: build/static/css/\1
    upload: build/static/css/(.*)
    secure: always

  - url: /static/media/(.*)
    static_files: build/static/media/\1
    upload: build/static/media/(.*)
    secure: always

  - url: /(.*\.(json|ico|png|jpg|svg))$
    static_files: build/\1
    upload: build/.*\.(json|ico|png|jpg|svg)$
    secure: always

  - url: /
    static_files: build/index.html
    upload: build/index.html
    secure: always

  - url: /.*
    static_files: build/index.html
    upload: build/index.html
    secure: always
# [END app_yaml]

Explanation of Configuration:

runtime: Specifies the runtime environment (e.g., nodejs18).
service: Defines the service name, typically a project-specific prefix or subdomain.

The handlers section defines how incoming requests are handled:

Each url pattern specifies a path or file type.
static_files points to the location of the static file in your project.
upload indicates where the file should be uploaded within the Google App Engine environment.
secure ensures that requests are served over HTTPS.

This configuration example directs incoming requests to the appropriate static files within the build directory, ensuring proper handling and security for various file types and paths.

Deploy your App Locally:

Deploy your React app by executing the command in root directory of your project:

gcloud app deploy

This command will package and upload your compiled build to Google Cloud. The deployment process may take a few minutes.

Note: When you are deploying for first time, comment out line 4, where you specify service name. As first deployment must be of default service.

After deployment completion, you'll receive a URL where your React app is hosted. Open the URL to check the deployed React App.

Step 5: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.
CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
Secrets:
1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
2. GCP_PROJECT_ID Your GCP Project ID.

Workflow File Name & Placement:

The workflow file should be named gcp-deploy.yml.
Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
Paste the below configuration in recently created yml file.

Configuration

name: Deploy to GCP

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js and yarn
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: yarn install

      - name: Build React app
        run: yarn run build

      - name: Create temp folder
        run: mkdir temp_folder

      # This will create a temporary folder
      # It will have build folder and app.yaml
      # app.yaml will use the relative build folder to deploy to GCPs
      - name: Copy build to temp folder
        run: cp -r build/ temp_folder/build/

      - name: Copy app.yaml to temp folder
        run: cp app.yaml temp_folder/app.yaml

      - name: List contents of temp folder for verification
        run: ls -l temp_folder/

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Deploy to Google Cloud Storage
        run: |
          cd temp_folder
          gcloud app deploy app.yaml --quiet

Step 6: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your React app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your React application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (** text) representing your GCP project ID. Replace ** with your project ID and open the URL in your browser.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your React app to Google App Engine and GitHub Actions! 🎉

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

DEV Community: Rushi Patel

Interview Cheat Sheet: App Performance in React Native

Special Article: Interview Cheat Sheet

Why Focus on App Performance in React Native?

What this cheat sheet covers:

App-Level Optimizations

Code-Level Optimizations

What React Native Provides for a Performant App (Brief)

Closing Comments

Optimising App Performance in React Native: A Detailed Guide

React Native App Performance

The Need for a Performant App

Factors That Influence App Performance

Improving Performance in React Native

App-Level Optimizations

Code-Level Optimizations

What React Native Provides for building a Performant App

Common Mistakes That Affect Performance

Closing Comments

Mapped and Conditional Types in TypeScript: A Deep Dive

Introduction

Mapped Types

General Syntax

Applications and Use Cases

1. Making All Properties Optional

2. Making All Properties Required

3. Creating Non-Nullable Versions of a Type

4. Creating Read-Only Versions of a Type

Conditional Types

General Syntax

Applications and Use Cases

1. Excluding Specific Types from a Union

2. Extracting Specific Types from a Union

3. Dynamic Type Transformation Based on Conditions

Custom Utility Types with Mapped & Conditional Types

1. Partial<Type>

2. Required<Type>

3. NonNullable<Type>

4. Pick<Type>

5. Omit<Type>

6. ReadOnly<Type>

7. Conditional Utility Types: Exclude & Extract

Closing Comments

Server-Side Rendering (SSR) and Static Site Generation (SSG) in React: A Deep Dive

SSR and SSG in React: A Deep Dive

Introduction

How Do SSR and SSG Differ from Routine Client-Side Rendering (CSR)?

Why Use SSR and SSG? Benefits & Use Cases

What is Hydration

How Hydration Works

Deep Dive into Server-Side Rendering (SSR)

Definition & Usage

How It Works

Example Code (Next.js Implementation)

Advantages

Limitations

Deep Dive into Static Site Generation (SSG)

Definition & Usage

How It Works

Example Code (Next.js Implementation)

Advantages

Limitations

Implementing SSR and SSG in React

SSR vs. SSG: A Comparison Table

Closing Comments

Utility Types in TypeScript: Partial, Required, Pick, Omit and 10 more...

Utility Types in TypeScript

1. Partial<Type>

2. Required<Type>

3. Readonly<Type>

4. Pick<Type, Keys>

5. Omit<Type, Keys>

6. Record<Keys, Type>

7. Exclude<Type, ExcludedUnion>

8. Extract<Type, Union>

9. NonNullable<Type>

Pro Tip:

10. ReturnType<Type>

11. Parameters<Type>

Summary Table of Key Utility Types

1. `Partial<Type>`

2. `Required<Type>`

3. `NonNullable<Type>`

4. `Pick<Type>`

5. `Omit<Type>`

6. `ReadOnly<Type>`

7. Conditional Utility Types: `Exclude` & `Extract`

1. `Partial<Type>`

2. `Required<Type>`

3. `Readonly<Type>`

4. `Pick<Type, Keys>`

5. `Omit<Type, Keys>`

6. `Record<Keys, Type>`

7. `Exclude<Type, ExcludedUnion>`

8. `Extract<Type, Union>`

9. `NonNullable<Type>`

10. `ReturnType<Type>`

11. `Parameters<Type>`