For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
I'm trying to setup a workable development environment for building a shopify app with a team of developers, and I'm not really finding any helpful documentation on how to do so.
Our app was created using Shopify CLI. We currently have 3 developers, each with our own partner account and store. Initially we thought we had a working setup by adding *.toml to .gitignore and relying on each developer's local toml files, but we hit a snag today when one developer added an extension, and the shopify.extension.toml file was of course ignored meaning when the rest of us pulled updates we were missing this critical file. Additionally, we are realizing now we also need to add *.js.map to .gitignore since those files also contain environment specific content.
Anyone else working on a team? How are you managing source control for your app and extensions? I'm surprised at how difficult it's been to find any guidance on this.
Solved! Go to the solution
This is an accepted solution.
Circling back on this in case anyone else has the same question; we figured it out ourselves.
Adding the following to our .gitignore set us up for working as a team:
shopify.app.toml
extensions/*/dist
The shopify.app.toml file is created automatically upon running npm run dev and is specific to each developer environment. The extensions/*/dist is where the compiled JS files are placed for the extensions. You do need the shopify.extension.toml files in source control but the dist folder is generated on npm run dev and includes a map file which is specific to the local machine.
This is an accepted solution.
Circling back on this in case anyone else has the same question; we figured it out ourselves.
Adding the following to our .gitignore set us up for working as a team:
shopify.app.toml
extensions/*/dist
The shopify.app.toml file is created automatically upon running npm run dev and is specific to each developer environment. The extensions/*/dist is where the compiled JS files are placed for the extensions. You do need the shopify.extension.toml files in source control but the dist folder is generated on npm run dev and includes a map file which is specific to the local machine.
When I was developing a mobile application for my business, I also had difficulties setting up the working environment and managing the source code within the team. I ended up turning to Cogniteq and they were extremely helpful in creating a reliable and efficient development environment.
In your case, it is important to create common configuration files so that each developer knows what data to enter in their local files. For example, you can store example.shopify.extension.toml with example values that each developer can copy and adapt to their environment. It's also useful to use tools like dotenv to manage environment variables. These variables can be loaded from the .env file, which should also be added to .gitignore, but create an example.env file with template values.
Consider creating a central repository for storing common configuration files that all developers can access. This could be a private repository or a secure area within your main repository. You can also set up automated scripts to initialize the developer environment. These can be scripts that copy sample configuration files and ask the developer to enter the necessary data.
Be sure to create detailed documentation for setting up your team's work environment. Include instructions for installing, configuring, and managing various aspects of the project.