Step-by-Step Guide: Deploying Shopify Theme App Extensions via Shopify CLI

Build Storefront UI:

1. Open shopify-customer-ui, you can edit the theme app here
2. Make sure the env.production was like this.

3. Build the theme app by running yarn build:prod
4. You can check your build file here, we’ll need it later in appointment-shopify-fe repo for deploying the theme app

Prepare for Deployment:

1. Create new branch for deploying theme app, you put the name like theme-app-stage-{{date a.g. 20231030 --> year-month-date}}
2. Copy the extensions folder from existing/latest theme-app-state branch, and put it in your new branch
3. Remove all files in assets and replace it with the new file that you have made earlier.

4. Edit appointment-booking-app-embed.liquid, change the text (red underline) with files that you have added to the assets

5. Run shopify version to make sure you’re running the latest version, if not then run shopify upgrade to upgrade the Shopify CLI version and Shopify App version
6. Run yarn or npm i to make sure the package already updated with new shopify version

Deployment

1. Run yarn dev --reset --no-update or just yarn dev --no-update.
   Explanation: 1. To run the app but reset the toml config (--reset) without updating the redirect URL (--no-update ). 2. if this step is already done before, next time you can just run the app by yarn dev --no-update. 3. but if you want to change the store or app config, you can run this again 4. or if you are facing an error, something like cannot find <shop name>.toml, you can run this command again.
2. Select an organization, selectCommercePreneurs

1. Select project, select (n) connect it to an existing app

2. Select App, select Appointment Booking Autopilot

3. Select Store, select bookItNow

4. Open the Preview URL

5. Wait until the Pushing theme file complete

3. Run yarn deploy --no-release --version={{ version e.g. 2.1.1}} --message="put your message here", it will create a new version but will not release.

4. Release the version in two ways using CLI or in Partner Dashboard.
5. Open your store → open your product → open the network (filter it with main) and make sure the CSS and JS files was the same with the things that you have deployed

To Reveert or Release using version CLI:

1. Open new terminal, run npm run shopify app versions list to check the app version and choose what version that we want to release and copy the version, paste it to notepad. See all version from partner dashboard

2. Run yarn shopify app release --version=<the app version> (that we have copy to notepad) and choose Yes, release this version, after that just wait until it’s done

To Reveert or Release version using Partner Dashboard:

1. Select the app (Prod APP)

2. Go to version and choose version to release

3. click on Release