Issues with setting up Plasmic

Issues
1

Hi everyone ! I am fairly new to plasmic and I encounter a few issues figuring out the different ways to setup a project. I am using NextJS as my framework and I need codegen in my project. So I created a new app using create-plasmic-app selecting next and codegen. I end up with a project set up with codegen and next which runs fine but now I would like to host plasmic studio in my app and the docs tell me I need to use next js loader, have a plasmic-init file etc… But I do not want to use nextjs loader since I need to be able to access and modify the components. Is there something I am missing ? Also quick question, what would be the best way to handle global state preferrably only using React State for this project ? Thank you in advance for your help

2

Hi Paul,
I think the only requirement should be a host url, preferably “plasmic-host” as per the docs.

You can try the CodeGen docs for the Plain React in your current setup*.* The only difference would be that it gives us an example of react-router for registering the host route. However, nextjs register the route itself so you would need to create a page instead.

3

Ok thanks, I’ll try that

4

Thanks @zonal_mammal! @charming_dove, here’s a direct link to the codegen docs: https://docs.plasmic.app/learn/loader-vs-codegen/ Let us know if that works.

5

If you used create-plasmic-app, you should already have a pages/plasmic-host.tsx generated for you. But currently it’s importing PlasmicCanvasHost from @plasmicapp/loader-nextjs ; if you’re using codegen and not loader, you can switch the import to @plasmicapp/host instead.

6

Then you should be able to just point to <http://localhost:3000/plasmic-host> as your app host

7

oh actually for codegen you don’t have a plasmic-host.tsx generated yet, but you can create one that looks like this:

import * as React from 'react';
import Script from 'next/script';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';

// You can register any code components that you want to use here; see
// <https://docs.plasmic.app/learn/code-components-ref/>
// And configure your Plasmic project to use the host url pointing at
// the /plasmic-host page of your nextjs app (for example,
// <http://localhost:3000/plasmic-host>).  See
// <https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host>

// registerComponent(...)

export default function Host() {
  return (
    <div>
      <Script
        src="<https://static1.plasmic.app/preamble.js>"
        strategy="beforeInteractive"
      />
      <PlasmicCanvasHost />
    </div>
  );
}
8

Thanks, it worked but I get a cors error for my localhost on plasmic studio
SecurityError: Blocked a frame with origin “http://localhost:3000” from accessing a cross-origin frame.
I am not sure what to change to allow cors on my project

9

Did not figure out what the issue was but starting with a new blank project rather than a plasmic template seems to have solved the problem