Preview from PRs

[tmadlener]

It would be very nice to have a preview of the site from a pull request. I am not entirely sure whether it's easily possible to actually do this, but it would make reviewing changes that are mainly visual or that at least have a visual component to their functionality much easier. E.g. new buttons / toggles or interactive filtering, etc...

[brauliorivas]

I'll take a look and see how can I implement this.

[brauliorivas]

Hey @tmadlener, @kjvbrt. I got some updates. So after some exploration and testing, I found this GitHub Action called pr-preview-action that could be very useful. It basically creates a secondary branch called gh-pages. This branch is used to store people's code from a pull request, to later deploy it to GitHub Pages. So whenever a pull request is opened, it deploys a preview and adds a link into the PR discussion (as a commentary from gh bot). To set up, a few things are required:

1. Create the GitHub actions files for the workflows. We need 2 .yml files, because one will be used to define deployments of the main website (from main branch), and the other file to setup the previews. You can check an example ready to use in this repo.
2. Configure the repo settings to deploy to pages from the gh-pages branch. This will enable preview.
3. And solve any kind of problems.

You can check how it works on my repo.

[kjvbrt]

Hi @brauliorivas, this looks neat.

ATM we deploy dmx from the main branch. Changing it to the gh-pages should not be a problem. We will however need to enclose the main version into a subdirectory.

I'm not sure which subdirectory to use, main seems natural choice. So, the url will be:

https://key4hep.github.io/dmx/main/

But having also something like stable or release would probably be also acceptable. @brauliorivas, @tmadlener Let me know which you prefer.

The preview pages will then be like this, right?

https://key4hep.github.io/dmx/pr-preview/pr-1/

@brauliorivas I'm getting 404 on your example PR :)

[tmadlener]

Can we have both stable / release and main? :) So basically sort of a released version, but also a development version that we can use to let people test the latest developments more easily while not breaking the release?

The branches you are mentioning mainly refer to where the action picks things up from, right? And that then determines the subdirectory? Or do we have to create subdirectories in the repository?

We can probably add a redirect from key4hep.github.io/dmx to latest/'stable', right?

[brauliorivas]

Sorry! I made a mistake with my configuration.
This is how pr-preview-action actually works. It deploys previews under gh-pages branch. So dmx should be configured to be deployed under this branch. However, the main branch, that contains the repo deployment with the up-to-date code will stop working.

So I found out that I need some way to still deploy the original repo. I found this gh pages workflow that deploys a simple static website to the same gh-pages branch.
Why not use main branch to deploy the repo? Because then it breaks previews. GitHub can only deploy pages from one unique branch.

@brauliorivas I'm getting 404 on your example PR :)

That is why there was a 404 error. (I thought it worked before, but cache tricked me, and I wasn't seeing the newest version).
Using both pr-preview-action and gh pages workflows get together very good. No conflicts are raised due to some branch/commits conflict. I now have a real working workflow at this repo.

So basically, we need to use two workflows from the marketplace.

[tmadlener]

I can get to the preview page now. How hard would it be to add something like this to this repository? I think this would be extremely useful for our GSoC project (especially for me as a reviewer of PRs ;) )

[brauliorivas]

The preview pages will then be like this, right?

https://key4hep.github.io/dmx/pr-preview/pr-1/

Yes! You are correct.

[brauliorivas]

But having also something like stable or release would probably be also acceptable. @brauliorivas, @tmadlener Let me know which you prefer.

Can we have both stable / release and main? :) So basically sort of a released version, but also a development version that we can use to let people test the latest developments more easily while not breaking the release?

So, using the workflow I mentioned, I got my repo here to have two kinds of deployments.

• One for production, as you @tmadlener @kjvbrt mentioned, for release/stable dmx.
• One for beta, which will be a few commits ahead of main. This beta/development deploy will be under the beta branch, and deployed to the same gh-pages.

In this way, we can keep main, beta ,and gh-pages branches detached from each other.

• main will only contain the stable code.
• beta will contain code that is for testing/development purposes.
• gh-pages will contain each version in a distinct folder for deployment, and we/new contributors won't need to take care of it.

The final url's will be something like:
https://key4hep.github.io/dmx/ for main
https://key4hep.github.io/dmx/beta for development
https://key4hep.github.io/dmx/pr-preview/pr-#some-number for previews on pull request.

So, the final contribution workflow could either be:

• Contribute to the beta branch and then manually merge into main.
• Contribute directly main branch and then having to manually merge main to beta.

So, the final contribution workflow could either be:

• Contribute to the beta branch and then manually merge into main.
• Contribute directly main branch and then having to manually merge main to beta.

I think I still need some clarification for the the last part, but you get it 😄

[kjvbrt]

Now the example works for me :)

I would keep release, main and pr-preview as separate subdirectories. To redirect from main one can use redirect like this:
https://github.com/HEP-FCC/fcc-tutorials/blob/gh-pages/index.html

[brauliorivas]

I would keep release, main and pr-preview as separate subdirectories. To redirect from main one can use redirect like this:
https://github.com/HEP-FCC/fcc-tutorials/blob/gh-pages/index.html

Hey @kjvbrt, I've updated my repo https://github.com/brauliorivas/fouriertransform. Now, main, release and pr-previews deploy to an individual folder under gh-pages branch. And every time someone enters to https://brauliorivas.github.io/fouriertransform/, it is redirected to main https://brauliorivas.github.io/fouriertransform/main/index.html. This will serve for #16.

[kjvbrt]

Nice, I like it.

[tmadlener]

I like this too :)

[brauliorivas]

Great! Then, I'll finish #16.

[tmadlener]

This is working now as desired.