Pipeline UI is a free, open-source visual editor for visualizing, creating and managing GitHub Actions workflows. Built with SolidStart, this tool simplifies the process of creating GitHub pipelines by allowing users to visualize, create and update existing CI/CD workflows.
Note
This project has been built to partecipate in SolidHack 2024 and Appwrite’s Hacktoberfest 2024 Hackathon.
Although there are some alternative solutions that can help a lot writing workflow files directly from IDE, this project mainly is a MVP to discover new technologies
The amount of time dedicated in this project is very limited, and the features needed for a complete project are numerous.
Therefore, some features will undoubtedly be missing and may be implemented in the future.
Visualize and/or modify your workflow file through a simple UI.
- View your steps dependency graph through the main interactive canvas
- Check your workflow validity through the YAML Viewer and it's linter, which immediately tell you if your file respect the GitHub Workflow Syntax thanks to the GitHub Language Service integration.
- Modify your workflow file updating the Properties panel in the right side.
If you already have an existing workflow file pushed in your repository, yu can use the built-in search to retrieve all workflows and
fork them.
If you haven't an existing workflow file, you can create it from scratch (only if you're authenticated)
Workflow files are persisted into Appwrite Cloud and are publicly readable to everyone that now the shareable link.
PipelineUI is entirely built with Solid and SolidStart with enabled SSR.
The core technical points of this project can be summarized in those bullet items:
- SolidStart SSR with mutations and server functions for session, workflow and scratches crud
- MDX prerendered routes for /about pages
- Language Service Protocol and linter integration with CodeMirror via web-worker
- Editor local first state management with statebuilder via plugins
- Usage of Lingui for i18n
- Appwrite OAuth integration with SolidStart API routes
- Appwrite Database integration with SolidStart server functions
The user interface has been built with:
- @kobalte/core: Accessible components for SolidJS
- @solid-primitives/*: SolidJS primitives library
- corvu: UI primitives for SolidJS
- vanilla-extract: Zero-runtime CSS in typescript
Warning
The source code of @vanilla-extract/vite-plugin has been patched in order to support solid start w/ vinxi for multi-environment ssr/csr build.
This project uses ungh from UnJS in order to call GitHub API.
This project uses statebuilder to handle local state.
The editor store uses a command-based approach which granularly update the yaml code imperatively via yaml package. Currently autosave and local persistance (indexedb) is not implemented, but may be present in the future
See some implementations in store folder:
- CodeMirror6: used to display the YAML editor and merge view. The LSP integration is a revisited version of codemirror-languageserver, which was a
good starting point to integrate the GitHub workflow language server.
- packages/yaml-editor/src/lsp
- Portion of CodeMirror implementation is present in the @pipelineui/yaml-editor
- actions/languageservices: The language service repo for GitHub workflows and expressions. This was used to parse the workflow files and validate them, and enhance the editor code through linting and hover-in code documentation.
Warning
The source code of @actions/workflow-parser has been patched and rebuilt in order to work on vite in node/browser environment without getting errors and to extend some functionalities needed to the workflow yaml parser and lsp that were not available before.
Currently @actions/languageserver has been wrapped to ship only browser compatible packages with the built-in workflow-parser patch.
Read more about this in the package README.
The implemented Flow diagram is very basic and it has been built with solid taking advantage of some other dependencies:
- elkjs: ELK layout algorithm, used to calculate the flow item positions
- panzoom: Cross-browser compatible pan and zoom library
- @xyflow/system: Core of xyflow, currently used to build the smooth edge curve svg
Backend persistence and authentication has been done with appwrite.
Used Appwrite features:
- Auth
- Database
Most of the Appwrite code is available into
- packages/app/src/lib/server.
- packages/app/src/lib/scratchApi.ts.
- packages/app/src/routes/api/oauth.ts.
Here's a list of my personal dependencies, which they have been used to be tested and improved during the development.
- @codeui/kit: CodeImage design system (Kobalte + VanillaExtract)
- statebuilder: Pluggable state management
- solid-codemirror: SolidJS adapter for CodeMirror
This application is hosted on Railway. Deploy are made via github action CI/CD
This project will be submitted for these two hackathons:
Since they have two different deadlines, development will be subdivided into two branches until the two hackathon ends:
- main: Source code to be submitted for SolidHack
- appwrite: Source code to be submitted for Appwrite Hackathon
Those two branches are linked in a multi-environment railway project which is currently visible to everyone: Railway Deployment.
GitHub workflow for automated deploy: deploy.yml
Github environment deployments:
MIT © Riccardo Perra