Unable to load via REST API from PHP

Hi! I’m using Plasmic to create a landing page, everything works ok deploying through plasmic hosting, but when I call the API to retrieve my project using PHP I have two issues:

  1. Screen variants don’t work, only the desktop version is shown even when viewing from a phone or different sizes. The hydration map is not found (404).
  2. I can only load the project with the “preview” setting, the “published” version doesn’t seem to work and I get a blank page.
    Thanks in advance!

hmm are you adding ?hydrate=1&embedHydrate=1 to the API call? have you published the project?

Yes to both, I copied the API code from the code button to test it (I’m not going to use it this way for production) and hydrate and embedHydrate are enabled by default so it is hard to miss. The project is published, assuming that when you hit “Publish” and save a new version is considered published. I don’t have the “published” issue when I load it using javascript. I do still have the hydrate warning and screen variants not applying. I get this error in the dev console. DevTools failed to load source map: Could not load content for <https://codegen.plasmic.app/static/js/loader-hydrate.245f23ce.js.map>: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

what’s the project id?

cQwzGyiE13AoqReDe4rRSK

It is a bit weird because I created a new responsive breakpoint for tablets in the project and that works fine with the API. The breakpoints that were in the template that I started the project with don’t work on my site but they do work in plasmic hosting though.

Created a new project to test it, It seems that all the breakpoints that are 980px or more work, but below 980px they don’t work using the API. To reproduce the problem just create a blank project (I use Desktop first) and load it with the API either PHP or Javascript. Let me know if you can reproduce this issue or need more information

Any updates on this? Could you reproduce the issue?

hmm what do you mean by “doesn’t work”? can you be more specific about what’s broken? it seems to be producing the right html/css when I tried :thinking_face:

When I mean it doesn’t work I mean that it won’t show the correct responsive breakpoint (mobile). I created a blank project with 3 breakpoints to test this. Desktop shows ok and any other breakpoint over 980px will display correctly when in that resolution. Under that, it won’t show, like it wasn’t there. I’m sending some screenshots, the last one should be showing “Welcome to Mobile” with the correct CSS properties, but it doesn’t. The test project is dv2vzHhrnR943jvVNefPen

wow, it’s weird but for whatever reason the responsive preview tool in chrome seems to be stuck at 980px? If I just use a normal window and resize the window itself, I can see the Mobile variant. It doesn’t seem related to Plasmic; you can check yourself with window.matchMedia("(max-width: 979px)") etc

Yes, I’ve noticed that and I can also see the mobile version if I reduce the window and yes in this case window.matchMedia("(max-width: 979px)")returns false, but this only happens when I load the project from my site, not from your hosting, and it doesn’t happen on any other sites/pages. Additionally, on mobile, I will see the tablet version and not the mobile version when loading it from my site, but it only happens on my site. It doesn’t happen when using plasmic hosting (masteringbox.plasmic.run) where it loads the mobile version as it should for my mobile resolution. I don’t think it’s just a google chrome dev tools issue, I think the resolution detection or something else from the API is not working correctly. I’ve tried using PHP and Javascript to load. In the end, the project will be on nextjs where I assume this issue won’t happen, but I wanted to create some quick landing pages to start testing plasmic design part, which is really good and fast. Maybe I’m doing something wrong myself but the API code is just copy/paste basically.

By the way, I just quickly created a nextjs project and it works ok there (with dev tools and with my phone)