Jazzed Technology Blog

Vancouver Web Design, SEO & IT Support | Jazzed Technology Blog


# Deploying a Flask API with CloudPanel, Custom Domain, SSL, and GitHub Actions CI/CD

This guide walks you through the process of deploying a Flask API on a CloudPanel server with a custom domain name, free SSL certificates, and automated deployments using GitHub Actions.

## Prerequisites

Before you begin, you should have:
- A CloudPanel server set up and running
- A domain or subdomain you control
- A GitHub repository containing your Flask application
- Basic knowledge of Linux commands and SSH

## Step 1: Create a Python Site in CloudPanel

1. Log in to your CloudPanel dashboard
2. Navigate to "Sites" in the left sidebar
3. Click "Add Site"
4. Fill in the following details:
   - Domain: `your-domain.com` (e.g., `api.examplesite.com`)
   - Select "Python" as the application type
   - Leave the port settings as default (note the port number, e.g., `8090`)
5. Click "Add" to create the site

CloudPanel will automatically set up a Python environment for your site.

## Step 2: Configure DNS Records

1. Log in to your domain registrar's dashboard
2. Create an A record pointing your domain or subdomain to your CloudPanel server's IP address:

Type: A  
Name: api (or @ for the root domain)  
Value: YOUR_SERVER_IP  
TTL: 3600 (or as recommended by your provider)  

3. Wait for DNS propagation (can take up to 24 hours, but usually much less)

## Step 3: Create a SSH Account

1. In CloudPanel, navigate to "Users & Permissions"
2. Click "Add User"
3. Create a new SSH user for your site:
   - Username: `your-username` (e.g., `example-flask-ssh`)
   - Choose appropriate permissions
4. Save the user

## Step 4: Generate and Configure SSH Keys

From your local computer:

1. Generate a SSH key pair without a passphrase:

```bash
ssh-keygen -t ed25519 -C "github-actions" -f ./github-actions-key
```

2. Add the public key to your CloudPanel SSH user:
   - In CloudPanel, go to "Users & Permissions"
   - Select your user
   - Click "Add Public Key"
   - Paste the content of `github-actions-key.pub`
   - Save

3. Securely store the private key (`github-actions-key`) for use with GitHub Actions

## Step 5: Note Site Directory

Take note of your site's directory path. In CloudPanel, Python sites typically follow this pattern:

```
/home/[site-name]/htdocs/[domain]
```

For example: `/home/example-api/htdocs/api.examplesite.com`

## Step 6: Verify Manual Deployment

Connect to your server as the root user:

```bash
ssh root@YOUR_SERVER_IP
```

Navigate to your site directory and run the following commands to ensure your environment is ready:

```bash
cd /home/example-api/htdocs/api.examplesite.com

# Create a virtual environment
python3.12 -m venv venv

# Activate the virtual environment
source venv/bin/activate

# Install required packages
pip install flask waitress
```

Create a simple Flask application to test:

```bash
cat > app.py << 'EOL'
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def home():
    return jsonify({"status": "success", "message": "API is running"})

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8090)
EOL
```

Create a startup script for Waitress:

```bash
cat > start_app.py << 'EOL'
from waitress import serve
from app import app

if __name__ == "__main__":
    serve(app, host="0.0.0.0", port=8090, threads=4)
EOL
```

Create a requirements file:

```bash
cat > requirements.txt << 'EOL'
flask
waitress
EOL
```

## Step 7: Configure Proper Permissions

Set appropriate permissions for your SSH user:

```bash
# Replace these with your actual SSH username and site directory
SSH_USER="example-flask-ssh"
SITE_DIR="/home/example-api/htdocs/api.examplesite.com"

# Change ownership
sudo chown -R $SSH_USER:$SSH_USER $SITE_DIR

# Set permissions
sudo chmod -R u+rwX $SITE_DIR
```

## Step 8: Set Up GitHub Actions

1. In your Flask application repository, create a `.github/workflows` directory:

```bash
mkdir -p .github/workflows
```

2. Create a `deploy.yml` file in this directory:

```yaml
name: Deploy Flask App

on:
  push:
    branches: [ main, master ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Copy Files to Server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ vars.HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "app.py,requirements.txt,start_app.py"
          target: "/tmp/deployment_temp"
          strip_components: 0

      - name: Deploy and Run Application
        uses: appleboy/ssh-action@master
        with:
          host: ${{ vars.HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            # Set up variables
            APP_DIR=${{ vars.DIRECTORY }}
            
            echo "🔄 Starting deployment process..."
            
            # Stop any existing PM2 processes for this app
            pm2 delete audit 2>/dev/null || echo "No existing PM2 process to delete"
            
            # Ensure target directory exists
            mkdir -p $APP_DIR
            
            # Move new files to target directory
            echo "🔄 Updating application files..."
            cp /tmp/deployment_temp/app.py $APP_DIR/app.py
            cp /tmp/deployment_temp/requirements.txt $APP_DIR/requirements.txt
            cp /tmp/deployment_temp/start_app.py $APP_DIR/start_app.py
            
            # Prepare Python environment
            echo "📦 Setting up Python environment..."
            cd $APP_DIR
            
            # Determine Python version
            PYTHON_CMD=$(command -v python3.12 || command -v python3.11 || command -v python3.10 || command -v python3.9 || command -v python3)
            echo "Using Python: $PYTHON_CMD"
            
            # Create venv if it doesn't exist
            if [ ! -d "venv" ]; then
              echo "Creating new virtual environment..."
              $PYTHON_CMD -m venv venv || {
                echo "Failed to create venv, installing dependencies..."
                sudo apt-get update
                sudo apt-get install -y python3-venv python3-full
                $PYTHON_CMD -m venv venv
              }
            fi
            
            # Install dependencies
            echo "Installing Python dependencies..."
            ./venv/bin/pip install -r requirements.txt
            
            # Start the application with PM2
            echo "🚀 Starting Flask app with PM2..."
            cd $APP_DIR
            pm2 start --name audit --interpreter ./venv/bin/python start_app.py
            
            # Save PM2 configuration to persist across reboots
            pm2 save
            
            # Check if the app is running
            echo "📊 PM2 status:"
            pm2 list
            
            # Test the application
            echo "🔍 Testing the application endpoint..."
            curl -I http://127.0.0.1:8090 || echo "❌ Curl failed, application may not be running correctly"
            
            # Clean up
            echo "🧹 Cleaning up temporary files..."
            rm -rf /tmp/deployment_temp
            
            echo "✅ Deployment completed!"
```

## Step 9: Configure GitHub Secrets and Variables

1. In your GitHub repository, go to "Settings" > "Secrets and variables" > "Actions"

2. Add the following secrets:
   - `SSH_USERNAME`: Your SSH username (e.g., `example-flask-ssh`)
   - `SSH_PRIVATE_KEY`: The content of your private key file (`github-actions-key`)

3. Add the following variables:
   - `HOST`: Your server IP address
   - `DIRECTORY`: The path to your site directory (e.g., `/home/example-api/htdocs/api.examplesite.com`)

## Step 10: Test the CI/CD Pipeline

1. Make sure your repository contains at least these files:
   - `app.py`: Your Flask application
   - `requirements.txt`: List of dependencies
   - `start_app.py`: Script to start your application with Waitress
   - `.github/workflows/deploy.yml`: GitHub Actions workflow file

2. Push a change to your `main` or `master` branch:

```bash
git add .
git commit -m "Set up CI/CD pipeline"
git push origin main
```

3. Go to the "Actions" tab in your GitHub repository to monitor the workflow execution

4. Once completed, visit your domain (e.g., `https://api.examplesite.com`) to verify the deployment

## Monitoring and Troubleshooting

### PM2 Commands

After deployment, you can SSH into your server and use these PM2 commands:

```bash
# List all applications
pm2 list

# View detailed information
pm2 show audit

# View logs
pm2 logs audit

# Restart application
pm2 restart audit

# Stop application
pm2 stop audit

# Set up PM2 to start on system boot (run once)
pm2 startup
# Then follow the instructions displayed

# Save current process list (run after updating processes)
pm2 save
```

### SSL Configuration

CloudPanel automatically configures Let's Encrypt SSL certificates for your domain. You can check the SSL status in the CloudPanel dashboard under:

1. Sites > Your Site
2. Click on the site name
3. Navigate to the "SSL/TLS" tab

If SSL isn't automatically configured, you can request a certificate through the CloudPanel interface.

### Troubleshooting Common Issues

1. **Application not accessible**:
   - Check if PM2 is running: `pm2 list`
   - Verify the port number in your code matches the one assigned by CloudPanel
   - Check firewall rules: `sudo ufw status`

2. **GitHub Actions failing**:
   - Check the SSH keys are correctly set up
   - Verify permissions on the site directory
   - Review logs in the GitHub Actions tab

3. **SSL certificate issues**:
   - Ensure DNS records are properly configured
   - Wait for DNS propagation
   - Try manually requesting a certificate in CloudPanel

---

This completes the documentation for deploying a Flask API on CloudPanel with a custom domain, free SSL, and automated CI/CD using GitHub Actions. The system uses PM2 as the process manager for reliable application hosting and automatic restarts if needed.
If you need any assistance with such automated deployments, feel free to reach out to Jazzed Technology, the most well-established and responsive web development company in Surrey, BC, and serving all of Lower Mainland.

Learn to deploy a Flask API with CloudPanel, set up SSL, and automate deployments using GitHub Actions. Perfect for efficient and secure web apps.

Deploying Flask API: CloudPanel, Custom Domain, SSL & GitHub Actions Tutorial

Step-by-Step Guide to Deploying a Flask API with CloudPanel, Custom Domain, SSL, and GitHub Actions


# AWS Cognito Integration with Java-Based Applications

This document provides a **step-by-step guide** to integrating AWS Cognito with a Java-based application using the **OAuth 2.0 Authorization Code Flow with PKCE**. It includes detailed explanations, example code, sample responses, and best practices to ensure a secure and seamless authentication experience.

---

## Overview

AWS Cognito simplifies user authentication and authorization by offloading the complexity of managing secure user login to a cloud-based identity provider. This guide demonstrates how to integrate AWS Cognito into a Java-based application using the **OAuth 2.0 Authorization Code Grant with PKCE**. This method ensures:
- Secure communication between your application and Cognito.
- Compliance with industry-standard authentication practices.

---

## Prerequisites

### AWS Cognito Setup
1. **Create a User Pool**:
   - Go to the AWS Cognito Console and create a user pool.
   - Configure attributes such as username and email.

2. **Create an App Client**:
   - Enable **Authorization Code Grant** and **PKCE** for your app client.
   - Note down the **Client ID** and **Domain** for later use.

3. **Configure Redirect URI**:
   - Set `http://localhost:8080/callback` as the redirect URI in Cognito (replace with your app's URI in production).

### Java Application Setup
1. **Dependencies**:
   - Add libraries for HTTP requests (`Apache HttpClient`), JWT parsing (`auth0`), and JSON handling (`Jackson`).

2. **Environment Variables**:
   - Store sensitive values like the Cognito domain and client ID as environment variables.

---
## Overview Diagram
This image is used from the [Authorization Code Flow Documentation](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow) from Auth0.
![Authorization Code Flow by Auth0](https://images.ctfassets.net/cdy7uua7fh8z/7mWk9No612EefC8uBidCqr/821eb60b0aa953b0d8e4afe897228844/Auth-code-flow-diagram.png)

## Step-by-Step Integration

### 1. Initiating the Login Flow

The login flow begins when a user clicks the "Login" button. The application generates a **PKCE code challenge**, constructs the login URL, and redirects the user to AWS Cognito's hosted UI.

#### Key Steps:
1. **Generate a `code_challenge` and Store the `code_verifier`**:
   - Use the `PKCEUtil` class to generate a random `code_verifier` and its hashed `code_challenge`.
   - Store the `code_verifier` in the session, as it will be needed later during the token exchange.

   **[View details on how the `code_challenge` is generated and `code_verifier` is stored](#2-generating-the-pkce-code-challenge)**

2. **Construct the Login URL**:
   - Include the `response_type`, `state`, `code_challenge`, and other required OAuth parameters.

3. **Redirect the User**:
   - Send the user to Cognito's hosted UI with the constructed login URL.

4. **Sample Login URL**:
   ```
   https://your-cognito-domain.auth.region.amazoncognito.com/login
   ?response_type=code
   &client_id=your-client-id
   &redirect_uri=http://localhost:8080/callback
   &state=random-generated-state
   &scope=openid
   &code_challenge=hashed-code-challenge
   &code_challenge_method=S256
   ```

#### Code Implementation: LoginServlet

```java
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // Step 1: Generate PKCE code challenge and store code verifier
        String codeChallenge = CognitoConfig.getCodeChallenge(request);
        
        // Step 2: Construct the login URL
        String loginUrl = String.format(
                "https://%s/login?redirect_uri=%s&response_type=code&client_id=%s&state=%s&scope=openid&code_challenge=%s&code_challenge_method=S256",
                CognitoConfig.DOMAIN,
                CognitoConfig.getEncodedRedirectUri(),
                CognitoConfig.CLIENT_ID,
                CognitoConfig.getState(),
                codeChallenge
        );

        // Step 3: Redirect the user to Cognito's hosted UI
        response.sendRedirect(loginUrl);
    }
}
```

---

### 2. Generating the PKCE Code Challenge

The PKCE process ensures secure communication during the OAuth flow. It involves generating a `code_verifier` (random string) and a `code_challenge` (hashed version of the `code_verifier`).

#### Key Steps:
1. **Generate a Random `code_verifier`**:
   - Use the `PKCEUtil.generateCodeVerifier()` method to create a secure random string.

2. **Hash the `code_verifier` to Create the `code_challenge`**:
   - Use SHA-256 to hash the `code_verifier` and Base64 URL-encode the result.

3. **Store the `code_verifier`**:
   - Save the `code_verifier` in the user's session for later use during token exchange.

#### Code Implementation: PKCEUtil

```java
public static String generateCodeVerifier() {
    byte[] code = new byte[64];
    new SecureRandom().nextBytes(code);
    return Base64.getUrlEncoder().withoutPadding().encodeToString(code);
}

public static String generateCodeChallenge(String codeVerifier) throws Exception {
    MessageDigest digest = MessageDigest.getInstance("SHA-256");
    byte[] hash = digest.digest(codeVerifier.getBytes("US-ASCII"));
    return Base64.getUrlEncoder().withoutPadding().encodeToString(hash);
}
```

#### Storing the Code Verifier

The `CognitoConfig` class ensures the `code_verifier` is securely stored in the user's session:

```java
private static final String CODE_VERIFIER_SESSION_ATTRIBUTE = "code_verifier";

public static String getCodeChallenge(HttpServletRequest request) throws Exception {
    String codeVerifier = PKCEUtil.generateCodeVerifier();
    storeCodeVerifier(request, codeVerifier);
    return PKCEUtil.generateCodeChallenge(codeVerifier);
}

private static void storeCodeVerifier(HttpServletRequest request, String codeVerifier) {
    request.getSession().setAttribute(CODE_VERIFIER_SESSION_ATTRIBUTE, codeVerifier);
}
```

---

### 3. Handling the Callback

After the user logs in, Cognito redirects them back to your application with an `authorization_code`. 

#### Key Steps:
1. **Extract the Authorization Code**:
   - Retrieve the `code` and `state` from the request parameters.

2. **Exchange the Code for Tokens**:
   - Send a POST request to the Cognito token endpoint with the `code`, `code_verifier`, and other required parameters.

3. **Store Tokens and User Info**:
   - Decode the ID token to extract user claims (e.g., username, email) and save them in the session.

#### Code Implementation: CallBackServlet

```java
@WebServlet("/callback")
public class CallBackServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String code = request.getParameter("code");
        if (code != null) {
            Map<String, String> tokens = AuthService.exchangeCodeForTokens(
                request, CognitoConfig.getTokenEndpoint(), CognitoConfig.CLIENT_ID, code);

            String idToken = tokens.get("id_token");
            DecodedJWT jwt = AuthService.parseIdToken(idToken);

            HttpSession session = request.getSession(true);
            session.setAttribute("idToken", idToken);
            session.setAttribute("username", jwt.getClaim("custom:idp_username").asString());

            response.sendRedirect(CognitoConfig.getSuccessRedirectForward());
        } else {
            response.sendRedirect("/login");
        }
    }
}
```

---

### 4. Token Exchange and Parsing

The `AuthService` class handles the token exchange and JWT parsing.

#### Key Steps:
1. **Send a POST Request to the Token Endpoint**:
   - Include the `authorization_code`, `code_verifier`, and other parameters.

2. **Parse the Response**:
   - Decode the ID token using the `auth0` library.

3. **Return Type and Example Response**:
   - The method returns a `Map<String, String>` containing tokens (ID token, access token, refresh token).

#### Code Implementation: AuthService

```java
public static Map<String, String> exchangeCodeForTokens(HttpServletRequest request, String tokenEndpoint, String clientId, String code) throws IOException {
    try (CloseableHttpClient client = HttpClients.createDefault()) {
        HttpPost post = new HttpPost(tokenEndpoint);
        post.setHeader("Content-Type", "application/x-www-form-urlencoded");

        String codeVerifier = CognitoConfig.retrieveCodeVerifier(request);
        Map<String, String> params = new HashMap<>();
        params.put("grant_type", "authorization_code");
        params.put("client_id", clientId);
        params.put("code", code);
        params.put("redirect_uri", CognitoConfig.REDIRECT_URI);
        params.put("code_verifier", codeVerifier);

        post.setEntity(new StringEntity(params.entrySet().stream()
                .map(e -> e.getKey() + "=" + e.getValue())
                .collect(Collectors.joining("&"))));

        try (CloseableHttpResponse response = client.execute(post)) {
            String responseBody = EntityUtils.toString(response.getEntity());
            return new ObjectMapper().readValue(responseBody, Map.class);
        }
    }
}
```

#### Sample Response from Cognito
```json
{
  "id_token": "eyJraWQiOiJLTUt3Vz...",
  "access_token": "eyJraWQiOi...",
  "refresh_token": "def50200...",
  "expires_in": 3600,
  "token_type": "Bearer"
}
```

### 5. Managing Tokens and Sessions

Once tokens are obtained from the Cognito token endpoint, managing them properly ensures a smooth and secure user authentication experience. This includes verifying token validity, refreshing tokens when needed, and securely storing tokens.

#### Key Responsibilities of Token Management:
1. **Verify Token Validity**:
   - Check whether the ID token is expired before proceeding with user actions.
2. **Refresh Expired Tokens**:
   - Use the refresh token to obtain new tokens when the ID token has expired.
3. **Securely Store Tokens**:
   - Store tokens in server-side sessions to prevent exposure.

#### Code Implementation: AuthenticationFilter

The `AuthenticationFilter` is a Java servlet filter that ensures all incoming requests are authenticated. It checks the validity of the ID token, refreshes it if necessary, and redirects unauthenticated users to the login page.

```java
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;

    // Step 1: Retrieve the current session
    HttpSession session = request.getSession(false);
    boolean loggedIn = session != null && session.getAttribute("username") != null;

    if (loggedIn) {
        // Step 2: Get the ID token from the session
        String idToken = (String) session.getAttribute("idToken");
        DecodedJWT jwt = JWT.decode(idToken);

        // Step 3: Check if the token is expired
        if (jwt.getExpiresAt().before(new Date())) {
            String refreshToken = (String) session.getAttribute("refreshToken");

            // Step 4: Refresh the tokens
            Map<String, String> newTokens = AuthService.refreshTokens(
                    String.format("https://%s/oauth2/token", CognitoConfig.getDomain()),
                    CognitoConfig.getClientId(),
                    refreshToken
            );

            // Step 5: Update the session with new tokens
            session.setAttribute("idToken", newTokens.get("id_token"));
            session.setAttribute("refreshToken", newTokens.get("refresh_token"));
        }

        // Allow the request to proceed
        chain.doFilter(req, res);
    } else {
        // Redirect to login if not logged in
        response.sendRedirect(request.getContextPath() + "/login");
    }
}
```

#### Explanation:
1. **Token Validation**:
   - Decodes the ID token using the `auth0` library and checks its expiration (`exp` claim).
2. **Refreshing Tokens**:
   - If the ID token is expired, the `AuthService.refreshTokens` method is called to obtain a fresh set of tokens.
3. **Session Management**:
   - Updates the session with the new tokens, ensuring the user remains authenticated.

---

### 6. Logging Out

Logging out involves invalidating the user's session and optionally redirecting them to the Cognito logout endpoint.

#### Why is this important?
Logging out ensures:
1. Sensitive information, including tokens, is cleared from the session.
2. The user is redirected to a safe location (e.g., home page or login page).

#### Key Steps:
1. **Invalidate the Session**:
   - Use the `HttpSession.invalidate()` method to clear all session attributes.
2. **Redirect to Cognito's Logout Endpoint** (Optional):
   - Redirect the user to Cognito's logout URL to fully log them out of all Cognito-managed sessions.

#### Code Implementation: LogoutServlet

```java
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // Step 1: Invalidate the session
        HttpSession session = request.getSession(false);
        if (session != null) {
            session.invalidate();
        }

        // Step 2: Redirect to home page or Cognito logout endpoint
        String logoutUrl = String.format(
                "https://%s/logout?client_id=%s&logout_uri=%s",
                CognitoConfig.DOMAIN,
                CognitoConfig.CLIENT_ID,
                "http://localhost:8080/"
        );
        response.sendRedirect(logoutUrl);
    }
}
```

#### Example Cognito Logout URL:
```
https://your-cognito-domain.auth.region.amazoncognito.com/logout
?client_id=your-client-id
&logout_uri=http://localhost:8080/
```

---

### Best Practices

To ensure a secure and reliable implementation, follow these best practices:

1. **Use HTTPS**:
   - Always use HTTPS to encrypt data in transit, especially tokens.
2. **Store Tokens Securely**:
   - Use server-side sessions to store tokens. Avoid storing sensitive tokens (e.g., ID or refresh tokens) in client-side cookies or local storage.
3. **Graceful Token Refresh**:
   - Implement token refresh logic to handle token expiration seamlessly without requiring the user to log in again.
4. **Validate `state` Parameter**:
   - Always validate the `state` parameter during the callback to prevent CSRF attacks.
5. **Handle Token Revocation**:
   - If a user revokes a token, handle the scenario gracefully by redirecting them to the login page.

---

### Common Pitfalls and Debugging

1. **Missing `code_verifier` During Token Exchange**:
   - Ensure the `code_verifier` is stored in the session during the login flow.
   - Retrieve it from the session during the token exchange.

2. **Token Expiration**:
   - Always check the `exp` claim in the ID token to determine its validity.
   - Use the refresh token to obtain new tokens when the ID token has expired.

3. **Mismatched Redirect URI**:
   - Ensure the redirect URI configured in Cognito matches the one used in your application. Mismatched URIs will result in authentication failures.

4. **Invalid State Parameter**:
   - If the `state` parameter is missing or mismatched during the callback, reject the request to prevent potential CSRF attacks.

#### Debugging Tips:
- Log all incoming requests and their parameters during the callback to debug issues.
- Use tools like Postman to test the token exchange process.
- Enable detailed logging in your application during development to trace token-related issues.

---

### Conclusion

This guide provides a comprehensive walkthrough of integrating AWS Cognito with a Java-based application. By following these steps, you can implement a secure and scalable authentication solution using industry-standard practices.

#### Summary of Key Features:
1. **Secure Authentication**:
   - Leverages OAuth 2.0 Authorization Code Flow with PKCE for secure token exchange.
2. **Session Management**:
   - Uses server-side sessions to store and manage tokens securely.
3. **Token Refresh**:
   - Implements seamless token refresh logic for uninterrupted user sessions.
4. **Logout Handling**:
   - Ensures proper session invalidation and optional Cognito logout.

By implementing these features and best practices, you'll provide a robust authentication solution for your application.

Integrate AWS Cognito with Java using OAuth 2.0 PKCE. Step-by-step guide with code, token management, and logout implementation for secure apps.

AWS Cognito Integration with Java | Jazzed Technology Blog

Complete Guide to AWS Cognito Integration with Java: Secure OAuth 2.0 PKCE Authentication


## Introduction

End-to-end (E2E) testing is an essential part of modern web development. It ensures that your application works as expected from the user's perspective. In this blog post, we'll walk through setting up Cypress for E2E testing in a Vite React TypeScript application. We'll create a simple app that fetches and displays jokes, then write tests to verify its behavior.

## Prerequisites

Before we start, make sure you have the following installed:

- Node.js and npm
- Vite
- React
- TypeScript

## Setting Up the Project

### 1. Create a Vite React TypeScript App

First, create a new Vite React TypeScript project:

```bash
npm create vite@latest my-demo-app --template react-ts
cd my-demo-app
npm install
```

### 2. Install Cypress

Next, install Cypress as a development dependency:

```bash
npm install cypress --save-dev
```

### 3. Initialize Cypress

Open Cypress for the first time to initialize the required files and directories:

```bash
npx cypress open
```

This command will create a `cypress` directory and some example test files.

## Creating the Joke App

### 1. Create a Joke Component

Create a `Joke.tsx` component that fetches and displays a joke:

```typescript name=src/components/Joke.tsx
import React, { useState } from 'react';

const Joke: React.FC = () => {
  const [joke, setJoke] = useState<string>('');

  const fetchJoke = async () => {
    const response = await fetch('https://icanhazdadjoke.com/', {
      headers: { Accept: 'application/json' },
    });
    const data = await response.json();
    setJoke(data.joke);
  };

  return (
    <div>
      <button onClick={fetchJoke}>Get Joke</button>
      <p>{joke}</p>
    </div>
  );
};

export default Joke;
```

### 2. Update the App Component

Use the `Joke` component in your `App.tsx`:

```typescript name=src/App.tsx
import React from 'react';
import Joke from './components/Joke';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Joke App</h1>
      <Joke />
    </div>
  );
};

export default App;
```

## Writing Cypress Tests

### 1. Create a Cypress Test File

Create a new test file `joke.cy.ts` in the `cypress/e2e` directory:

```typescript name=cypress/e2e/joke.cy.ts
/// <reference types="cypress" />

describe('Joke App', () => {
  it('should display a joke when the button is clicked', () => {
    cy.visit('http://localhost:5173');
    cy.get('button').click();
    cy.get('p').should('not.be.empty');
  });

  it('should fetch a new joke when the button is clicked again', () => {
    cy.visit('http://localhost:5173');
    cy.get('button').click();
    cy.wait(1000); // Wait for the first joke to load
    cy.get('p').then(($p) => {
      const firstJoke = $p.text();
      cy.get('button').click();
      cy.wait(1000); // Wait for the new joke to load
      cy.get('p').should(($newP) => {
        const newJoke = $newP.text();
        expect(newJoke).not.to.eq(firstJoke);
      });
    });
  });
});
```

### 2. Run the Cypress Tests

Open Cypress and run the tests:

```bash
npx cypress open
```

This will open the Cypress Test Runner, where you can see your tests listed and run them.

## Conclusion

Congratulations! You've successfully set up Cypress for E2E testing in a Vite React TypeScript app. You've created a simple joke-fetching app and written tests to verify its functionality. E2E testing with Cypress helps ensure that your application behaves as expected from the user's perspective, providing confidence as you develop and deploy your app.

For more advanced Cypress features and testing scenarios, refer to the [Cypress documentation](https://docs.cypress.io).
Written with ❤️ By [Jazzed Technology](https://jazzgrewal.com)
Happy testing!


Learn to write your first end-to-end test with Cypress in a Vite React TypeScript app. Follow Jazzed Technology's guide for setup, examples, and testing.

Cypress End-to-End Testing Tutorial in React TS App | Jazzed Technology

Writing Your First End-to-End Test with Cypress in a Vite React TypeScript App


If you're a realtor looking to integrate MLS listings automatically into your website, the Real Estate Board of Greater Vancouver (REBGV) provides access to its MLS data via a WebAPI. This guide will walk you through the process of requesting access and implementing the API for seamless property updates.

-----
**Step 1: Confirm Eligibility**

Before applying for access, ensure you meet the following requirements:

- You must be a **licensed real estate agent** with REBGV, Fraser Valley Real Estate Board (FVREB), or Chilliwack & District Real Estate Board (CADREB). These boards share data, so a single connection with REBGV provides access to listings from all three.
- You need a **website or application** that will display MLS data in compliance with REBGV's policies.
- You must submit **IDX (Internet Data Exchange), VOW (Virtual Office Website), and reciprocal data agreements** to your real estate board.
-----
**Step 2: Request Access to REBGV’s WebAPI**

The RETS system previously used for MLS data has been replaced with a **modern WebAPI**. This API follows the **RESO Web API** standards, allowing more efficient and flexible access to MLS listings.

**How to Apply for WebAPI Access:**

1. **Contact REBGV’s IDX Department**
   1. Email or call REBGV to request WebAPI access.
   1. They will verify your eligibility and ensure you have submitted all necessary agreements.
1. **Obtain a Test Login**
   1. REBGV will provide test credentials for development purposes.
   1. This login grants access to **sample MLS data**, allowing developers to integrate and test the API.
1. **Develop Your Website or App**
   1. Your website must fetch MLS data through the WebAPI and display it correctly.
   1. Follow **RESO Web API** standards to ensure compliance. ([Learn more about RESO Web API](https://www.reso.org/reso-web-api/))
1. **Submit Your Website for Compliance Review**
   1. REBGV will **review your website** to ensure it meets IDX/VOW rules.
   1. This process can take several weeks or months, so plan accordingly.
1. **Receive Production Access**
   1. Once approved, REBGV will issue **production credentials** for live MLS data.
   1. Note: Production login settings may differ from the test environment, requiring final adjustments to your integration.
-----
**Step 3: Implement Automatic Listing Updates**

To keep MLS listings current on your website, your system should:

- **Schedule API updates** to fetch new listings regularly.
- **Store and manage property images** efficiently to handle large datasets.
- **Ensure compliance** with display and advertising rules outlined by REBGV.

For technical details on integrating the **RESO Web API**, refer to:
[RESO Web API Documentation](https://www.reso.org/reso-web-api/)

-----
**Need Help? Let Jazzed Technology Handle the Setup**

Integrating MLS data can be complex, but we make it simple. At **Jazzed Technology**, we specialize in setting up realtor websites with full MLS integration, ensuring compliance and automatic listing updates.

Contact us today to get your MLS-powered website up and running!

-----
**Sources & Disclaimer:**

- [REBGV WebAPI Transition Guide](https://member.gvrealtors.ca/en/newsletter/member-update-emails/transitioning-to-webapi-faq-for-vendors-and-developers.html)
- [RESO Web API Information](https://www.reso.org/reso-web-api/)

*The information in this guide is based on official REBGV and RESO sources. MLS data access policies may change without notice, so always verify with REBGV for the latest requirements.*



Learn how to get MLS API access in Canada, including REBGV's WebAPI and IDX Broker API setup. Step-by-step guide for realtors to integrate automatic MLS listings into their website.

MLS API Access: How Realtors Can Integrate IDX Broker API in Canada

How to Get MLS API Access in Canada: A Step-by-Step Guide for Realtors


### Introduction
When working with React applications, the **Context API** is a powerful tool for managing global state. One common use case is authentication, where an `AuthProvider` component manages user login, logout, and user details. However, testing components that depend on `useContext` can be tricky.

In this article, we’ll explore **unit testing the Context API in React with TypeScript using Vitest.** We’ll focus on testing a profile component that fetches user details from an AuthProvider and conditionally renders content based on the authentication state.

By the end of this tutorial, you’ll learn how to:

✅ Mock context values in Vitest
✅ Test components that rely on the Context API
✅ Simulate different authentication states

### Understanding `AuthProvider`
Before diving into tests, let’s understand the role of `AuthProvider`. It typically handles user authentication by:

* Storing user details (name, email, ID, etc.)
* Providing login and logout functions
* Returning the user object to child components
* Checking if a user is authenticated

Here’s a basic example of an `AuthProvider`:

``` tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';
interface User {
  firstName: string;
  lastName: string;
  userName: string;
  email: string;
}
interface AuthContextType {
  user: User | null;
  login: (userData: User) => void;
  logout: () => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const login = (userData: User) => setUser(userData);
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};
```
### The `MyProfile` Component
Now, let’s look at the `MyProfile` component. It fetches user details from useAuth and conditionally renders either a loading state or user details.

``` tsx
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { SideNavLink, Loading } from '@carbon/react';
import * as Icons from '@carbon/icons-react';
import AvatarImage from '../AvatarImage';
import { useThemePreference } from '../../utils/ThemePreference';
import { useAuth } from '../../contexts/AuthProvider';
const MyProfile = () => {
  const { user, logout } = useAuth();
  const { theme, setTheme } = useThemePreference();
  const navigate = useNavigate();
  const [goTo, setGoTo] = useState(false);
  const [goToURL, setGoToURL] = useState('');
  useEffect(() => {
    if (goTo) {
      setGoTo(false);
      navigate(goToURL);
    }
  }, [goTo]);
  const changeTheme = () => {
    const newTheme = theme === 'g10' ? 'g100' : 'g10';
    setTheme(newTheme);
    localStorage.setItem('mode', newTheme === 'g10' ? 'light' : 'dark');
  };
  return user ? (
    <>
      <div className="user-info-section">
        <AvatarImage userName={`${user.firstName} ${user.lastName}`} size="large" />
        <div className="user-data">
          <p className="user-name">{`${user.firstName} ${user.lastName}`}</p>
          <p>{`Username: ${user.userName}`}</p>
          <p>{`Email: ${user.email}`}</p>
        </div>
      </div>
      <hr className="divisory" />
      <nav className="account-nav">
        <SideNavLink renderIcon={theme === 'g10' ? Icons.Asleep : Icons.Light} onClick={changeTheme}>
          Change theme
        </SideNavLink>
        <SideNavLink renderIcon={Icons.UserFollow} onClick={logout}>
          Log out
        </SideNavLink>
      </nav>
    </>
  ) : (
    <Loading description="Loading user details" withOverlay />
  );
};
export default MyProfile;
```

### Unit Testing `MyProfile` with Vitest
To test this component, we need to mock useAuth so we can control the returned user data.

```tsx
import React from 'react';
import MyProfile from '../../components/MyProfile';
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { AuthProvider, useAuth } from '../../contexts/AuthProvider';
import { ThemePreference } from '../../utils/ThemePreference';
import { BrowserRouter } from 'react-router-dom';
const renderComponent = () => {
  render(
    <ThemePreference>
      <AuthProvider>
        <BrowserRouter>
          <MyProfile />
        </BrowserRouter>
      </AuthProvider>
    </ThemePreference>
  );
};
// Mock useAuth
vi.mock('../../contexts/AuthProvider', () => ({
  AuthProvider: ({ children }) => <>{children}</>,
  useAuth: vi.fn(),
}));
describe('MyProfile', () => {
  beforeAll(() => {
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: vi.fn().mockImplementation(query => ({
        matches: query === '(prefers-color-scheme: dark)',
        media: query,
        onchange: null,
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    });
  });
  it('should show "Loading user details" when user is not set', () => {
    (useAuth as ReturnType<typeof vi.fn>).mockReturnValue({ user: null });
    renderComponent();
    expect(screen.getByText('Loading user details')).toBeInTheDocument();
  });
  it('should display user details when user is available', () => {
    (useAuth as ReturnType<typeof vi.fn>).mockReturnValue({
      user: {
        firstName: 'John',
        lastName: 'Doe',
        userName: 'jdoe',
        email: 'john.doe@example.com',
      },
      logout: vi.fn(),
    });
    renderComponent();
    expect(screen.getByText('John Doe')).toBeInTheDocument();
  });
});
```

### Conclusion

By mocking `useAuth`, we can test the `MyProfile` component under different authentication states. **Vitest makes it simple to mock hooks and verify component behavior efficiently.**

Now you can confidently write tests for your Context API-powered components in React with TypeScript and Vitest!

***Happy Coding!***


Master unit testing in React by learning how to test Context API authentication with Vitest and TypeScript. Follow this tutorial for a deep dive into mocking hooks and testing React components.

Unit Testing React Context API with Vitest: A Guide for Testing Authentication with TypeScript

How to Unit Test React Context API Authentication with Vitest | A Comprehensive Tutorial


# Integrating Carbon Design System with React JS: A Comprehensive Tutorial

Welcome, developers! In this tutorial, we'll explore how to integrate the Carbon Design System with a React JS application, creating visually appealing and consistent user interfaces. Follow the step-by-step guide below to seamlessly incorporate Carbon Design System into your React project.

## Step 1: Set Up Your React App

Begin by creating a new React app using Create React App. Open your terminal and run the following command:
```bash
npx create-react-app carbon-tutorial-react-js
```
Navigate into your project directory:
```bash
cd carbon-tutorial-react-js
```
## Step 2: Clear the Default React Starter Code

In your src/App.js file, remove the default React starter code. We'll start with a clean slate.

## Step 3: Install @carbon/react Library

Install the @carbon/react library, which contains the Carbon Design System components for React:
```bash
npm install @carbon/react
```
## Step 4: Import Carbon Component in App.js

Now, let's import a Carbon Design System component into your App.js. For example, replace the content of App.js with the following code snippet:

```js
import React from 'react';
import { Button } from '@carbon/react';
import { Link } from 'react-router-dom'; // If you have React Router

import './custom.scss';

function App() {
  return (
    <div>
      <h2>Hi There, Welcome to the Test Page</h2>
      <Link to="/data-table">
        <Button>View Table Demo</Button>
      </Link>
    </div>
  );
}
```

export default App;

## Step 5: Addressing Styling Issues

By this point, you may notice that while the button appears, the Carbon styling does not. This is where Carbon Design System differs. We need to take an additional step to import the Carbon styling.

## Step 6: Create custom.scss

Create a new file called custom.scss in the src folder.

## Step 7: Add Carbon Styling in custom.scss

In custom.scss, include the following line to import Carbon Design System styling:
```scss
@use '@carbon/react';
```
## Step 8: Import custom.scss in App.js

Finally, import the custom.scss file in your App.js to apply the Carbon styling to all components:
```js
import './custom.scss';
```
That's it! Save your files and reload your React app. You'll now experience the elegance of Carbon Design System applied to your components. Feel free to explore more components and styles offered by Carbon to enhance your application's UI.

Happy coding! 🚀

Explore the [Carbon Tutorial React Demo repository](https://github.com/jazzgrewal/carbon-tutorial-react) by jazzgrewal for more information, code snippets, and a live demo. Feel free to clone the repository, play around with the code, and dive deeper into the integration details. If you have any questions or want to contribute, the repository is a valuable resource for expanding your understanding of Carbon Design System with React.


Learn how to seamlessly integrate Carbon Design System with React JS for stunning UIs.

Integrating Carbon Design System with React JS | Step-by-Step Guide

Using Carbon Design System in React: A Comprehensive Tutorial


Introduction
------------

Qwik and Next.js are two JavaScript-based frameworks that have been gaining popularity among developers. Qwik is an independent JavaScript framework that serves pages statically and only changes parts of the page as needed, optimizing for quicker startup times. It also has a unique "resumability" feature that allows it to solve "hydration" issues, where the client-side needs to reprocess server-side generated HTML.

Comparison
----------

While both frameworks have different approaches, with Next.js offering client-side rendering (CSR), SSR, and progressive hydration, Qwik eliminates the need for hydration and instead serializes the app state, potentially leading to more efficient rendering and improved performance.

### Performance

One of the distinguishing factors in the battle between Qwik and Next.js boils down to performance. When building robust, interactive web applications, performance is a crucial aspect to consider. Whether debating load times, server-side rendering, or handling JavaScript tasks, each of these can affect the overall user experience and the success of a project. Through my research, I stumbled across an interesting performance comparison based on OpenAI's DALL-E made by Daw-Chih Liou. He conducted a demonstration where Next.js uses React server components for fast server-side rendering (SSR). We can observe the following:

-   Qwik's speed index is 0.5 s faster than Next.js.
-   Qwik's time to interactive is 0.3 s faster than Next.js.
-   Next.js has a 0 ms total blocking time, comparing to Qwik's 160 ms.
-   Next.js has a slightly higher overall performance score by 5 points.
-   Next.js's largest contentful paint is 0.8 s faster than Qwik.

### Tool Compatibility

While Next.js is most suitable for React developers due to its compatibility with tools like TypeScript and Sass, Qwik is supportive of modern Angular apps and other features including TypeScript, Sass, PWA and SEO.

### Code Snippets

Here are some code snippets that demonstrate how the initial setup is different for both frameworks:

#### Qwik
```Javascript
import {registerComponents} from 'qwik';

registerComponents({

  'my-component': {

    template: '<div>Hello {{name}}!</div>',

    props: {name: 'World'},

  },

});
```
#### Next.js
```Javascript
// Define the component class
class MyComponent {
  constructor(props) {
    this.props = { name: 'World', ...props };
  }

  render() {
    return `<div>Hello ${this.props.name}!</div>`;
  }
}

// Create an instance of the component
const myComponentInstance = new MyComponent();

// Render the component
const componentHTML = myComponentInstance.render();

console.log(componentHTML); // Output: <div>Hello World!</div>
```
References
----------

[Qwik vs Next.js: In-depth Comparison for Developers | caisy](https://caisy.io/blog/qwik-vs-next-js)
[Is Qwik Faster than React Server Component? - GitHub Pages](https://dawchihliou.github.io/articles/is-qwik-faster-than-react-server-component)

Qwik vs Next.js: Uncovering the Ideal Framework for Web Development

Qwik vs Next.js in 2023 | Jazzed Technology Blog

Qwik vs Next.js, best javascript framework for web development in 2024


# Why WordPress Stands Out as a CMS for Web Development

If you're considering a content management system (CMS) for your web development project, WordPress emerges as a top choice. It offers a multitude of advantages that benefit both web developers and clients alike.

## User-Friendly Interface

WordPress provides an intuitive and user-friendly interface, empowering clients to manage their website content effortlessly, without requiring extensive technical knowledge. Content updates, blog posts, and media uploads become a breeze.

## Extensive Plugin Ecosystem

WordPress boasts a vast ecosystem of plugins and extensions that elevate website functionality. Whether you need e-commerce features, SEO optimization, or social media integration, there's likely a WordPress plugin available to meet your specific requirements.

## Responsive Design

In today's mobile-centric world, responsive design is essential. WordPress themes are designed to be mobile-friendly, ensuring your website looks and functions well on various devices, from desktops to smartphones.

## SEO-Friendly

Recognizing the importance of SEO for online visibility, WordPress comes with built-in SEO features and supports plugins like Yoast SEO, which improve search engine rankings and drive organic traffic.

## Scalability

Whether you're creating a small business website or a large e-commerce platform, WordPress is scalable and can accommodate your growth. It's an ideal choice for clients who want to expand their online presence over time.

## Strong Community Support

WordPress enjoys an active community of developers, designers, and users. This means you can find solutions to issues quickly, access online forums for advice, and tap into a wealth of resources for your website's success.

## Cost-Effective

WordPress is an open-source platform, making it a cost-effective choice for web development projects. You won't have to invest heavily in licensing fees, aligning it with your budget.

## Security

Security is a paramount concern. WordPress offers regular security updates and a range of security plugins to protect your website from threats.

## Customization

WordPress allows extensive customization. Tailor your website to your specific needs, ensuring it stands out from the crowd.

In summary, WordPress stands out as an excellent choice for web development clients. Its user-friendliness, extensive ecosystem, SEO capabilities, cost-effectiveness, and customizability make it a top platform for building and managing websites.

Ready to embark on your WordPress-powered website journey? [Contact us](https://www.jazzgrewal.com/) today to discuss your web development project and unlock the potential of this versatile CMS.


Explore the advantages of using WordPress for web development projects.

Why WordPress CMS in 2023| Jazzed Technology Blog

Why WordPress Stands Out as a CMS for Web Development in 2023


As the realm of AI continues to evolve, there's a new way to benefit from it when it comes to obtaining real images for your website. Jaskirat(Jazz) Grewal is at the forefront of this transformation and recommends using Adobe Firefly for generating high-quality images efficiently.

### Adobe Firefly: The Evolution of Image Creation

Adobe Firefly is an advanced AI-powered tool that offers an innovative solution for web developers, designers, and content creators. With its ability to generate lifelike images, Adobe Firefly can transform the visual appeal of your website, making it stand out in the digital landscape.

### The Advantages of Adobe Firefly

- Realistic Images: Adobe Firefly can generate images that are almost indistinguishable from photographs, creating an immersive and authentic visual experience for your website visitors.

- Efficiency: Creating compelling images can be time-consuming, but Adobe Firefly streamlines the process, helping you produce captivating visuals quickly and with minimal effort.

- Customization: Tailor images to your specific needs. Whether it's product images, backgrounds, or illustrations, Adobe Firefly allows for customization to match your brand's unique style.

### How Jazzed Technology Utilizes Adobe Firefly

[Learn how Jazzed Technology can help you use the power of Adobe Firefly to enhance the quality of website content](https://www.jazzgrewal.com/). By efficiently generating realistic images, we provide our clients with visually appealing websites that leave a lasting impression.

Discover how your website can benefit from the remarkable capabilities of Adobe Firefly. Contact us today to explore the world of AI-powered image creation and take your web design to the next level.

[Explore Our Services](https://www.jazzgrewal.com/)

Go back [home](/).


Leverage Adobe Firefly for realistic images on your website.

Adbobe Firefly for Site Images | Jazzed Technology Blog

Efficiently Using Adobe Firefly for Real Images on Your Website


# Debugging Expo Go: A Guide to Resolving the Blank Page Issue in React Native Apps

Hello, fellow developers! Today, we're going to tackle a common issue that many of us have faced when working with Expo Go: the dreaded blank page. This problem often arises when our app runs perfectly in the local environment, but upon deployment in Expo Go for preview, all we see is a blank page. And to make matters worse, no errors are reported. So, how do we resolve this? Let's dive in!

## Understanding the Issue

Before we delve into the solution, let's first understand the problem. When developing an application, it's not uncommon for everything to function as expected in the local environment. However, when the app is deployed for preview in Expo Go, we're presented with a blank page. This typically indicates an error in the code that isn't being caught during the local development phase.

The challenge here is that the error isn't clearly visible or reported in the Expo Go environment. This lack of error reporting makes it difficult to identify and resolve the issue. Debugging in such situations can be tricky, as the problem isn't readily apparent.

## The Solution: Android Studio's Logcat

The solution to this problem lies in a feature of Android Studio: the logcat. The logcat is a command-line tool that dumps a log of system messages, including stack traces when the device throws an error. Here's how you can use it to debug your Expo Go app:

1. **Initiate Debugging**: Launch Android Studio and navigate to the 'logcat' tab located at the bottom. This will allow you to view a continuous stream of logs from your device.

2. **Open the App**: On your Android device, access the app using the URL provided by Expo EAS. You can do this by copying and pasting the URL.

3. **Identify Your App's Logs**: As you run the app, perform a `console.log` operation either on the home screen or any other part of the app. This will help you distinguish logs generated by your app.

4. **Filter and Find Errors**: Utilize the filtering feature in the logcat. Filter by 'ReactNativeJS' or 'host.exp.exponent'. Look out for any logs highlighted in red. Following these logs should lead you to the source of your error.

## Wrapping Up

Debugging is a systematic process of identifying, isolating, and fixing issues in a codebase. It requires patience, a keen eye for detail, and a thorough understanding of the code you're working with. By using Android Studio's logcat feature, you can catch errors that aren't being displayed in the Expo Go environment, allowing you to identify and resolve the issue causing the blank page.

Remember, the key to effective debugging is patience and meticulous observation. So, the next time you encounter the blank page issue in Expo Go, give this method a try. Happy debugging and coding! 🚀


Debugging the blank page or app crashing issue in Expo React Native Apps

Debugging React Native Expo App | Jazzed Technology Blog

Debugging Expo Go: A Guide to Resolving the Blank Page Issue in React Native Apps


In the ever-evolving landscape of mobile app development, choosing the right technology is paramount. Jaskirat (Jazz) Grewal enthusiastically recommends React Native for cross-platform mobile app development in 2024. React Native has gained immense popularity, and here's why it's the optimal choice for your cross-platform mobile app projects.

### 1. Cross-Platform Efficiency

React Native's biggest advantage is its cross-platform development capabilities. With a single codebase, you can create mobile apps that run seamlessly on both iOS and Android devices. This not only streamlines development but ensures a consistent user experience.

### 2. Native-Like Performance

React Native offers near-native performance, thanks to its ability to compile to native code. This results in fast, responsive, and user-friendly mobile apps, even for complex and demanding use cases.

### 3. Reusable Components

The component-based architecture of React Native allows for the creation of reusable UI components. This significantly accelerates development and maintenance, as you can use the same components across different parts of your app.

### 4. Strong Developer Community

React Native benefits from a thriving developer community. With a vast and active community, you'll have access to a wealth of resources, libraries, and solutions, making problem-solving and development more efficient.

### 5. Vast Ecosystem

React Native comes with an extensive ecosystem, including a wide array of third-party libraries and tools. This includes a rich set of components, modules, and packages that can expedite development and enhance app functionality.

### 6. Cost-Effective

Cross-platform development with React Native saves both time and money. It eliminates the need to develop and maintain separate codebases for iOS and Android, making it a cost-effective choice for clients and developers alike.

### 7. Hot Reloading

React Native offers hot reloading, a feature that allows developers to view real-time results of code changes without losing the app's current state. This not only speeds up development but also enhances testing and debugging processes.

### 8. SEO-Friendly

Search engine optimization is critical for mobile apps. React Native's ability to support server-side rendering (SSR) simplifies the process of optimizing your app for search engines, resulting in improved discoverability.

### 9. Proven Success

React Native has been successfully adopted by many major companies and startups, and its track record speaks to its reliability and effectiveness as a development platform.

In summary, Jazzed Technology Vancouver Web Design, SEO, and IT Support Company highly recommend React Native as the ultimate choice for cross-platform mobile app development in 2024. Its cross-platform efficiency, near-native performance, and extensive ecosystem make it a top pick for both developers and clients. Get in touch with Jazzed Technology today to embark on your cross-platform mobile app development journey with React Native.

Go back [home](/).


Explore the advantages of using React Native for cross-platform mobile app development, as recommended by Jaskirat (Jazz) Grewal.

Why Choose React Native in 2024| Jazzed Technology Blog

Why Choose React Native for Cross-Platform Mobile App Development in 2024


Selecting the right keywords is a critical step in achieving SEO success for your website. Jazzed Technology knows the importance of strategic keyword planning, and we're here to guide you through the process. Let's explore how to efficiently plan your website's keywords and the best SEO keyword planner tools available.

### Why Keywords Matter

Keywords are the foundation of your website's SEO strategy. They are the words and phrases that potential visitors type into search engines when looking for content or services. By optimizing your website for the right keywords, you can improve your search engine rankings, drive organic traffic, and increase online visibility.

### Efficient Keyword Planning

1. **Keyword Research:** Start by brainstorming relevant keywords and phrases that your target audience is likely to use. Use tools like Google's Keyword Planner, Ahrefs, or SEMrush to discover more keyword ideas.

2. **Long-Tail Keywords:** Long-tail keywords are longer, more specific phrases. For example, "Vancouver SEO services for small businesses" is a long-tail keyword. They can be less competitive and attract highly targeted traffic.

3. **Competitor Analysis:** Analyze your competitors' websites to see which keywords they are targeting. Tools like SEMrush and SpyFu can help with this.

4. **Search Volume and Competition:** Evaluate the search volume and competition level for your chosen keywords. High search volume keywords may be competitive, so balance them with lower competition keywords.

5. **Keyword Mapping:** Organize your keywords into groups that align with different pages or topics on your website. This helps you create targeted content for each keyword group.

### Best Keyword Planner Tools

- **Google Keyword Planner:** This free tool offers insights into search volume and competition for keywords.

- **Ahrefs:** Known for its comprehensive keyword research capabilities and competitor analysis.

- **SEMrush:** Provides keyword research, site audit, and competitive analysis features.

- **KeywordTool.io:** A user-friendly tool for discovering long-tail keywords and question-based queries.

### Example Keywords for Jazzed Technology

1. "Vancouver SEO": For businesses seeking SEO services in Vancouver.
2. "Web Design in Vancouver": Attract clients looking for web design services in the area.
3. "Vancouver IT Support": Target the IT support market in Vancouver.

### Strategic Keyword Selection

When selecting keywords, consider factors like relevance to your content, search volume, and competition. Choose a mix of high and low competition keywords to optimize your website effectively. It's also essential to periodically revisit and update your keyword strategy as trends and user behaviors change.

By efficiently planning your website's keywords and using the right SEO keyword planner tools, you can enhance your online presence and drive more traffic to your website.

[Explore Our SEO Services](https://www.jazzgrewal.com/)

Go back [home](/).


Discover how to strategically choose the best keywords for your website's SEO success. Explore top keyword planner tools and enhance your web presence with Jazzed Technology Vancouver Web Design, SEO, and IT Support Company.