latticesurgery-com/web-ui

Setting up CI/CD with Github Actions

alexnguyenn opened this issue · 8 comments

Per discussion with @gwwatkin

We would like to setup CI/CD workflows (like with our compiler repo). Ideas:

Prettier looks neat. I guess we have to decide on standards? Is there a way to synchronize settings, so that everyone has an exact copy, and agreed-upon changes propagate from the central "source of truth" to our local repos? I am not sure how it works, though I have just installed it anyway.

Haven't heard about Jest but I'll look into it

I've used S3 for image hosting but will have to look into auto-deploy on S3. Sounds like that's what we have to do to go serverless.

@Keelando I haven't looked into it too deeply, but if it is anything like Black for Python then we can have a file that store the settings for the project - like pyproject.toml for the compiler repo. It is an opinionated formatter so I don't think we need to change that much anyway.

We will use a CI tool to do the check for Prettier for every pull requests (you can see recent PRs from the compiler repo for examples). @gwwatkin apparently pre-commit supports Prettier as well.

I think me and @gwwatkin will be able to look into auto-deployment. It does seem to be quite straightforward with Github Actions from the examples I have seen.

@Keelando and @alexnguyenn
Here are my opinions:

  • Linters: Prettier looks interesting. I've used ESLint. It does a pretty good job at doing static analysis on your code,but it might be obsolete with typescript. Also, unlike for the JS version, for which there is a pre-commit hook, I can't find one for the typescript version ... still might be worth having a look. I would avoid it if it prevents us from running pre-commit.ci.
  • Yes prettier has a .prettierrc configuration file like pyproject.toml
  • Yes, I've suggested in the past we use s3 to deploy, but we don't necessarily have to - that's the beauty of having separated the API, we can host anywhere, including github pages if we want to - I'm open to better ideas. S3 is cheap, flexible and powerful, but it might need some complex configuration, especially if we want a deployment for every PR. Though there are a lot of examples, such as the one Alex pointed out.

I was forgetting, testing with Jest should be straightforward. Looks like a simple action is enough, like this one. They use yarn ... not sure if we have to change it npm, probably not.

One more thing I might suggest is that if we add dev branch, we deploy it to dev.latticesurgery.com

@gwwatkin @Keelando So I have looked around a little bit. Seems like Prettier + ESLint is a commonly used option. Here are some guides I have found:

For pre-commit hooks we can use husky. I have looked at some examples and can definitely create a Github Action workflow to have those checks running for our CI like the compiler repo. We can also bring over Dependabot to help manage our dependencies as well.

I think these are all desirable features, we just have to decide how soon do we need them and who will implemented. I'm happy with @alexnguyenn going for it since you did an awesome job on the LSC repo, but I can also give it a shot after the 13th

Closes via #36