Hey. A wee bit of context before we dive in. Gadget is the serverless stack for ecommerce app developers. You used to have to Gadget's web-based editor when writing code. That was never the long-term plan, and now we've changed it! Now on to the article ...
We’re excited to announce that Filesync is now available to all Gadget users! Filesync allows you to use your favorite editor and tooling to write code for your Gadget app by cloning your app’s files into a local directory and syncing any changes (in real-time!) between your local project and the Gadget editor.
Historically, Gadget developers were required to use our built-in web editor, with our lint and style rules. In addition to this, because the code files were only accessible via the web editor, it was impossible to push them to a repo such as Github to enable version control.
With Filesync, you can use your favorite code editor, like VSCode or Sublime, to work on your Gadget apps. You can set up your own lint rules, write and run unit tests like you would any other Node project, use your local command line to add npm modules, not to mention push your code to a repo such as Github, allowing you to implement version control, and enabling multiple developers to contribute code to the same Gadget project.
Introducing ggt, Gadget’s command line tool
Gadget’s new ggt command line tool allows you to sync files from your Gadget projects to your local machine. Leave ggt running, and any changes you make locally will be automatically synced to your Gadget project! Any changes you make in Gadget will also be automatically synced to your local machine, which means you can seamlessly switch between adding new models or code effects on webhook actions and writing custom code in your favorite editor.
Getting started
There’s an easy way to try out ggt:
npx @gadgetinc/ggt sync
You will sign in and then be prompted with a list of your Gadget apps. Once you select the app you want to sync, all files will be copied to your current directory. You’re ready to write code locally!
Once started, ggt will continue to run in the background unless you stop it manually. While ggt is running, files will be synced between your Gadget project and your local directory. The syncing works in two directions: changes in your local files will be synced back to Gadget, and changes in Gadget will be synced to your local directory.
Install ggt locally
You can also do a global install of ggt on your local system:
npm i -g @gadgetinc/ggt
You can verify that ggt was properly installed by running ggt –version. Once you have verified that the install was successful, you can use ggt in the command line to start syncing.
Sync to a different local directory
You can provide a directory to ggt to sync to a specific location:
ggt sync ~/my/local/directory
You will be prompted to select what Gadget app you want to sync, and that app’s files will be synced to the local directory “~/my/local/directory”.
Sync a specific app
Use the --app arg to specify a project without having to select it from the list of available Gadget applications:
ggt sync --app <app-name>
This will start a sync for this project at the current directory.
Working with git
We recommend using “good” version control practices, such as making a bunch of small commits instead of one or two giant commits. Filesync will make it easier to roll back in case some errant changes are synced to your Gadget app!
If the ggt sync command is running when you change a branch or pull down changes that a fellow developer has pushed to your branch, these changes will all be synced to your Gadget app!
Resolving conflicts
If you make changes locally, or pull changes down from version control and then start running ggt, you might find that you have conflicts. The same file may have been edited locally and in the Gadget app since the last sync was run.
Thankfully, ggt will detect conflicts for you. It will also give you a couple of different options for resolving conflicts:
- Cancel (Ctrl+C): You can choose to cancel the sync operation
- Merge local files with remote ones: Your local changes will overwrite any changes made in Gadget directly
- Reset local files to remote ones: Your local changes will be overwritten by the changes made in Gadget directly
Note that these options will make changes for all file conflicts! In the example below, selecting either Merge or Reset options will overwrite local or remote changes to both GET.js and POST-order.js files.
In the case there are changes you want to keep from both local and remote sources, you will need to port all changes to your local or remote instance, and then merge those changes with the other instance of your files. For example, I might port my remote changes over to my local instance, and then “Merge local files with remote ones” to push all changes to my remote Gadget app.
Gadget + your local dev tools ❤️
Filesync gives you more control over their workflow and tooling while building applications using Gadget. You can now use your editor, write and run unit tests using your favorite test runner, use source control to manage your Gadget project, and integrate any other local tooling you like to use for Node projects, while the ggt command line tools syncs changes to your Gadget application.
Interested in learning more about Filesync and ggt?
The Gadget ggt documentation and source code are available to read on Github.
Find any issues when using ggt? You can report these in the project’s issue tracker.
Top comments (0)