Plasmic Studio error on selecting an project

Issues
1

*What are you trying to do?

Setting up Plasmic Studio in my local.

*What are the reproduction steps?
I have set up Plasmic Studio locally. Running over http:

yarn dev to get up the studio , I am able to login and see the home page of Plasmic Studio. But when I try to click on New project, or select an existing project , I get SSL errors while it’s trying to load loadsh.js , lib-router.js etc . (strict-origin-when-cross-origin)

What I’ve noticed is the first time the home page loads , all these files are loaded over http and it loads fine.

But when I click on create new project or click on an existing project , then the file studio.js tries to load over https which I think is causing the issue.

Request initiator chain
* http://xyz:3004/
* http://xyz:3004/static/js/lib-react.js
* http://xyz:3003/static/host.html
* http://xyz:3003/static/sub/build/client.47c8d3.js
* http://xyz:3004/static/js/studio.47c8d3.js
* https://xyz:3004/static/js/lib-polyfill.js
Notice the HTTPS request being done for lib-polypill.js .

I believe this call is happening due to this code in studio.js.template file . Line 30 : doc.write(finalHtml);

Even after replacing https with http in finalHtml , I am still facing issue.

Relevant links:

2

Hi, can you try running yarn setup-all ?

3

I ran yarn setup-all , still facing the same issue…

More context - I am running plasmic studio in a vm and not my localhost and accessing the VM thru its IP . Is this causing the issue ?

4

this piece of code in studio.template.js

const __plasmicHtml = __plasmicData.html;

Is loading these scripts .

Which is unable to load as its trying to load these scripts over HTTPS.

Can you pls tell me what am I doing wrong here ? Help me in narrowing down on the issue.

5

I am running Plasmic Studio inside a VM . Using http protocol in the browser URL . Home page or the Project creation page loads fine . All calls to scripts such as loadash , normalize.css , react.js. , router.js. etc are happening over http. When I select a project, all the calls are happening thru HTTPS. Why is this happening ?

6

Anything?

7

is the code written in such a way that we should not do self hoisting in a VM ? Do we need to pay plasmic for this ? Can you pls answer these questions.

8

Hey @bharath_bhat, there is no restriction on where the code can be ran.

The script you said that is loading this data is the index.html in /platform/wab/public/. Can you check where exactly is the issue happening on the file?
One of the reasons that it is trying to use HTTPS is because it believes it is running in production mode.

9

Hi , thanks for the reply , The scripts are loaded in the file studio.js.template . This is basically what its doing.

const __plasmicHtml = __plasmicData.html;
 let finalHtml = __plasmicHtml;
  // Overwrite the entire document.
  doc.open();
  doc.write(finalHtml);
  doc.close();

And this code is basically trying to load some some scripts which in return is throwing SSL errors over the network tab.

  • Mode is not production , i am able to access plasmic project listing page via http://{ip}:3003 , only when I click on create a new project , I am getting this error.
10

I did modify the code, finalHtml before loading it into into doc . Replaced https with http.

Below is the scripts which are loaded via the finalHTML which are failing.

x3Cscript defer src = "/static/js/lib-polyfill.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "/static/js/lib-lodash.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "/static/js/lib-react.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "/static/js/lib-router.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "/static/js/vendors-node_modules_path_path_js-node_modules_plasmicapp_loader-react_dist_index_esm_js-node-2b1b92.js"

I replaced relative URLs to absolute URLs for example-

x3Cscript defer src = "/static/js/lib-polyfill.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "**http:{ip}:3003**/static/js/lib-lodash.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "http:{ip}:3003:/static/js/lib-react.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "http:{ip}:3003/static/js/lib-router.js"

crossorigin = "anonymous" > \x3C / script > \x3Cscript defer src = "/static/js/vendors-node_modules_path_path_js-node_modules_plasmicapp_loader-react_dist_index_esm_js-node-2b1b92.js"

And the scripts got loaded fine, but started getting error in this call

http://{ip}:3003/api/v1/auth/csrf

So I felt im doing something wrong by replacing the scripts .

So what am I doing wrong ? What might be the fix ? As per my understanding , plasmic should not try to load the scripts via https when im in dev mode and running over http

11

Digging lil more into it , from where __plasmicData is actually coming from , I find this file , studio-html-plugin.ts . which is doing may things , hardcoded https , like below which might be causing the issue ?

      root.querySelector("head").insertAdjacentHTML(
        "afterbegin",
        `<script>
            try {
              const params = new URL(
                \`https://fakeurl/\${window.__PlasmicStudioArgs.replace(/#/, "?")}\`
              ).searchParams;
              document.getElementById("newBase").href = params.get("origin")
            } catch(e) {}
          </script>`
      );
12

Could you check what the “origin” is from that script? You can also check that in plasmic-studio-args.ts:buildPlasmicStudioArgsHash

13

The scripts which are failing has an property like so , this is in code.

crossorigin=“anonymous”

And below is network calls.

Origin

http://{ip}:3003

Referer

http://{ip}:3003/

Request initiator chain
* http://{ip}:3004/
* http://{ip}:3004/static/js/lib-react.js
* http://{ip}:3003/static/host.html
* http://{ip}:3003/static/sub/build/client.47c8d3.js
* http://{ip}:3004/static/js/studio.47c8d3.js
* https://{ip}:3004/static/js/lib-polyfill.js

All other calls are happening over http . The final script call which is being done by studio.js file , is happening over https . Does this debug information answer your question?

14

Hi , How do we run this Plasmic Studio in production mode ? If im running this in dev mode , im getting CORS , and wss(rsbuild HMR) errors. Does plasmic use wss in production mode ?