Bootstrapping Volto

Hi! I've a lot of problem bootstraping Volto following this instructions. Are there updated instructions? Basically I had to add the node_module/.bin dir to path otherwise razzle is not found, and install a lot of modules by hand. This is my history (and still installing):

 2066  npm install razzle
 2067  export PATH="/tmp/myvoltoproject/node_modules/.bin:$PATH"
 2068  yarn start
 2069  npm install webpack
 2070  yarn start
 2071  npm install html-webpack-plugin
 2072  yarn start
 2073  npm install mini-css-extract-plugin
 2074  yarn start
 2077  npm install razzle-dev-utils
 2078  yarn start
 2079  npm install webpack-dev-server
 2080  yarn start
 2081  npm install @plone/volto # had to do it because yarn start complain it was missing

at the end:

$ yarn start
yarn run v1.22.5
$ razzle start
If you have issues with css make sure postcss resolves to v8.2.4.

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.

 WAIT  Compiling...

Done in 2.54s.

and nothing on the localhost:3000 port.

Maybe there were some broken thing in my setup. Re-doing by scratch, it worked. Sorry for the noise.

Note: if you are reading because you want to install Volto, a couple of things:

  • Plone must be installed with kitconcept.volto product
    Issue 1: it works but block editor not
    Issue 2: I can configure fields type (text, image, hero, etc) only the first time the object is created, later in modify I can only edit them but not change. I can delete them but not adding them back.
    In both errors, I don't see any error in console/yarn start/instance fg.
  • remember to add cors (instruction on kitconcept.volto or in this forum searching for "cors volto")

If I import profile-kitconcept.volto:default-homepage I can see the default home page, edit the fields but sidebar is empty, both in Document and in Blocks tabs.

I can see the default home page, edit the fields but sidebar is empty, both in Document and in Blocks tabs.

The Plone root is special. In "classic Plone" when you're editing the plone root you're actually editing a Document called "frontpage". Volto doesn't have the "default content item as view" feature, so you're actually really setting properties on the Plone site. If you add a block such as Image or Listing, you'll see that the "Block" sidebar is available.

Similar, if you'll add a new Page, you'll get content in both sidebar tabs.

I see the sidebar with blocks, but empty.

the blocks behaviour is enabled in page.

The title and text blocks don't have any content in the Block sidebar. Try with another block, the listing block or the Image block.

Now I got it: for every "block", Blocks has settings. That is ok, I can edit an image block.

  • It is missing the richtext block (I mean, no html visual editor)
  • I can move blocks only bottom/up, no columns

Even here the editor is missing. So maybe I should pin a particular version of volto?

You are missing the editor toolbar? Then please select some text and you will see the editor toolbar.

Yes! I did test it again and came back to correct my post. So all works, finally.

What I miss now is the columns when editing, I can arrange only fields in rows but not columns. Is there a specific product for this?

Here you go: GitHub - kitconcept/volto-blocks-grid: Volto grid blocks by kitconcept

1 Like

@tisto: Layout addons ?


It works.

Note: switching on/off/on the addon in package.json, a page created with the teaser returned an error:

Sorry, something went wrong with your request 
url is undefined

    in TeaserDefaultTemplate (at Body.jsx:14)
    in TeaserDefaultTemplate (at View.jsx:5)
    in TeaserView (at BlockRenderer.jsx:23)
    in BlockRenderer (at ObjectBrowser.jsx:85)

I think because I put an image as teaser content source instead of a page. Removing temporarily the product, deleting the block and adding the product back again to package.json fixed the problem.