Skip to main content

Multi-Developer Workflow

This guide outlines the steps for contributing to a project that another developer is currently working on. It assumes that you have already set up the project on your local machine and are familiar with the app template.

Our app setup utilizes a Cloudflare Tunnel to route requests securely between your development server and Cloudflare. Each tunnel can only be used by one developer at a time so multiple developers working on the same project will need to setup their own tunnel.

info

Shopify apps only have one application URL so each developer will require their own version of the app to work on too.

Creating a Dev Version of the App​

Next, you'll create your own dev version of the app:

  1. Run the following command:
npm run shopify app config link
  • Name your dev app using the format "[merchant name] by BAO (Dev [developer initials])"
    • eg P448 by BAO (Dev MM)
  • When prompted, use the format "dev-[developer initials]" for the "Configuration file name"
    • eg dev-mm
  • This will create two new files in the project, "shopify.app.dev-mm.toml" and ".env.dev-mm"

  1. Update the application_url and redirect_urls in the new app configuration file (shopify.app.dev-mm.toml) with the URL of the new tunnel (https://p448-mm.beeayo.com).

  2. Copy the scopes from shopify.app.toml file and add them to your new app configuration file.

  3. Ensure you're using the new app configuration by running npm run shopify app config use and selecting your configuration

  4. Deploy your configuration to Shopify using npm run shopify app deploy

Creating a New Cloudflare Tunnel​

  1. Run the following command in your terminal and follow the prompts:
npm run tunnel:create

This command creates a Cloudflare Tunnel and a .env file in the route of the project. If you already have a .env file, it will be updated. The content added will look like:

APP_TUNNEL_CONFIG=.cloudflared/config-mm.yml
APP_TUNNEL_NAME=p448-mm
APP_TUNNEL_URL=https://p448-mm.beeayo.com

  1. Move these environment variables (prefixed with APP_TUNNEL_) into the env file which was created with the new dev app eg .env.dev-mm

  2. To ensure your shell is using these environment variables you will need to run the following in your terminal:

source .env
info

  • source .env will load the variables into your current shell but doesn't export them so they won't be available to child processes (such as npm run dev)

  • Use export $(grep -v '^#' .env | xargs) to export the variables and make them available to child processes

  1. To avoid manually running the above command before starting the development server each time you can duplicate the dev script in the package.json to create your own and include the command to export the environment variables. Example below:
"dev": "shopify app dev --no-update",
"dev:mm": "export $(grep -v '^#' .env.dev-mm | xargs) && shopify app dev --no-update",

Considerations and Troubleshooting​

  • When multiple developers are working on the same project, there may be data clashes as both apps will be saving to the same metafield namespace and keys. To minimize conflicts, coordinate with your team and consider using unique prefixes or suffixes for your development data.

  • If you encounter any issues during the tunnel creation or app linking process, double-check that you've followed the naming conventions and provided the correct URLs. Reach out to your team lead or consult the project documentation for further assistance.

  • Regularly communicate with your team members to ensure a smooth collaboration and to avoid any conflicts in the codebase.

By following these steps and considerations, you'll be able to set up your own development environment and contribute to the project effectively while minimizing conflicts with other developers' work.