Solved: "scroll-aware-navbar" works on dev, not on live build.

Developer Support
1

Trying out the above, but can’t get it to work. Works fine in preview and localhost, but the live build isn’t having it.

What can I do to get this working? I’ve spent five hours on GPT trying to heal my wounds but no luck and I desperately need a nav bar to change variant on scroll :slight_smile:

EDIT: Added console log but can’t see anything in my live build, but localhost and plasmic studio are fine. Just added console logs everywhere and can verify the components arent actually executing. What am I doing wrong?

Solution

The issue was not the component, but that publishing via Plasmic studio does not use my codebase, so it didn’t even know the apps were there.

2

Hi, can you share some more details on what the issue is / what you are seeing?

3

Ok I’ll put it this way, in the exact same github project I just linked, copy it and publish it. You’ll see the header variant change on scroll on localhost and dev server etc, but not on a published build.

I’m not sure the component is executing at all. Take a look at the component in the github link - is the following registration sufficient or am I doing something wrong? Why does it work on dev but not live?

import { ScrollProvider } from “./components/ScrollContext”;

// other code here //

PLASMIC.registerGlobalContext(ScrollProvider, {
name: “ScrollProvider”,
providesData: true,
props: {},
});

4

Hi, here is a video of running a prod build—check that you are able to run these steps, and if there is something failing in your local dev env, you can also try from a clean environment (such as a github actions runner) to be sure:

5

Right ok, I think I’ve misdescribed my issue.

(Not really a developer so fairly new here)

My process has been npm run dev > sync with plasmic studio, publish to vercel etc.

I hadn’t tried building locally before now (Should I have…?) now that I’ve done that, I can see that the component DOES work on the production build locally, and again in plasmic studio, but when I publish on plasmic hosting or vercel it doesn’t work.

What could cause that?

6

No worries!

If you are integrating a Plasmic project with your own codebase, then that means it’s really your own codebase that you want to deploy. So you can deploy it to Vercel, but make sure what you’re deploying is actually your codebase with the right components and registrations. (Plasmic doesn’t upload a copy of your source code or anything like that.) Deployments and automation | Learn Plasmic

Plasmic hosting doesn’t have access to your codebase so custom code components don’t work there—we can clarify this in the UI. Read more here on how the integration works: Host Plasmic Studio in your app | Learn Plasmic

7

Thanks Yang.

So to clarify, if I want to upload my own registered components, I’ll need to design and create in plasmic studio as standard, but build and publish to vercel from my own server console?

It would be ideal to click publish in Plasmic studio and have webhooks pull my build from my own code otherwise it’s an additional step but let me know if thats not how it works

Follow up question:

What’s the codebase workflow here? Am I meant to build locally before deploying to vercel, and if so, is github kept up to date? I’m struggling a bit to know where everything is now :melting_face:

Potential workflow?

So, if I set up my server to push to github every time I run a build, and vercel to publish it automatically, is that an ideal workflow? And I’d have to disable github in plasmic publishing options to stop overwriting yes?

Actually, probably better to just push dev builds because vercel will build for me, right?

Sorry I’m really new to this but learning tons.

8

Not quite… You should normally just have to hit the Publish button.

To simplify things, just do create-plasmic-app: New Plasmic codebase (CLI) | Learn Plasmic

Push it to GitHub and deploy to Vercel: Deployments and automation | Learn Plasmic

And now whenever you hit Publish in GitHub, it’ll show up in your site within something like once a minute (due to Next.js ISR Data Fetching: Incremental Static Regeneration | Next.js).

You can optionally add a webhook too to trigger a build immediately: Deployments and automation | Learn Plasmic

9

Ok I need to get my head around things here.

I already have my Plasmic app (my process has been create a site in plasmic, publish to github and clone to local and work from that)

If I’m using custom components, what’s the best workflow to get these onto vercel?

When you mentioned pushing to github, that’s what I was doing before but that was just plasmic’s code and doesn’t contain my custom components.

What I want (ideally) is to click publish to github via plasmic studio and for that to include my custom code. Is that possible or am I missing something?