Ukoreh - Demo Flutter projects on the fly
Tags: githubhack23
Published: 2023-05-23 21:19:06


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmmovtzc3dar0wo7x09q.png)
## What I built 

Platform to demo Flutter apps by deploying them as **web apps** using GitHub **actions**

### Category Submission: 

DIY Deployments

### App Link

https://ukoreh.github.io/ukoreh.fun

### Screenshots

|Loading|Initial page|Loading|Stepper|
|-------|-------|------|-----|
|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb48wpto1aest8talmal.png)|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ofhw1gmb86bmjgy8bo9.png)|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lszoem0cylwbl48fkwla.png)|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt2fmg3n4t9bcrt99isi.png)|





### Description

Ukoreh is a tool for Flutter developers. It aims to increase the openness of open-source projects by allowing developers to easily demo Flutter projects as web apps since any project is most of the time cross-platform.

![wizard cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qej66n37llswvhy35lfi.png)

### Link to Source Code 

https://github.com/ukoreh (org)

https://github.com/ukoreh/gecgecgecgecgec (frontend)
https://github.com/ukoreh/fold (serverless functions)
https://github.com/ukoreh/actions (actions)

### Permissive License 

MIT

## Background (What made you decide to build this particular app? What inspired you?) 

We all love to view and research new projects on GitHub. Some of them have screenshots and videos, others don't. Well, wouldn't it be great if, at the distance of a click, you could get a demo of that particular project?

We made that possible for Flutter projects: since most Flutter apps are cross-compatible in different platforms (mobile, web, desktop), even if one built an app for iOS, I could test it as a web app.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

Our stack is composed of four technologies: **Svelte**, **Cloudflare Workers**, **GitHub Pages** and **GitHub Actions**. Let's start with the last one:

- We leveraged [actions](https://github.com/ukoreh/actions) to establish a workflow starting from cloning the target repo, polishing it, building as a Flutter web app and publishing it to GitHub Pages.
- We used [Cloudflare Workers](https://github.com/ukoreh/fold) as the middleman between the platform you request a repo to be deployed and triggering an action via GitHub API.
- Finally, we used Svelte to build the [platform](https://github.com/ukoreh/gecgecgecgecgec). It could have been React, Vue, some random JS framework I don't know, or even pure HTML. However, we chose Svelte because **we are learning it** as we believe it's the top-standing JS framework for building web apps.

![workflow diagram](https://raw.githubusercontent.com/ukoreh/.github/master/workflow.svg)

---

We did find some issues along the way and learned a lot from them. One of these issues, is the fact that GitHub does not give you back the **workflow run id** when you start a new workflow for a given action.

To overcome this issue, we had to do some _shenanigans_ in both the actions and workers code. In short, the action finds the most recent workflow run and then sets the identifier in the action local storage. Then, the worker patiently waits for this identifier to be set and get's it via GitHub API.

### Additional Resources/Info

This project was thought about way back in 2020! Thankfully it got to see the daylight after 3 years, thanks to this hackathon.