MarketPlace Kit Support For CLI 3

[tomadelaney]

I've spent a great deal of time developing on top of the Marketplace Kit pattern, which uses CLI 2. Shopify is now sunsetting CLI 2 -- and I am trying to migrate my application over to CLI 3 (with some difficulty).

Will Shopify be upgrading the Marketplace Kit to the new CLI 3 file structure?

This would be an extremely useful for a reference as I and others transition our marketplace apps over to the mandated CLI 3 structure.

[ghost]

Have you been able to migrate your application to CLI 3?

[tomadelaney]

Stallyapp,

My migration is in progress. It has been slow-going because I am bundling this migration with several other features I wished to add to my application. For example, I am moving the shop / adminshop of the CLI 2 Marketplace pattern to a separate graphql server that serves my other application needs.

The biggest challenge to the Marketplace Kit migration is the fact that the basic CLI 3 pattern now relies on vite.js for its front-end, thus there is a dynamic proxy and other configuration issues that you must deal with.

In short, the migration can be accomplished, but for such a basic building block for Shopify developers, a well-documented, best practice CLI 3 Marketplace pattern should have been introduced.

Regards, Tom

On Fri, May 26, 2023 at 3:58 AM stallyapp @.***> wrote:

Have you been able to migrate your application to CLI 3?

— Reply to this email directly, view it on GitHub https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_Shopify_shopify-2Dmarketplaces-2Dadmin-2Dapp_issues_37-23issuecomment-2D1563968267&d=DwMCaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=d7TJuH6UrQDBj79I_qVMj3djnAaPBFbfCCyowCOfjaI&m=7iMx2xNh1PZOm8x7BfEIcabgXxnVeKZSly9AZYYEAKS3ZT52gJFYjcaQJUu2tnmD&s=2gZBTwssytJX02GWCuR_GNMArjrY4qGXGULXAMUL3os&e=, or unsubscribe https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AKSQJNMKWY32PA3PIMEIM6LXIBPDJANCNFSM6AAAAAAUQX45XQ&d=DwMCaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=d7TJuH6UrQDBj79I_qVMj3djnAaPBFbfCCyowCOfjaI&m=7iMx2xNh1PZOm8x7BfEIcabgXxnVeKZSly9AZYYEAKS3ZT52gJFYjcaQJUu2tnmD&s=EMQAlFSbo-2DCqK6SMVYA0U9RdILe-O0hV0je901H24&e= . You are receiving this because you authored the thread.Message ID: @.***>

-- Thomas A. Delaney, P.E.

Email: @. @.> Mobile: 917-282-3317

[agusqu]

Hey Tom,

Have you been able to complete the migration? Since the CLI v2 got deprecated a month ago we need to migrate our app and the process is proving to be very long and hard, any tips or help would be greatly appreciated!

Thanks, Agustin

[tomadelaney]

Agustin,

I was able to migrate to CLI v3 by adapting the CLI v2 Marketplace Kit App to the framework of the CLI v3 node sample app.

The biggest challenge I faced is the fact that the CLI v3 pattern (for node apps) introduces vite.js in the front-end. The requires you to set up a proxy in cite that conforms to the BACKEND_PORT of the CLI v3 pattern.

Here's how I approached it:

vite.config.js ============

import { defineConfig } from "vite"; import { dirname } from "path"; import { fileURLToPath } from "url"; //import https from "https"; import react from "@vitejs/plugin-react"; import { nodePolyfills } from 'vite-plugin-node-polyfills' import dotenv from 'dotenv'; //import basicSsl from '@vitejs/plugin-basic-ssl'

dotenv.config(); // load env vars from .env

if ( process.env.npm_lifecycle_event === "build" && !process.env.CI && !process.env.SHOPIFY_API_KEY ) { console.warn( "\nBuilding the frontend app without an API key. The frontend build will not run without an API key. Set the SHOPIFY_API_KEY environment variable when running the build command.\n" ); }

// Note for below: Change http://its-d25q310qf8j/ to resolve to your host const proxyOptions = { target: http://ITS-D25Q310QF8J:${process.env.BACKEND_PORT},
changeOrigin: true, secure: false, // changed from true 4-3-23 ws: false, };

const host = process.env.HOST ? process.env.HOST.replace(/https?:\/\//, "") : "localhost";

let hmrConfig; if (host === "localhost") { hmrConfig = { protocol: "ws", host: "localhost", port: 64999, clientPort: 64999, }; } else { hmrConfig = { protocol: "wss", host: host, port: process.env.FRONTEND_PORT, clientPort: 443, }; } console.log("48 hmrConfig: ", hmrConfig);

export default defineConfig({ root: dirname(fileURLToPath(import.meta.url)), plugins: [ react(), nodePolyfills({ // Whether to polyfill node: protocol imports. protocolImports: true, }), //basicSsl(), ], define: { "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY), 'process.env.NODE_DEBUG' : "'development'", 'global' : { "Uint8Array": Uint8Array }, BACKEND_PORT__: "${process.env.BACKEND_PORT}", }, resolve: { preserveSymlinks: true, alias: { //'node:stream/web': path.resolve(dirname, 'node_modules/stream-browserify/index.js'), //stream: 'stream-browserify', 'node:stream/web':'stream-browserify/index.js', 'node:fs':'node/lib/fs.js', }, }, server: { host: "its-d25q310qf8j", // Resolve to your host server port: process.env.FRONTEND_PORT, hmr: hmrConfig, cors: true, proxy: { "^/(\?.)?$": proxyOptions, "^/api(/|(\?.)?$)": proxyOptions, "^/qrcodes/[0-9]+/image(\?.)?$": proxyOptions, "^/qrcodes/[0-9]+/scan(\?.)?$": proxyOptions, "^/smp(/|(\?.*)?$)": proxyOptions, }, }, });

With the vite proxy set for your host machine, the rest of the Shopify CLIv3 configuration is straight-forward:

App-level shopify.app.toml ==========================

//This file stores configurations for your Shopify app.

scopes = "write_products,read_discounts,write_customers ....

Back-end shopify.app.toml ==========================

type="backend" [commands] dev = "npm run dev" PORT=8081 FRONTEND_PORT=8081 BACKEND_PORT=8081

Front-end shopify.app.toml ==========================

type="frontend" [commands] dev = "npm run dev" build = "npm run build" PORT=8081 FRONTEND_PORT=8081 BACKEND_PORT=8081

===

Note: Shopify should publish a MARKETPLACE KIT pattern with best practices for the CLI v3 framework, including its move from webpack to vite. Deeper documentation of FRONTEND_PORT / BACKEND_PORT and how this all of this works with VITE would also be useful for the development community.

I hope this helps, Agustin, Tom

[agusqu]

Thanks! :)