Example repo for getting NextJS, Rust via wasm-pack, and web workers all playing nicely together.

Related tags

Job Queues next-wasm-workers
Overview

Example of integrating WASM & web workers with a Typescript NextJS project.

Running

  1. yarn
  2. yarn dev
  3. Open localhost:3000

Layout

  • Rust code is in ./rust, generated with wasm-pack new and built as a part of the Next build with wasm-pack-plugin.
  • Workers are in ./src. Types for worker module are in typings.d.ts.
  • wasm is imported in wasm.worker.ts using the Webpack 4/5 syncWebAssembly method.
  • Workers are imported in ./pages/index.tsx using Webpack 5's built-in Worker support.
  • next.config.js orchestrates the necessary Webpack 5 settings, wasm-pack-plugin, and patches NextJS to allow wasm in workers.
You might also like...

Job queues and scheduled jobs for Node.js, Beanstalkd and/or Iron.io.

Ironium Job queues and scheduled jobs for Node.js backed by Beanstalk/IronMQ/SQS. The Why You've got a workload that runs outside the Web app's reques

Dec 14, 2022

Bree is the best job scheduler for Node.js and JavaScript with cron, dates, ms, later, and human-friendly support.

Bree is the best job scheduler for Node.js and JavaScript with cron, dates, ms, later, and human-friendly support.

The best job scheduler for Node.js and JavaScript with cron, dates, ms, later, and human-friendly support. Works in Node v10+ and browsers, uses workers to spawn sandboxed processes, and supports async/await, retries, throttling, concurrency, and graceful shutdown. Simple, fast, and lightweight. Made for @ForwardEmail and @ladjs.

Dec 30, 2022

Premium Queue package for handling distributed jobs and messages in NodeJS.

Premium Queue package for handling distributed jobs and messages in NodeJS.

The fastest, most reliable, Redis-based queue for Node. Carefully written for rock solid stability and atomicity. Sponsors · Features · UIs · Install

Dec 31, 2022

Redis-backed task queue engine with advanced task control and eventual consistency

idoit Redis-backed task queue engine with advanced task control and eventual consistency. Task grouping, chaining, iterators for huge ranges. Postpone

Dec 15, 2022

A fast, robust and extensible distributed task/job queue for Node.js, powered by Redis.

Conveyor MQ A fast, robust and extensible distributed task/job queue for Node.js, powered by Redis. Introduction Conveyor MQ is a general purpose, dis

Dec 15, 2022

Build and deploy a roadmap voting app for your porject

Build and deploy a roadmap voting app for your porject

Roadmap Voting App You can deploy Roadmap application yourself and get feedback from your users about your roadmap features. See the live example. In

Jan 3, 2023

generate statistics on the number of audience minutes your site is generating, and if readers make it to the end of your screeds

generate statistics on the number of audience minutes your site is generating, and if readers make it to the end of your screeds

audience-minutes generate statistics on the number of audience minutes your site is receiving, and if readers make it to the end of your screeds. “If

Dec 28, 2022

Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 13, 2022

A simple package for single or batch image download and conversion using node streams.

image-batch-download A simple package for basic image downloading and processing. Supported formats: JPEG PNG WebP Installation With Yarn: yarn add im

Jan 2, 2022
Comments
  • Can't find worker file

    Can't find worker file

    Hey @tomlagier!

    Thanks for your article and this repo. I tried to use it as a reference for a project where I try to load a web worker that is written in Typescript with Next 11 / Webpack 5. In my project I couldn't get Next.js to expose the worker file so I tried to download your repository. It turns out, I get the same error here:

    Screenshot 2021-07-28 at 13 13 40

    I just added a console.log statement to index.tsx.

    const workerUrl = new URL('../src/ts.worker.ts', import.meta.url);
console.log(workerUrl);
tsWorkerRef.current = new Worker(workerUrl);

    When I manually navigate to http://localhost:3000/_next/94ab9802796300a474cd.ts, I also get the 404. I would assume, that you should get the same behavior. Do you have an idea on how to fix this?

    opened by niklasravnsborg 3
  • Next12 support?

    Next12 support?

    Nice article and repo, this is really interesting. Just wondering if upgrading to Next 12 would make things easier because of the new built-in rust compiler. Would you mind updating to Next 12?

    opened by styxlab 1
Owner
Studio Lagier
Studio Lagier
GitHub
Store and Deliver images with R2 backend Cloudflare Workers.

r2-image-worker Store and Deliver images with Cloudflare R2 backend Cloudflare Workers. Synopsis Deploy r2-image-worker to Cloudflare Make a base64 st

Yusuke Wada 62 Jan 3, 2023
slash-create with Cloudflare Workers template

/create with Cloudflare Workers A slash-create template, using Cloudflare Workers. Getting Started Cloning the repo You can either use degit to locall

Snazzah 13 Jan 3, 2023
Airtable + Cloudflare Workers URL Shortener 🌤

tableflare Airtable + Cloudflare Workers URL Shortener ?? Quick Start Airtable Generate your Airtable API key from your account dashboard: https://air

Griko Nibras 10 Oct 16, 2022
Use Cloudflare Workers Cron Triggers to keep your Hetzner Cloud Firewall allowing the latest list of Cloudflare IPs, or any other lists!

Hetzner Cloud Firewall automation with Cloudflare Workers Heavily inspired by xopez/Hetzner-Cloud-Firewall-API-examples, this repository holds a Cloud

Erisa A 9 Dec 17, 2022
Build your Cloudflare Workers with esbuild.

build-worker Bundle your Cloudflare Worker with esbuild instead of webpack. (It's ridiculously faster!) Wrangler v1 uses webpack. Wrangler v2 is using

Rom 7 Oct 24, 2022
⚙️ Offline-capable Astro apps via SWSR (Service Worker Side Rendering)

Astro-service-worker ⚙️ Offline-capable Astro apps via SWSR (Service Worker Side Rendering) astro-service-worker will take your Astro SSR project, and

Pascal Schilp 41 Dec 4, 2022
Hello Jobs is a one-stop solution for all job seekers. In future, this could also serve as a platform for recruiters to hire potential candidates.

Hello Jobs Hello Jobs is a one-stop solution for all job seekers. In future, this could also serve as a platform for recruiters to hire potential cand

S Harshita 6 Dec 26, 2022
Type-safe and Promisified API for Web Worker and Iframe

?? You can help the author become a full-time open-source maintainer by sponsoring him on GitHub. typed-worker Install npm i typed-worker Usage Create

EGOIST 189 Dec 31, 2022
Self-hosting web code editor (for Hack Club CodeJelly)

reflection Self-hosting web code editor (for Hack Club CodeJelly) Reflection-editor is a code editor that edits its own code, and uses modern web tech

Benjamin Smith 7 Dec 29, 2021
SSHOT is a ✨ Web Screenshot API ✨ with caching kept in mind!

label icon Quick Start rocket Welcome to SSHOT (/s:shot/) SSHOT is a ✨ Web Screenshot API ✨ with caching kept in mind! Just pass in the parameters for

Amresh Prasad Sinha 9 Dec 24, 2022