DEV Community

Cover image for How I developed GitHub Actions file Generator application
Timotej Avsec
Timotej Avsec

Posted on

How I developed GitHub Actions file Generator application

What I built

I built a simple website, which will help developers generate GitHub actions file by filling up the single form.

Category Submission:

I think that my app belongs in two categories:

  • Maintainer Must-Have: this application helps maintainers to generate GitHub actions CICD file for their application, making their life easier
  • DIY Deployments: As this application also provides instructions and different deployment options (AWS S3, GitHub pages, Heroku, Netlify), this application can help developers set up their deployment environment.

App Link

https://tavsec.github.io/github-actions-generator/

Screenshots

Form for developer to fill

Generated instructions and CICD file

Description

My main goal was to develop a simple application, where developer can:

  • choose Javascript framework (Angular, React, Vue),
  • choose build processor (NPM or Yarn),
  • optionally choose test suite and
  • select their desired deployment method (AWS S3, GitHub pages, Heroku or Netlify)

Based on that information, the system will generate the GitHub actions file, which the developers can include in their repository. The system will also generate a list of instructions, which helps developer to set up their actions, along with instructions from external platforms, if needed.

I was aiming to make the process as simple as possible for developer, but also customizable to some extend. For example, developer can override default build command under "additional settings" field, or change the test command. The developer can also change the default branch, on which the actions are triggered.

Link to Source Code

GitHub logo tavsec / github-actions-generator

Web application which can generate GitHub Actions file for selected options.

github-actions-generator

This application was developed as a part of GitHub + Dev hackathon. The main purpose of this app is to help developers create GitHub Actions files from a simple form, and also provide them with the instructions on how to set up their CICD process.

My entry: https://dev.to/timotej_avsec/github-actions-file-generator-2nf

Setup

To run this application you need to have NPM and NodeJs installed. Once you have it, simply run npm install and npm run dev. This will set up your local server.




Permissive License

MIT

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

When I first started working with GitHub actions, I was overwhelmed with all of the possibilities that GitHub actions provide. I also discovered, that the simple process of building, testing and deploying the front end application is not a hard thing to do using GitHub actions, and can be easily configured. That's why I decided to develop this simple app, which helps frontend developers achieve this goal.

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?)

I developed this application using NuxtJS framework. Most of the work was done on GitHub Codespaces, which worked out of the box for my project (NodeJS was set up, I only had to run two Node commands, and the development environment was set up!).

The site is hosted on GitHub pages, and a simple Actions Job is set up, which deploys new version of the app every time new change is pushed to the main branch.

If you want to try the app, feel free to fork my repository above! I will probably be adding some new framework - my next goal would be to enable Docker option for building, and some other, container-oriented platform for deployments.

Additional Resources/Info

Top comments (0)