Introducing: GitHub Imports

Product Updates  |  ,

You can now import Dart or Flutter projects into Zapp! directly from any public GitHub repository or Gist. Projects can live in a sub-directory, even within a specific ref/branch/commit.

Many developers use GitHub to push up fully working examples or part of a full application for educational purposes. Previously, you would have had to manage synchronising these manually (copy pasting) into the Zapp! editor, which was a huge pain-point. Instead, you can now reference the path to a project within your GitHub repository to trigger an automatic import which keeps up-to-date with any changes which have been made.

Repository Imports

You can import any project from a repository, as long as it has a valid pubspec.yaml file and an entrypoint (e.g. lib/main.dart). Provide the GitHub URL pathname to the https://zapp.run/github/<path> URL, and the code will automatically be imported.

The Flame Engine repository (flame-engine/flame) contains a great example, located within the projects example directory (https://github.com/flame-engine/flame/tree/main/packages/flame_oxygen/example). You can instantly import this into Zapp! via the following URL:

https://zapp.run/github/flame-engine/flame/tree/main/packages/flame_oxygen/example

This process works even if the example is located at the root of the repository, or you want to import a project from a specific branch, ref or commit SHA.

To learn more, visit the documentation.

Gist Imports

GitHub Gists are user-specific code snippets which don’t belong within a repository, great for sharing small segments of code. You can now import any Gist with a main.dart file directly into Zapp! by providing the ID to the URL:

https://zapp.run/gist/<id>

For example, if we take the popular Flutter example “Sunflower Gist” (5c0e154dd50af4a9ac856908061291bc), we can load this into Zapp! via the following URL:

https://zapp.run/gist/5c0e154dd50af4a9ac856908061291bc

If a gist has no pubspec.yaml file, then we automatically generate one for you and add all the necessary dependencies.

To learn more, visit the documentation.