GSOC 2019: GatsbyJS preview for Plone

Hello everyone!

I am Alok Kumar(iFlameing) 2nd-year undergraduate as a Computer Science Major from Shri Mata Vaishno Devi University(Katra, India). Thank you for selecting me as a GSOC student and for giving me the opportunity to work with @datakurre and with the Plone community. My skill sets Include Javascript, Html, CSS, Python. I am pretty proficient in react, node, and Gatsby which are the required skills for the project. My project idea is GatsbyJs Preview for Plone. we are managing the project using Github project board for technical part and for communication we are using Gitter channel

Currently, gatsby-source-plone plugin is unable to update, update, delete and create node after fetching data from Plone site unless GatsbyJs development server is manually restarted or GatsbyJs site is rebuilt. This project plan is to enhance existing project "gatsby-source-plone" with features that allow "gatsby develop" development server to provide up-to-date instant live previews of pages that contain data from a Plone CMS source. You can read more about the project and How I plan to achieve the project goal by going to this link.

I applied to the GSOC program because It provides me a community where I can work with different people and hone my development skills. I can interact with amazing people who are working in the software development field for many years. Building something which is used by many of us and getting in the world of open source, stipend, and the t-shirt :slightly_smiling_face:

I would like to utilize this community to get advice and tips from other participants, to be inspired by other peoples projects and ideas and to become better at D.I.Y solutions. I will be happy to hear about any topic related to my communication or technical skills where I can improve myself from the community.

Alok Kumar
(ialokkumarsingh0@gmail.com)

1 Like

FWIW we choosed to manage the projecft using a Gitter channel and a GitHub project board.

Sorry for not mentioning that, I will update the post with mentioning them.

For anyone interested, as a side effect of this project, there's now a custom Docker image of Plone 5.2rc3 with Twisted based ZServer (and REST API) on Python 3.7 for testing purposes available:

docker run --rm -ti -p 8080:8080 datakurre/gatsby-source-plone:2019-06-04

It includes (not yet secured) websocket support for streaming object lifecycle events so that gatsby-source-plone -plugin could be implemented to subscribe them and update "gatsby develop" site live preview.

Screenshot_2019-06-05 Plone site

2 Likes

Fun thing that gatsby develop is serving the updated version of the page before the editor using Plone see their version :slight_smile:

5 Likes

:scream:

1 Like

Quick update. gatsby-source-plone repository now comes with a Docker image with permission aware websocket notifications so that gatsby develop gets proper live updates.

@iFlameing has been working on processing those notifications from Plone and as seen, adding and updating content already works.

3 Likes

The second coding period of GSOC 2019 has now been completed, so it is time for a quick update:

As @iFlameing had planned, this period was used for testing the MVP developed in the first period and fixing bugs when found, and also adding more unit tests for the code developed in the last year. This period was successful, so the last period can be used for refactoring the code for easier maintenance.

We also managed to build an acceptance testing setup for testing GatsbyJS develop live updates using my ZServer+WebSockets docker image "datakurre/gatsby-source-plone:2019-06-21".

Meanwhile I realized that the current Plone GatsbyJS examples are way too complex, because they are examples for re-building complete Plone-sites with GatsbyJS. Therefore I wrote an example of building a simple page composition from contents of a Plone folder – similarly to countless page composition add-ons in Plone:

This example contains only single page

That fetches its content from Plone, using a two level deep GraphQL query for the configured gatsby-source-plone site root:

export const query = graphql`
  fragment Document on PloneDocument {
    _type
    title
    description
    text {
      react
    }
  }
  fragment Image on PloneImage {
    _type
    title
    description
    image {
      childImageSharp {
        fixed(width: 1200) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
  query IndexPageQuery {
    ploneSite {
      nodes {
        ... on PloneFolder {
          _type
          title
          description
          nodes {
            ... on PloneDocument {
              ...Document
            }
          }
        }
        ... on PloneDocument {
          ...Document
        }
        ... on PloneImage {
          ...Image
        }
      }
    }
  }
`;

Note that support for those linked "nodes"-attributes connecting folder contents to their parents were added into gatsby-source-plone master very recently.

1 Like

Hi everyone,
I was waiting for the final result announcement to share my experience of the entire GSoC period. I am very happy that I passed the final evaluation and successfully completed the GSoc. The past three months are the most memorable days of my life because on daily basis I learnt something new. I faced many hurdle during the entire time but I always resolved those problem with the help of my mentor @datakurre and hard work.

Thank you very much @datakurre for supporting, helping and guiding me in right direction every time. He always split up large issue into smaller ones and explains every details of that issue which helps me to solve those issue very efficiently.

All the planned feature is now integrated in gtasby-source-plone related to Gatsby preview. Our future plan is to write the plugin in typescript. I will keep contributing to gatsby-source-plone and try to complete the rewriting of plugin in typescript as soon as possible.

Thank You :slight_smile:

1 Like

@iFlameing Thank you!

I will make a new release of the plugin, once I get rights for it at npm: https://github.com/collective/gatsby-source-plone/issues/243

For the others I need to clarify a few things about the name of the project:

GatsbyJS, the company, has a product named "Gatsby Preview". Plone integration is not yet part of the product, but I believe that after this GSOC our plugin should be pretty much compatible: https://www.gatsbyjs.com/docs/integration-guide/source-plugin/

gatsby-source-plone has supported (upcoming) incremental builds from the very beginning and after this GSOC we are able to trigger live updates from Plone site at GatsbyJS development server (and most probably also at Gatsby Preview).

To really get Plone into Gatsby Preview would require someone of us to really need it and be ready to pay for the product. I'm not going to do that, but only run similar services on-premises.

Of course, the web socket support requires "my ZServer" and its websocket integration. I will cover that in detail at the Plone Conference.

(This may read like a rant, but I'm just trying to figure out the positioning of Gatsby Preview, and functionality of the source plugin: no ill intent)

Last year when I visited a local React meetup in Rotterdam I asked one of the more knowledgeable (about the React ecosystem) people there what the sustainable business model behind Gatsby JS the company could be as they had just started the company and everything about Gatsby seemed to be open source, free and the sky is the open source limit.

He explained that very probably they would start selling additional commercial services for content management and live content integration when your website becomes to large. So team up with contenfull or other headless content delivery products or other advanced content editing. I learned about Gatsby preview last week and thought: aha, that person was smart when I asked him last year. :slight_smile:

It reminds me of a bit or companies who offer a free 'dot zero' community version of their DMS without bug fixes and ask you to pay for the 'commercial' supported version once you want to connect to something advanced like LDAP. Or export your content. Switch and Bait.

Im definetely going to look into the Gatsby ecosystem and Plone more. You, Alok and previous gsoc member did a lot of great work on the integration for your university and publishing that work as open source for the Plone and Gatsby communities.

But please be aware that with Gatsby Preview you are hooking into supporting the business model of Gatbsy JS the company on how they want to monetize and pay back their vc investors. Personally I am confused by asking money for the functionality of showing a preview of your content on how it will be visible on your website. I know it's inherent to the technical implementation of the frontend revolution taking place, but sounds awfully like functionality we had 15 years ago...

"What you see is wat you get" (or 'where you edit is where your content will show up' ) has been one of the unique selling points of Plone and one of the reasons why some organisations are still sticking with Plone 4 because it 'still works', (oh and they don't have the money to upgrade to Plone 5.x) and they don't like the frontend trend back to a hard split between backend 'content' editing in an admin interface and 'front end' visualisation. It does not appeal to them. With Volto as a 'fat' client we will hopefully be able to give those Plone users a migration story within Plone without losing that functionality.

To fill in my knowledge gaps about Gatsby: if I add functionality to my Plone website or re-use/expand workflow states for Gatsby to pull the pages from and can differentiate the content between 'stating' or production:

Then I can put 2 gatsbyjs generated sites in front of it with the gatsby-source-plugin you have developed for live updates: pushing the concept/staging/published content to the staging site and only 'published' content to production. Would I then have the same functionality as Gatsby's Preview is offering?

Yes. To simplify the possible GatsbyJS site project code, you would not even use different states, just two different triggers. The first trigger to build the staging site and then another one to either promote the staging to the production or building the production site.

With the proposed WebSocket support in Plone, the "staging site" would actually be node-based "gatsby develop"-server published somewhere. That could update immediately from the object events from Plone and provide live preview matching "Gatsby Preview" product.

Currently it truly sounds like that "incremental builds" for larges GatsbyJS sites will be commercial cloud service.

Essential parts for that should be open source, so I assume that somehow it could be already possible to run gatsby develop so that it writes production assets instead of development assets. And that "incremental build" actually means that long-running service and continuously synchronizing those updated assets to static file web server.

I can agree on this, and I cannot see GatsbyJS threatening Volto. But if there'd ever be need for a spin-off site with fancy one-off theme, it is now possible to do it with GatsbyJs from Volto-managed content – without touching Volto or knowing much about Plone.