full-screen-plugin-example.rst

is-up-to-date:	True
last-updated:	4.0.0

.. index:: Crafter Studio Full Screen Plugin Example, Studio Plugins, Plugins

Crafter Studio Full Screen Plugin Example

Here we'll take a look at an example of creating a Full Screen Plugin for the plugin host page using the Vanilla example

For more information on the plugin host, see :ref:`here <plugin-host>`

For this example, as outlined in the vanilla example referenced above, we will need a project created using the Website Editorial Blueprint. We'll name the project editorial.

1. The first thing we have to do is to create the folder structure where we will be placing the JS file for our vanilla plugin. We'll follow the convention listed in :ref:`ui-plugin-directory-structure`. For our example, CATEGORY is apps and the NAME is example-vanilla

   In a local folder, create the descriptor file for your plugin craftercms-plugin.yaml with the plugin.id set to org.craftercms.plugin.vanilla, then create the following folder structure:

   <plugin-folder>/
     craftercms-plugin.yaml
     authoring/
       static-assets/
         plugins/
           org/
             craftercms/
               plugin/
                 vanilla/
                   apps/
                     example-vanilla/
   

   
   

   We will be placing the JS file implementing the plugin host page plugin under the vanilla-plugin folder. For our example, the <plugin-folder> is located here: /users/myuser/myplugins/vanilla-plugin

   Here's the plugin descriptor file we'll be using (click on the triangle on the left to expand/collapse):

   Plugin descriptor file for vanilla example.

   .. literalinclude:: /_static/code/plugins/vanilla/craftercms-plugin.yaml
        :language: yaml
        :linenos:
   
   

2. We'll copy the JavaScript file index.js found here for our plugin

3. After placing your plugin file, the plugin may now be installed for testing/debugging using the crafter-cli command copy-plugin.

   
   
   

   When running a crafter-cli command, the connection to CrafterCMS needs to be setup via the :ref:`add-environment <crafter-cli-add-environment>` command. Once the connection has been established, we can now install the plugin to the project editorial by running the following:

   ./crafter-cli copy-plugin -e local -s editorial --path /users/myuser/myplugins/vanilla-plugin

4. Let's take a look at our plugin in action by entering in your browser the following:

   http://localhost:8080/studio/plugin?site=editorial&type=apps&name=example-vanilla&pluginId=org.craftercms.plugin.vanilla
   

Below is our plugin host page: