Remix App Embed - javascript code bundling

Ask & Offer
1

What is the proper way to develop custom js code for app-embed?

Im looking for typescript and when i do shopify app build, bundle/minimify it in to app.js. But the question is how to store them?

Since extension can only contain .js files, and how to make it work properly with shopify app build/dev , so it will be bundled on build, and watched/synced on dev stage

2

Write your code in TypeScript, then transpile it to plain .js with a bundler (Vite, Webpack, or esbuild). Only the compiled .js goes in the extension folder, since Shopify doesn’t allow .ts files. Make sure your build script outputs to /extensions/.../assets so shopify app dev can watch and sync changes.

1 Like
3

VictoriaStudio is right. That’s what we do as well. Our extension code is in a directory outside of src/, and then we have set Webpack to build to extensions/ as its output. Here’s a simplified version of our config, might be helpful for you:

import path from "path";
import webpack from "webpack";

const __dirname = import.meta.dirname;

const outputDir = path.resolve(
  __dirname,
  "../extensions/<EXTENSION NAME HERE>/assets"
);

export const commonConfig: webpack.Configuration = {
  entry: {
    my_extension: "./my_extension.ts",
  },
  output: {
    path: outputDir,
    filename: "[name].js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    extensionAlias: {
      ".js": [".js", ".ts"],
      ".cjs": [".cjs", ".cts"],
      ".mjs": [".mjs", ".mts"]
    }
  },
  module: {
    rules: [
      { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" }
    ]
  },
};

Best,

Tobe