JavaScript support in Shopify Functions
You can write your functions in JavaScript. This guide describes the process of building a Shopify Function using JavaScript or TypeScript.
How it works
Anchor link to section titled "How it works"Shopify CLI compiles your JavaScript code using Javy, our JavaScript-to-WebAssembly toolchain. To make development easier, we've also published a Shopify Functions JavaScript library.
Javy is part build tool, and part runtime engine:
Build tool: The build tool part takes a JavaScript file and compiles it into a WASI-compatible WebAssembly module, which contains both your code and a full JavaScript engine embedded.
Runtime engine: JavaScript by itself is lacking some APIs to meaningfully interact with the environment it is running in. Javy implements a handful of APIs that are required to make JavaScript work well for Shopify Functions.
Shopify Functions JavaScript library
Anchor link to section titled "Shopify Functions JavaScript library"The Shopify Functions JavaScript library provides convenient functions and hides repetitive boilerplate in your function code. If you create your JavaScript function using Shopify CLI, then it will set up the library for you.
The library includes a TypeScript type generator that inspects your GraphQL query to allow your IDE (Integrated Development Environment) to provide autocomplete suggestions.
JavaScript functions and Shopify CLI
Anchor link to section titled "JavaScript functions and Shopify CLI"The quickest way to get started with JavaScript or TypeScript for Shopify Functions is to use the Shopify Functions JavaScript library with Shopify CLI.
Shopify CLI helps you scaffold projects and uses ESBuild to preprocess JavaScript and TypeScript. This means that you can install and import npm dependencies, just like you would in regular JavaScript. The dependencies will be bundled before everything gets compiled to WebAssembly.
The following table describes the Shopify CLI commands that you can use for JavaScript functions:
| Command | Description |
|---|---|
shopify app function typegen |
Creates GraphQL types for a JavaScript function |
shopify app function build |
Compiles the function in your current directory to WASM for testing |
shopify app function run |
Runs the function from your current directory for testing |
Using Javy directly
Anchor link to section titled "Using Javy directly"If you want more control over your function, then you can also use Javy directly with no project boilerplate. The following example shows a minimal Shopify Function that only uses the Javy runtime library:
You can compile the piece of JavaScript to a WASI module using the Javy CLI and then run it using function-runner:
Sample apps
Anchor link to section titled "Sample apps"Explore sample apps that contain functions written in JavaScript.
Learn how to use JavaScript with Shopify Functions by following one of our use case tutorials:
- Sign up to get notified when JavaScript support for Shopify Functions is available in a public beta.