wmbutler/react-youtube.md

## react-youtube.md

      
    Raw
  

              react-youtube.md
            
          
    Plasmic react-youtube

I'm posting these notes because it wasn't very clear how to do this the first time I set it up. If you are using Plasmic to build a website or create react components, this will help you understand how to import existing React components. There are a few that the Plasmic Team has created wrappers for. I used this method to install it, but there were several manual steps that weren't all that obvious.
This assumes you already have created a github repo for your plasmic site and that you are following the NextJS path.

On the root level, add this file plasmic-init.ts. Be sure to include your id and token. I've redacted them in this example:

import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
import {registerYouTube} from "@plasmicpkgs/react-youtube"; // This imports the Youtube module

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: "REDACTED",  // ID of a project you are using
      token: "REDACTED"  // API token for that project
    }
  ],
  // Fetches the latest revisions, whether or not they were unpublished!
  // Disable for production to ensure you render only published changes.
  preview: true,
});
registerYouTube(PLASMIC);  // This registers the Youtube App

Make sure that yarn is installed on your system and working properly

sudo npm install -g yarn
yarn

Install react-youtube. Go ahead and make sure plasmic loader is installed as well.

yarn install @plasmicapp/loader-nextjs
yarn install @plasmicpkgs/react-youtube


Create this file inside the pages directory and name it plasmic-host.tsx. This is a weird little slight of hand that wraps the plasmic GUI into your machine running the site instead of plasmic's server. This means that it can incorporate whatever modules you add locally. In our case it's the react-youtube module.

import * as React from 'react';
import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
import Head from 'next/head';
// Some Next.js app configurations will cause a plain `import '../plasmic-init'` to be ignored.
import { PLASMIC } from '../plasmic-init';

export default function Host() {
  return (
    PLASMIC && (
      <div>
        <Head>
          <script
            dangerouslySetInnerHTML={{
              __html: `
          !function(){const n=window,i="__REACT_DEVTOOLS_GLOBAL_HOOK__",o="__PlasmicPreambleVersion",t=function(){}
  if(void 0!==n){if(n.parent!==n)try{n[i]=n.parent[i]}catch(e){}if(!n[i]){const r=new Map
  n[i]={supportsFiber:!0,renderers:r,inject:function(n){r.set(r.size+1,n)},onCommitFiberRoot:t,onCommitFiberUnmount:t}}n[i][o]||(n[i][o]
="1")}}()`
            }}
          ></script>
        </Head>
        <PlasmicCanvasHost />
      </div>
    )
  );
}


Now from the plasmic studio app, https://studio.plasmic.app/projects you need to Configure the Project and set the protocol to http and the URL to localhost:3000/plasmic-host.


Now, start up your project locally with yarn dev


Now, open your Project at plasmic.app. You will see at the bottom, a category called Code Components with the Youtube App. You can drop it into any area of the project you prefer.