DEV Community: Om Bharti

Want to deploy Puppeter or chrome-browser

Om Bharti — Wed, 12 Jun 2024 12:11:28 +0000

Dockerfile


# Use the official Node.js image as the base
FROM node:22
# Set the working directory
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the container
COPY package.json pnpm-lock.yaml ./


# Install Google Chrome or Chromium
# Install Google Chrome
RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

# Install pnpm globally and install dependencies
RUN npm install -g pnpm && pnpm install

# Copy the rest of the application code
COPY . .

# Set environment variable for the port
ENV PORT=3000
ENV CHROME_PATH=/usr/bin/google-chrome

# Build the application
RUN pnpm build

# Expose the port the app runs on
EXPOSE 3000

# Command to start the application
CMD ["pnpm", "start"]

Example function for your chrome-browser

utils.ts

import lighthouse, { Flags } from "lighthouse";
import * as ChromeLauncher from "chrome-launcher";

export const detail = async (isHtml: boolean, webURL: string) => {
  const chrome = await ChromeLauncher.launch({
    chromeFlags: ["--headless", "--no-sandbox", "--disable-setuid-sandbox"],
    chromePath: "/usr/bin/google-chrome",
    logLevel: "info",
  });

  const options: Flags = {
    logLevel: "verbose",
    output: isHtml ? "html" : "json",
    onlyCategories: ["performance"],
    port: chrome.port,
  };
  const runnerResult = await lighthouse(webURL, options);
  if (chrome) {
    chrome.kill();
  }

  if (runnerResult) {
    const report = runnerResult.report;
    if (typeof report === `string`) return isHtml ? report : JSON.parse(report);
    else return isHtml ? report : JSON.parse(report[0]);
  }
  return null;
};

it's lighthouse setup also

Docker Puppeeteer Node Railway

Om Bharti — Tue, 16 Apr 2024 09:29:00 +0000

Want to use puppeteer in node node and then deploy it on railway.app or any related hosting platform, here is my working docker file and puppeteer config. You can use it

-------------------------------------------------------------------------------------------DOCKER CONFIG FILE--------------------------------------------------------------------------------------------------------------------------------------------------------------

# Use the latest Node.js LTS (Long Term Support) version as the base image
FROM node:21.7.3-slim

RUN apt-get update && apt-get install gnupg wget -y && \
  wget --quiet --output-document=- https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor > /etc/apt/trusted.gpg.d/google-archive.gpg && \
  sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
  apt-get update && \
  apt-get install google-chrome-stable -y --no-install-recommends && \
  rm -rf /var/lib/apt/lists/*

# Set the working directory to /app
WORKDIR /app

# Copy the package.json and pnpm-lock.yaml files
COPY package.json pnpm-lock.yaml ./

# Install dependencies using pnpm
RUN npm install -g pnpm && pnpm install

# Copy the rest of the application code
COPY . .

# Set the DATABASE_URL environment variable
ENV DATABASE_URL="postgres://postgres.<passwoedtodb>.supabase.com:5432/postgres"

# Set the NEXT_PUBLIC_API_URL environment variable
ENV NEXT_PUBLIC_API_URL="https://example.com"

# Build the TypeScript code and run Prisma migrations
RUN pnpm run build

# Expose the port that your Express.js app is running on
EXPOSE 3000

# Start the application
CMD ["pnpm", "start"]

--------------------------------------------------------------------------------------------import puppeteer from "puppeteer";

const browser = await puppeteer.launch({ // headless: false, executablePath: '/usr/bin/google-chrome', args: ["--no-sandbox", "--disable-setuid-sandbox"], }); const page = await browser.newPage();

NextJs with ReactQuery

Om Bharti — Thu, 19 Oct 2023 10:50:36 +0000

I want to know should be use reactquery with nextjs application, and if yes then what we should use for calling to backend fetch or axios. I am asking this as fetch of next has inbuild caching mechanism.

https://stackoverflow.com/q/77323202/18761588