Auto-update demo screenshot in README

[DexterStorey]

It would be really cool if changes to the cra package automatically:

• updated todo.rubriclabs.com (code at https://github.com/RubricLab/cra-demo)
• took a screenshot of the landing page and put it in the cra read me

😮‍💨

[iamshanvy]

Interesting problem, I will experiment on my own repos to try to achieve this result

[arihanv]

How exactly is this supposed to work?

[iamshanvy]

@arihanv

tldr

• Setup push to deploy on demo repo (i assume it's there)
• Use some hosting for the image for readme of this repo
• Everytime changes pushed in this repo, in pipeline do following
  -- pull demo repo
  -- delete contents of demo repo
  -- copy all contents of template from this repo to the demo repo
  -- push changes to demo repo
  -- wait for changes to be deployed
  -- use some sort of screenshot as api tool (there are a bunch) to get screenshot
  -- deploy newly created screenshot to the hosting provider (so that url of the image remains same, but image changes)

[arihanv]

@DexterStorey

To deploy changes to the cra package automatically:

• Instead of having a separate repo for the cra-demo, you could have a folder for it in this repo (create-rubric-app) and set a custom build command in vercel.json to build & deploy from that folder
• For the screenshot of the demo, this can be done through a combination of puppeteer and Vercel Blob. Essentially, you can make a Github action to run a program that uses puppeteer to get an image of the deployed demo once the vercel deployment has been successfully completed. Then, you can save the image in vercel blob without a random suffix. Doing this will allow you to use the same URL but change the image behind it.

I would be happy to help build this out, but I don't have access to Rubric's Vercel deployment/config

[DexterStorey]

@iamshanvy and @arihanv Thanks for laying out a path to accomplish this. I agree with the proposed implementation - a puppeteer generated - static image url - triggered by action is elegant.

I think @tedspare deployed the template from this repo to create-rubric-app.vercel.app. Not sure how that works - but I don't think the DB is currently functional.

Either way - the hardest part of this seems to be the screenshot.

I can set up the Vercel config in the account if anyone manages to get something working with puppeteer. This would be really cool - but no pressure, it's very much a nice to have and not blocking the core product.

[tedspare]

Yep I deployed the template directly to Vercel and it's blocked by the Prisma DB provider being SQLite.

If we could make the DB provider dynamic (no longer supported), it could be set in .env.local as DATABASE_PROVIDER=sqlite and in prod env as DATABASE_PROVIDER=postgres.

Another approach is SQLite in prod (fine for a demo imo). This requires a persistent filesystem unlike serverless.

I think we're close, open to ideas 🙌

[tedspare]

@DexterStorey

To deploy changes to the cra package automatically:

• Instead of having a separate repo for the cra-demo, you could have a folder for it in this repo (create-rubric-app) and set a custom build command in vercel.json to build & deploy from that folder
• For the screenshot of the demo, this can be done through a combination of puppeteer and Vercel Blob. Essentially, you can make a Github action to run a program that uses puppeteer to get an image of the deployed demo once the vercel deployment has been successfully completed. Then, you can save the image in vercel blob without a random suffix. Doing this will allow you to use the same URL but change the image behind it.

I would be happy to help build this out, but I don't have access to Rubric's Vercel deployment/config

Super cool idea that could be useful or a whole range of uses! Eg. link preview images, blog previews.

[arihanv]

Hey! In order to fix DB issues and to have easier deployments, I propose using Vercel KV. It's commonly used by vercel ai services to store JSON data which is exactly what we have. This will go hand in hand with the Vercel deployment and is easy to configure

[arihanv]

@iamshanvy and @arihanv Thanks for laying out a path to accomplish this. I agree with the proposed implementation - a puppeteer generated - static image url - triggered by action is elegant.

I think @tedspare deployed the template from this repo to create-rubric-app.vercel.app. Not sure how that works - but I don't think the DB is currently functional.

Either way - the hardest part of this seems to be the screenshot.

I can set up the Vercel config in the account if anyone manages to get something working with puppeteer. This would be really cool - but no pressure, it's very much a nice to have and not blocking the core product.

Hey @DexterStorey! I wrote some puppeteer code to generate a screenshot and it works well. I think we can make it even easier and just save the screenshot to a path (it does that by default) within the Github repo, and then dynamically change the image reference in the readme to refer to the screenshot or we can go with my previously proposed implementation.

Let me know what you want me to do with the code.

[DexterStorey]

Hey! In order to fix DB issues and to have easier deployments, I propose using Vercel KV. It's commonly used by vercel ai services to store JSON data which is exactly what we have. This will go hand in hand with the Vercel deployment and is easy to configure

Good point - I think vercel postgres would be even easier.

[DexterStorey]

Yep I deployed the template directly to Vercel and it's blocked by the Prisma DB provider being SQLite.

If we could make the DB provider dynamic (no longer supported), it could be set in .env.local as DATABASE_PROVIDER=sqlite and in prod env as DATABASE_PROVIDER=postgres.

Another approach is SQLite in prod (fine for a demo imo). This requires a persistent filesystem unlike serverless.

I think we're close, open to ideas 🙌

this is the way. Env the db type.

[DexterStorey]

Hey @DexterStorey! I wrote some puppeteer code to generate a screenshot and it works well. I think we can make it even easier and just save the screenshot to a path (it does that by default) within the Github repo, and then dynamically change the image reference in the readme to refer to the screenshot or we can go with my previously proposed implementation.

Let me know what you want me to do with the code.

In this case we would commit the image every time? I think the code would probably go in the root in like a utils folder and be called by a GitHub action workflow in .github/workflows?

[arihanv]

Yeah, I think the image would go in like a "public" or "assets" folder in the repo. Also, instead of Prisma, we should be using Drizzle ORM. It's much more performant and is kind of industry standard now, but this is not that important to change right now.

[DexterStorey]

hop on gather -> island.rubriclabs.com

[arihanv]

Hey @DexterStorey! I wrote some puppeteer code to generate a screenshot and it works well. I think we can make it even easier and just save the screenshot to a path (it does that by default) within the Github repo, and then dynamically change the image reference in the readme to refer to the screenshot or we can go with my previously proposed implementation.
Let me know what you want me to do with the code.

In this case we would commit the image every time? I think the code would probably go in the root in like a utils folder and be called by a GitHub action workflow in .github/workflows?

Yeah, I believe it would need to be a github action. Here is a reference from the Supabase GitHub. They use this action to automatically create embeddings of their docs once a change to their docs is pushed. https://github.com/supabase/supabase/blob/master/.github/workflows/search.yml

[arihanv]

Hey! In order to fix DB issues and to have easier deployments, I propose using Vercel KV. It's commonly used by vercel ai services to store JSON data which is exactly what we have. This will go hand in hand with the Vercel deployment and is easy to configure

Good point - I think vercel postgres would be even easier.

I agree. what do you think of using vercel postgres as the default db provider. I feel like the more we integrate with Vercel, the easier it is to deploy.

[arihanv]

hop on gather -> island.rubriclabs.com

Will hop on in about two hours if y'all are still gonna be there.

[iamshanvy]

I will leave this issue, it seems that @arihanv can take care of it 💪

I feel like the more we integrate with Vercel, the easier it is to deploy.

need to be careful with the cost though

Drizzle ORM
is kind of industry standard now

debatable

puppeteer

just in case later, check out this tool, puppeteer in pipeline might slowdown builds (guessing)?
Also sounds like a pain to maintain

sorry for being an old man 😂

[tedspare]

just in case later, check out this tool, puppeteer in pipeline might slowdown builds (guessing)? Also sounds like a pain to maintain

we built an API to do this!

hard part imo would be editing the README from within gh actions