Osiset compatible with CLI 3.0 for Post-checkout app extension

[sushilsth]

Discussed in https://github.com/osiset/laravel-shopify/discussions/1160

^{Originally posted by **sushilsth** June 28, 2022} Hi, I have made the Shopify using this package and have already made LIVE in marketplace. Now, I want to implment theme app extension "Post Checkout UI". As per the requirement, I need to used Shopify CLI 3.0 [refernce link [reference link](https://shopify.dev/apps/checkout/post-purchase/getting-started-post-purchase-extension) ] where as Osiset donot have such directory. I tried follow all the step mentioned in https://shopify.dev/apps/checkout/post-purchase/getting-started-post-purchase-extension but I am not able recognize web directory as mentioned in "Step 3: Add Shopify CLI as a project dependency >> 4". Have anyone used Shopify CLI 3.0 in Osiset. Please help.

[sahil0571]

I think Shopify is trying to kill other third party packages for app development. They are forcing us to create the app using the cli 3.0 which is not using our favorite laravel-shopify package. This is sad and truth but if we want to make our apps one step ahead and match the standards of Shopify we will have to move to cli I guess.

[abishekrsrikaanth]

@sushilsth @sahil0571 You can still create a new project using the shopify CLI 3.0 and keep that just for extensions while continue using this project for actual app development. atleast that is what I am doing. The only problem is you end up have 2 sources..

[sp-artisan]

@abishekrsrikaanth It will be helpful if you can share a demo project or repository for using this package as an extension in the cli app.

[tanseercena]

@sahilcrawlapps @sahil0571 I also created Shopify app extension in different directory. Let me share what I did so it can help you and other developers.

1. Create a new directory for app extension (It can be within your app directory or outside the app directory)

2. Add shopify.app.toml file in the newly created directory and add the following in toml file:

   NAME = "YOUR APP NAME HERE"
   SCOPES = "YOUR SCOPES HERE"
   SHOPIFY_API_KEY = "YOUR SHOPIFY APP API KEY HERE"
   SHOPIFY_API_SECRET = "YOUR SHOPIFY APP SECRET HERE"
   APP_URL = "YOUR APP URL"
   HOST = "YOUR APP HOST"
   PORT = "YOUR APP URL PORT"

3. Create package.json file at root of the directory with following:

{
  "name": "APP NAME HERE WITHOUT SPACE, REPLACE SPACE WITH hyphen ", // my-app
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "info": "shopify app info",
    "scaffold": "shopify app scaffold",
    "deploy": "shopify app deploy"
  },
  "dependencies": {
    "@shopify/app": "^3",
    "@shopify/cli": "^3"
  }
}

4. Run npm install

To check Shopify cli is install, Run npm run shopify For App info Run npm run info

5. Create Extension by running following:

npm run scaffold extension

Then select extension type and name, which will create an extension directory.

Add blocks etc in extension.

6. Deploy Extension as Draft

npm run deploy

This command will log in to Shopify partner dashboard. Note: Ruby and Bundler are required.

7. Once deployed then enable developer preview on the Shopify partner app extension page.

8. Install the app on the development store and test extensions.

I hope this will help you and other devs who are going to create an app extensions in this package.

[LeafedFox]

@tanseercena This is super useful! It would be great if you could add this to the Wiki for other devs to see 😄

[tanseercena]

@ItsGageH Wiki added :book:

https://github.com/osiset/laravel-shopify/wiki/How-to-create-App-Extension

[Kyon147]

The wiki does a job explaining how to set up an epp extension.

[benson336]

@tanseercena @Kyon147 Is this the correct way of setting up the app extension path (image below)? I created a new "app_extension" directory under "app" directory and ran "npm install" in the root. But when I ran "npm run shopify", the terminal is giving me the error "SyntaxError: Cannot use import statement outside a module". Not sure what I did wrong.