Bootstrapping Volto

yurj · May 12, 2021, 4:57pm

https://docs.voltocms.com/getting-started/install/

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.
See: https://razzlejs.org/getting-started#common-problems

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.

yurj · May 13, 2021, 9:17am

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")

yurj · May 13, 2021, 9:40am

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.

tiberiuichim · May 13, 2021, 10:09am

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.

yurj · May 13, 2021, 11:09am

I see the sidebar with blocks, but empty.

the blocks behaviour is enabled in page.

tiberiuichim · May 13, 2021, 11:39am

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.

yurj · May 13, 2021, 1:32pm

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

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

yurj · May 16, 2021, 9:01am

https://volto.kitconcept.com/front-page/edit

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

ksuess · May 16, 2021, 9:11am

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

yurj · May 16, 2021, 9:32am

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

yurj · May 16, 2021, 11:53am

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?

tisto · May 16, 2021, 12:50pm

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

tiberiuichim · May 16, 2021, 1:27pm

@tisto: Layout addons ?

yurj · May 17, 2021, 10:31am

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.