How to - Create a shopify checkout app

To create a brand new shopify app follow these steps:

    Create a folder in your computer where your project will be worked
    Run npm init @shopify/app@latest
    Choose node as backend, but there is PHP as option with laravel framework.
    go to the project folder cd your-project
    Run this command npm run shopify app generate extension 
    Choose Javascript as your install option, or react if you want, you choose what to use
    Now you have the code ready for start coding
    To test your store, run npm run dev
    To upload your project run npm run deploy
    You need to version your app after deploy, in shopify partners >> apps >> All apps. here  https://partners.shopify.com/666789/apps?shpxid=660658ef-7D48-4648-690E-94B287FAF79D  you can read instructions of how to deploy here  https://shopify.dev/docs/apps/checkout/custom/fields/getting-started#step-7-deploy-the-ui-extension 
    To version your app, after you deploy in the console, it should display a link to the app for versioning, for example something like this  https://partners.shopify.com/666789/apps/51137642497/extensions/checkout_ui_extension/27133575169 
    IMPORTANT: to install the app you need to keep npm run dev open in the console and in the correct store, so after you deploy the app, run again npm run dev
    To check server status  https://www.shopifystatus.com/ 

Open your project in Visual Studio Code. The index file is located in: /extensions/your-project/src/index.js

You can start adding code there. You need to know this:

  • This is for where you want the blocks to appear in the checkout page:  https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-points-overview 
  • This is to add components to those spots:  https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components