Open tomadelaney opened 1 year ago
Have you been able to migrate your application to CLI 3?
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
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
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
Thanks! :)
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.