kettanaito

Chromium on Vercel (serverless)

This is an up-to-date guide on running Chromium in Vercel serverless functions in 2022. What you will read below is the result of two days of research, debugging, 100+ failed deployments, and a little bit of stress.

Getting started

Step 1: Install dependencies

Use chrome-aws-lambda that comes with Chromium pre-configured to run in serverless, and puppeteer-core due to the smaller size of Chromium distributive.

statico

/*
 * Usage:
 *   const { alert, confirm, prompt } = useModals()
 *   alert("Hey!") // awaitable too
 *   if (await confirm("Are you sure?")) ...
 *   const result = await prompt("Enter a URL", "http://")
 */

import React, {
  createContext,

2color

# .github/workflows/test.yaml
name: test
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    # Service containers to run with `container-job`
    services:
      # Label used to access the service container
      postgres:

bobmurdoch

$black: #22292f;
$grey-darkest: #3d4852;
$grey-darker: #606f7b;
$grey-dark: #8795a1;
$grey: #b8c2cc;
$grey-light: #dae1e7;
$grey-lighter: #f1f5f8;
$grey-lightest: #f8fafc;
$white: #fff;
$red-darkest : #3b0d0c;

mcdougal

import * as Sentry from '@sentry/browser';
import getConfig from 'next/config';
import React from 'react';

const { SENTRY_DSN } = getConfig().publicRuntimeConfig;

Sentry.init({ dsn: SENTRY_DSN });

/**
 * Send an error event to Sentry.

cereallarceny

// Ignore those pesky styles
require('ignore-styles');

// Set up babel to do its thing... env for the latest toys, react-app for CRA
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app']
});

// Now that the nonsense is over... load up the server entry point

ctavan

import hoistNonReactStatic from 'hoist-non-react-statics';
import React from 'react';

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

// See: https://facebook.github.io/react/docs/higher-order-components.html
export default function mutatable({ mutationName = 'mutate' } = {}) {
  return (SourceComponent) => {

craigdmckenna

const gulp = require('gulp')
const gutil = require('gulp-util')
const rollup = require('./rollup')

const jsModules = [
  {
    entry: 'src/js/main.js',
    dest: 'dist/js/main.min.js'
  },
  {

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

navgarcha

function requestContextData(store = {}, { components = [] }) {
	const promises = components.reduce((prev, current = {}) => {
		return (current.need || []).concat(prev);
	}, []).map((need) => store.dispatch(need()));

	return Promise.all(promises);
}

// ...