'Shell' App for Jamstack Apps

[thetomester13]

I just realized that I have now have 2 apps (Nomie and CyberChef) on Cloudron deployed through Surfer by building their source code, and simply uploading the production code to Surfer to be served up.

This got me thinking (dangerous!) about potentially creating a 'shell'-like application that could wrap Jamstack apps (apps that only need a front end and don't need a hosted backend/API) with additional benefits such as automatically building the project from source/Github and serving it up, optional minor version updates based on Github releases, specifying the app's icon path within the project, and I'm sure there could be other nifty features like this.

I'm not entirely sure how to go about this yet, and some Terminal tinkering would probably need to be done (i.e. must be a tech-savvy user to set it up), but I'm wondering if other people would be interested in something like this? I don't mind having the apps that I'm currently running in their current state, or even try to automate them using some CLI + Cron, but am willing to give building this out a shot.

(Also wasn't sure if this is the proper topic for this, feel free to move if more appropriate elsewhere!)

[jimcavoli]

@thetomester13 You know, I actually bet this could be done without actually needing to do any fiddling about with the terminal either. As it stands, you could use GitHub actions to build and deploy the site into something like Surfer already in a pretty automatic fashion with the right job specification, but there's nothing in the way of building a basic admin interface that would allow you to add an ssh key or username/password pair for a user with access to a git repo, the build command, and the ability to process a web hook to trigger the pull/build/update. That said, this is only slightly different than the GitHub Pages app that's available - (Docs: https://docs.cloudron.io/apps/githubpages/ and Package: https://git.cloudron.io/cloudron/githubpages-app ) - which just does this from a git push for strictly Jekyll sites. At the point that you've got a repo (especially on GitHub) that you're pushing changes to, the process of building and deploying a full-on custom app is hardly a large leap either (see https://forum.cloudron.io/topic/3678/build-deploy-to-cloudron-from-github-actions as an example). I'm intrigued by the idea, but it has a lot of overlap with other existing options, so I'd like to have a better idea of the various ways this concept might operate and what sorts of problems it allows users to solve that isn't better served by just packaging more apps or just tooling up a custom app, especially if the boilerplate is similar.

[thetomester13]

@jimcavoli some good thoughts and resources there, thanks!

I agree that with my original proposal, I'm not sure if I'm overcomplicating or overengineering a solution to a problem which might not even exist. The main issue I'm seeing with the Github Actions is that the repos I'm talking about (and the ones I envision being used for such a shell app) wouldn't necessarily be owned by the user, so one couldn't add any Actions to that repo. Unless it was a fork of course, but which then still begs the question of auto-updating from upstream.

I do like the thought of leveraging a solution similar to the Github Pages app as it does do something similar, just limited in the way of building the app (i.e. Jekyll only).

[girish]

@thetomester13 said in 'Shell' App for Jamstack Apps:

with additional benefits such as automatically building the project from source/Github and serving it up

If you are looking for some inspiration, docs.cloudron.io is just a surfer app. We simply push to the git repo on gitlab and it will automatically deploy with GitLab's CI feature. We use this ci yml.

[thetomester13]

@girish Nifty!

[jdaviescoates]

I'd really like to be able to do a gitbook style documentation site where users can click edit and then get taken to a git repository where they can edit the page and then submit a pull request.

What's the best/ easiest way to achieve this on Cloudron? Is it possible? (I'm guessing/ hoping yes).

[marcusquinn]

@jdaviescoates Maybe MkDocs?

[jdaviescoates]

@marcusquinn yeah, I actually started playing with that locally a while ago but then didn't carry on...

It would certainly work for nicely displayed documentation using markdown, but I'm not sure I've seen an instance where I can click edit and suggest changes via a PR - have you?

[marcusquinn]

@jdaviescoates Nope, but I guess you could put the link to the source in the articles. I know what you mean though.

[jdaviescoates]

@marcusquinn just found this https://docs.v1engineering.com/mkdocs_info/ which looks like an example of what I'm looking for, so must be doable.

The question now is could I use some nice a lightweight like Gitea instead of Github or Gitlab...

[marcusquinn]

@jdaviescoates I like GitLab a lot but we use for the full CI/CD stuff. I'm keen to try Gitea & Drone at some point though.

[jdaviescoates]

@marcusquinn yeah GitLab is great, I just don't actually need it yet and it's quite resource intensive - so would be a bit bonkers to install it just to serve static documentation files!

That example I found was using Material and it seems if using GitHub, GitLab or Bitbucket the edit button is automagic:

https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/#edit-button

So I guess should be possible to use Gitea by editing the edit path setting..

[marcusquinn]

@jdaviescoates Yeah, honestly GitLab is a beast. I'd start with Gitea from what I can see, much lighter and I'm sure would do all you'd need. Easy enough to switch later but I just have so much in GitLab.com I never get round to much else.

[girish]

@jdaviescoates said in 'Shell' App for Jamstack Apps:

What's the best/ easiest way to achieve this on Cloudron? Is it possible? (I'm guessing/ hoping yes).

I think bookstack and wikijs is the closest.

[atridad]

@marcusquinn The workflow for Gitea + Drone on cloudron is quite nice actually with felix's package. Personally I'm still for GitLab for its really good devops and project manaement features. And that it actually looks half decent when accessing it on mobile lol

If you guys want I can make a guide for Gridsome (or any other SSG platform) + Gitlab/Gitea + CI + Surfer. Its really quite simple once you get the hang of it.

[robi]

@atrilahiji please do

[jdaviescoates]

@girish said in 'Shell' App for Jamstack Apps:

I think bookstack and wikijs is the closest.

Thanks, I've played with both of those and didn't like either of them.

mkdocs seems to be the way forward...

[atridad]

I put together a rather rough/rambly video about JAMstack on cloudron using Gridsome + GitLab CI + Surfer: https://video.lahijiapps.dev/videos/watch/3540b0bb-553f-43bb-8087-fa8e26fd0d46

Let me know if there are questions. Yes I know I look around a lot when I'm nervous and I ramble

[nebulon]

@atrilahiji This is great, can we maybe add this to our peertube instance somehow as well? Not actually sure how we can "link" this, but would be nice if it can also be discovered through our instance

[atridad]

@nebulon For sure! I can send DM you with a link to download it. Gotta throw the video up on my nextcloud first. If theres a way to do this via federated access we can try that but I haven't dabbled with that in Peertube yet.

[nebulon]

@atrilahiji actually I made our instance follow yours and you either manually or automatically approved that already, now your video is also listed at https://videos.cloudron.io/videos/trending

I also enabled redundancy between your instance and ours, no clue what that means yet, but sounds great!

[atridad]

@nebulon Oh cool, thanks! I am definitely open to making more guide for things if needed. I definitely need to be more concise though.

[marcusquinn]

@atrilahiji Just watched - very cool!

Does peertube allow for making "friends" from one instance to another?

I have mine setup at https://peertube.marcusquinn.com (although only private videos for friends & family at the mo)

[atridad]

@marcusquinn unsure. I know you can sub? But not sure about a friends system.

[thetomester13]

@atrilahiji thanks for documenting that! Looks like I have a good bit of digging in to do when it comes to GitLab and its CI/CD features!

Also, I love your setup! The changing lights in the background definitely added to the video

[atridad]

@thetomester13 I'm glad it was helpful! It was a fairly opinionated guide in that I specifically chose Gridsome for the SSG and GitLab/Gitlab CI for the git and CI platforms. But these steps can be adapted to other platforms.

And yes I find the colour cycling philips hue lights incredibly relaxing while I work