How I developed GitHub Actions file Generator application
Tags: githubhack23, webdev, github
Published: 2023-05-20 17:05:48



## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oka1lovbu6flwudi2lan.png)

![Generated instructions and CICD file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpbuelxxyu7yt4gs0dlh.png)



### 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 
{% embed https://github.com/tavsec/github-actions-generator %}


### 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