Using Shell Scripting to simplify your Shopify App development workflow 🐚

Shopify app development is an incredibly fun job, and Shopify's CLI is very well maintained and updated. However, like with any development task, there are a few areas in which the usage of the CLI can be a bit tedious or even daunting. There is always the fear of accidentally making changes to your app config and not being able to revert them, or even just the hassle of constantly having to startup your Ngrok tunnel and your dev server side by side, to then realise that you only had to make one small change. It's a lot of time lost!

As developers, our job is to automate the tedious (in most cases to the point where the automation took longer than doing the actual task), but fret not! I have constructed a set of aliases and tools that you can use to simplify your entire workflow without having to dabble in the precarious art of shell scripting. Hopefully saving you plenty of time to focus on the vision and not the boring setup and CLI work that is necessary to bring it to life.

Prerequisites

Our first requirement is that you have to be on a UNIX (MacOS or Linux) based system. PowerShell users can still follow along with the logic in these aliases and scripts, however they will not be able to use them verbatim on a Windows system (sorry!). We use these scripts in office to simplify our flow and we want to share them with you, so anyone who can convert these to PowerShell tools and could share them would be greatly appreciated!

Once you have your Mac or Linux machine ready, make sure to downlaod and install TMUX (Terminal Mulitplexer). A lot of our scripts are going to be running headless inside of a TMUX session as it's an incredibly clean way to manage and organise different workspaces simultaneously. A lot of our scripts will help us to interact with TMUX so don't worry if it looks a little intimidating at first. You can install TMUX using your package manager in the terminal, use whichever applies to you:

MacOS - brew install tmux

Ubuntu - sudo apt-get install tmux

Arch - pacman -S tmux

There are a ton more package manager options, if yours isn't listed then check out your package manager to find the right way to install TMUX on your system, or refer to the TMUX wiki to find install instructions for your system.

Finally, you want to locate a .rc file for your specific shell. In my case, I have a .zshrc file that I will be using, yours might be a .bashrc file, but if you don't have either of those look for your specific shell using the echo "$SHELL" command to find it, then look up where your .rc file is located and what it is named. In some cases you might not have one, in which case you may have to explore how to create Shell Aliases in your own environment (not covered). A .rc file is essentially a small script that runs whenever you open up your terminal (or start your shell) that defines any customisations you want to make to your shell for while you're using it, this means any changes we make to it are propagated through any terminal that we may open in the future.

Shell Aliases

Shell Aliases are a neat way to shorten long and complicated sequences of commands into quick one-liners (often one word) to simplify your experience of using the terminal. We spoke briefly at the end of the last section about your .rc file, this is where we will be adding these Aliases into in order to get them running and recognised on any terminal that we open.

Open your .rc file in your text editor of choice.

Quick Tip - Trying to do this in your file explorer is quite difficult, as any files with a . at the start are hidden by default. You should probably use your terminal and the ls -a command to view them, alongside a terminal based editor like Nano or Vim to edit the contents.

You can pick and choose the aliases you would like to use from below and copy and paste them into your .rc file to add them to your terminal environment.

tunnel can be used to run your Ngrok tunnel mentioned in the previous article with the following

alias tunnel="ngrok http --domain=YOURTUNNEL 4000"

Make sure to change YOURTUNNEL to whatever the domain of your tunnel is, and change the port number 4000 to whatever port you will be running your server on.

startdev can be used to navigate to your project directory and run the ./run_dev.sh script we'll talk about shortly

startdev() {
  cd /YOUR/PROJECT/ROUTE/HERE
  ./run_dev.sh
}

Make sure again to change the /YOUR/PROJECT/ROUTE/HERE value to the direct path to your project (not a relative path, or this won't work from anywhere you may be in your terminal).

checkdev can be used to quickly check on the status of your development TMUX server

checkdev() {
  tmux a -t SERVERNAME
}

The SERVERNAME value here can be whatever you want, but make sure it aligns with the name you use in the run_dev.sh script we will discuss later. This will attach you to the headless TMUX session so you can see both Ngrok and your development server running side by side. You can quickly exit out of this session by pressing Ctrl+B and then D to leave the server running in the background.

deploy can be used to deploy your application version to Shopify on your production TOML file or your development TOML file

deploy() {
  cd /YOUR/PROJECT/ROUTE/HERE

  case $1 in
    "dev")
      npm run shopify app config use PRODCONFIGNAME && npm run deploy
      ;;
    "prod")
      npm run shopify app config use DEVELOPMENTCONFIGNAME && npm run deploy
      ;;
    *)
      echo "Unknown Environment"
      ;;
  esac
}

The values PRODCONFIGNAME and DEVELOPMENTCONFIGNAME refer to the names of your TOML files, which you can read more about managing on the Shopify.dev site.

This will conditionally check whether or not you want to run a production deployment or a development deployment based on the parameters you pass to the alias. It's usage could be deploy prod to deploy your production environment or deploy dev to deploy your development environment. If you use any other paramter it will return Unknown Environment.

Quick Tip - Once you've saved your .rc file the changes won't show until you either close and then reopen your terminal, or if you run the source ~/.RCFILE command (in my case it's source ~/.zshrc) to reset the contents of the file in the current terminal window.

Scripts

We've mentioned scripts already, all of them rely on using tmux as a detached source but you can tweak them to run just in your terminal environment. They are a nice way to localise the above Aliases into your projects as to make sure that you don't get confused running the wrong commands inside of the wrong project (particularly in the case that you're developing multiple apps at once). Scripts also allow us to chain commands more effectively and pass in a lot more data, but it's all essentially the same programming language.

run_dev.sh

#!/bin/bash

tmux new-session -d -s SERVERNAME 'ngrok http --domain=YOURTUNNEL 4000 && exit';
tmux rename-window ngrok;
tmux split-window;
tmux send 'npm run dev -- --tunnel-url=YOURTUNNEL:4000 --theme THEMEID --store STOREPREFIX && exit' ENTER;
tmux rename-window SERVERNAME;

SERVERNAME is the name you want to give your TMUX server (can be anything)

YOURTUNNEL is the domain name of the Ngrok tunnel you created in the previous article

THEMEID can be found by entering your development store's online theme editor and copying the digits inside of the URL

STOREPREFIX is the prefix of the URL to your development store (i.e. the prefix for flare-dev.myshopify.com would be flare-dev)

This script starts a tmux session that contains both Ngrok and your dev server. Make sure to replace the values with your specific config values. SERVERNAME should be equivalent in both your checkdev alias and the script above. This should sit in the root of your folder.

check_dev.sh

# !/bin/bash

tmux a -t SERVERNAME

You may be thinking "this looks very similar to the checkdev alias we talked about earlier" and you'd be right! It's exactly the same but this lives inside of your project directory to make sure you're connecting to the right TMUX server for the right project. This is beneficial for lack of confusion, but also helps me demonstrate that a lot of these are very similar and can be cross applied in either a local script inside of your project, or as a terminal-wide shortcut. We encourage you to play around and set up a flow that's right for you, using these scripts as a guide to get you started on the journey to productivity mastery inside of your Shopify App.

Final Notes

Shell scripting can be a bit scary because of the power that it has (that sudo rm -rf /* is terrifying) but it also holds a lot of potential good ways to simplify our lives and help us to focus more on what we are passionate about. In our case, it's the development of Shopify Apps, wherein Shell Scripting helps us hone in on the app development rather than the admin of running servers and deployments. I encourage you to go and research Shell Scripting in it's entirety to find even more clever and creative ways to implement it into not just your Shopify App but any other programming project you may pursue.