Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: App Development - Source Control for Multiple Developers

Solved

App Development - Source Control for Multiple Developers

ddiehlpdx
Shopify Partner
7 1 5

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.

Accepted Solution (1)

ddiehlpdx
Shopify Partner
7 1 5

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.

View solution in original post

Replies 2 (2)

ddiehlpdx
Shopify Partner
7 1 5

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.

Swok1942
Visitor
3 0 0

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.