Using GitHub repo with Plasmic Studio

Plasmic Studio Questions
1

Updated: Having trouble with code components - they don’t appear when I publish to vercel or view my local dev server on localhost.
I’m using the plasmic loader method

Original text:

~I’m getting my head around creating code components.~
~Can I use the same GitHub repo to register the code components, and also to publish to from plasmic studio?~
~I’m using the plasmic loader, not codegen~

2

What I’ve done so far:

  1. Created a new plasmic app (app starter template)
  2. Published from plasmic studio to a new GitHub repo (nextjs pages router, plasmic loader)
  3. Imported the repo into vercel so it auto publishes from GitHub main branch
  4. First publish worked great! I can see my app hosted on vercel
  5. Opened that repo on my local machine
  6. Started Dev server
  7. Followed normal instructions to setup my app host. All worked fine
  8. Added a root directory folder called components and defined a component
  9. Registered the code component in the plasmic host page
  10. Refreshed plasmic studio and I can see the code component and add it to my page
  11. Preview the plasmic app and I see the new code component on the page
  12. Trigger a new publish in plasmic studio to my GitHub repo. Chose to save new version, added description
  13. It said it completed publishing but can’t see a commit in GitHub, nor is auto publish to vercel triggered, nor is my localhost:3000 Dev server root url showing any changes
    What am I missing? Thanks in advance
3

I am not an expert at this, but I’ll share what I know so far:

I believe the Plasmic team mentioned that when using loader you wouldn’t see further commits in Github … or anywhere else for that matter (localhost) in terms of code changes. You’d have to use codegen for it to work like that.

If left as such, Vercel would auto trigger a redeploy when there are new commits on the main branch. Since Plasmic doesn’t trigger commits, nothing would happen. However, if you make changes to your code components on localhost and push to Github, Vercel will see and deploy.

To make Vercel aware of new publishes from Plasmic, you have to create a new webhook in Vercel, from Your project > Settings > Git > Deploy Hooks.

Once created, copy the webhook url and in Plasmic, where you configured the publish to Github, add a Call webhooks and and setup a new webhook using a POST to the webhook url you copied from Vercel.

So whenever you publish, it will call the Vercel webhook to trigger a redeploy (and load the latest changes in Plasmic).

4

Thanks @exhaustive_panther
That helps. I’ve set that up, and deployments are now happening when I publish from Plasmic, which is great.

However, I now realise that the main issue I was seeing before isn’t that publishing wasn’t working, but rather that my code components are not showing up in the published version of my app. They only appear in plasmic studio.

The images below illustrate this.

I can see my code components in Plasmic studio and have added them to the home page (image 1 - the blue “HelloWorld Someone” text & the list of names below are both code components).

Those code components also show up when previewing in plasmic studio (image 2)

However, they do not show up when I’m running my dev server and access localhost:3000 (image 3), nor do they show up when I trigger a deploy to vercel (image 4). In both of these, changes made to non-code changes ARE publishing successfully but the code components are missing entirely

image.png
image.png1911×751 61.7 KB

image.png
image.png1882×780 40.1 KB

image.png
image.png1917×549 48.2 KB

image.png
image.png1920×456 31.6 KB

5

My app host is currently localhost:3000 if that makes a difference?

image.png

6

Yes, it makes a difference. Your app host should be updated with your Vercel url so that Plasmic can load the custom components from there (instead of locally from your machine) - there are details here regarding this process: https://docs.plasmic.app/learn/multiple-environments/#managing-your-code-components-and-app-hosts

7

Thankyou for your excellent help again @exhaustive_panther - it’s made a huge difference to me being able to get up to speed on plasmic, much apprecitaed!

8

No problem, been there myself

9

The final issue, for anyone reading this later, is that I had registered my code components in plasmic-host.tsx rather than plasmic-init.ts
Once I moved the registration to plasmic-init everything started working as expected!