Javascriptfiles in Plone 6

Development Plone 6 UI (Volto)
1

In Plone 5, I was able to include javascriptfiles via portal_javascripts. In Plone 6, this no longer exists in the ZMI. What is the way to integrate javascript files here?

2

You need to think "my Plone 6 is now a React app, how do I do something in a React app". So the development with React is quite different from "loading a javascript file".

If it's Javascript you wrote, just save it in your src folder, then import it from the Volto configuration and "plug" it to the relevant place. It may trigger in a block, or appExtras, or whatever.

If it's code that's out of your control, in theory, you identify the name of the Javascript npm published package that includes your code, then yarn add name_of_package, then do something with that package from the Volto code, similar to previous case.

Volto Addons training shows an example on how to use a third-party library: 4. Improve the block view – Volto Add-ons Development — Plone Training 2023 documentation

3

The code is mine. I had previously stored it under frontend/public/scripts. Of course, I can also put it under /frontend/src/customisations/components/theme/.
I need the code for the navigation, for example. I would then import it into navigation.jsx. What would such an import look like?

4

So, your old file now becomes a "Javascript module", by placing it in the /frontend/src/nav-utils.js file. Let's say it has this content:

export function myNavFunction() {
}

From somewhere you can import that function with:

import { myNavFunction } from '@package/nav-utils';

// ... do something with myNavFunction

Now, I know that you may not have the time or interest to learn React development just to make some old JS code work, but I strongly recommend that you follow some basic React development tutorials, otherwise this whole experience will be very frustrating as you'll hit a lot of problems that you won't know how to approach.

One example: you mention that your old code that you want to import was dealing with navigation. It probably did work by mutating that DOM element nodes in the browser window. Let's assume that you somehow adjust that code to make it work (note, there's no more jquery loaded, so you'd have to rewrite it for native DOM api). And then you click on a site link, the whole navigation is redrawn, the changes that your code did are no longer applied. The Volto-ish solution would be to customize the Navigation component and re-implement your requirements there, in the form of proper React jsx code and components.

5

Thanks for the tips.
You're right, that is a very fundamental change in the new Plone that I have to deal with more thoroughly.
Does anyone have a recommendation for basic React development documents?

6

I think this is the quickest to give you an idea on what React is:

Depending on our modern frontend knowledge, you may also benefit from Modern JavaScript Explained For Dinosaurs

Volto is a modern frontend. In short:

  • we code Volto using React
  • we compile that code to Javascript using Babel
  • we bundle that code into javascript files using Webpack
  • we run that code as a server + client JS bundles using Express.js and Razzle.js
  • it communicates with the Plone server using JSON provided by the plone.restapi framework
7

Note, you can still use the backend rendered version of Plone which we call now "Classic Plone". That is a perfect fit for a migration project when you do not want to re-implement the whole application in React.

Adding JavaScript should be easier than ever, especially easier than in Plone 5, as we do not use RequireJS but standard ES6+ module imports instead.
JavaScript and CSS resources are added via the resource registry.

8

Yes. My team has only looked at Classic UI Plone for migrating our existing projects, but it's been much easier to work with that ecosystem than in 5. It's not just that RequireJS is no longer needed, it's also that Bootstrap 5 and the included patternslib options have enabled us to replace a lot of tedious JS by simply using those BS/patternslib classes and data attributes.

2 Likes
9

In the meantime, I have read up on react and rewritten most of the scripts.

But what do I do if I want to integrate an external library? In my case "gsap". Or is it already included in Plone and I just have to import it correctly?

10

You add it to you package.json file, install it, import and use it in your code and use a bundler like webpack or parcel to create a JavaScript bundle which then also includes the gsoc library.

1 Like