Installation of frontend (volto)

Hello everyone,

Can anyone help me setup volto project, as I tried installing but was unsuccessful.
Especially, those with Macbook (M1) can understand my problem well.

Try making sure Docker is properly installed in your system. After that it is relatively easy, just go into the folder where you have the source code ready, open terminal and run a command "docker-compose up --build"

Cheers,
Danish arora

1 Like

What did you try? Please include links to documentation.

What did you observe? Please include text of console output, not images of text, because Why should I not upload images of code/data/errors? - Meta Stack Overflow

2 Likes

Sir @stevepiercy ,
These are the steps I took while installing volto frontend

Step 1 :

falgunpatel@Falgun-Patel ~ % npm install -g yo @plone/generator-volto

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE package: '@plone/generator-volto@6.3.0',

npm WARN EBADENGINE required: { node: '^12 || ^14 || ^16' },

npm WARN EBADENGINE current: { node: 'v18.15.0', npm: '9.6.2' }

npm WARN EBADENGINE }

npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs

npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated

npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

changed 1413 packages in 42s

141 packages are looking for funding

run `npm fund` for details

I tried installing the version 7.0.0-alpha.2 according to this post:

Note: I am using Macbook and not Windows but tried this on my system.

npm install -g yo @plone/generator-volto@7.0.0-alpha.2

npm WARN deprecated @pmcli/move-file@1.1.2: This functionality has been moved to @pmcli/fs pm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @pmcli/fs pm WARN deprecated source-map-ur100.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @pmcli/move-file@2.0.1: This functionality has been moved to @pmcli/fs npm WARN deprecated urix@0.1.0: Please see https: //github.com/lydell/urix#deprecated
npm WARN deprecated resolve-ur100.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

changed 1413 packages in 11s
141 packages are looking for funding run 'npm fund' for details [falgunpatel@Falgun-Patel ~ % yo @plone/volto
Getting latest Volto version
Using latest released Volto version: 16.18.0
Retrieving Volto's yarn.lock
[? Project name (e.g. my-volto-project) myvoltoproject
.

Why is it trying to install version 6.3.0 when it is supposed to install latest version?
And it was installed, but then

falgunpatel@Falgun-Patel myvoltoproject % yarn start
Internal Error: myvoltoproject@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
at OR.getCandidates (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:435:5209) at Bd.getCandidates (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:391:1281)
at /Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:439:7764 at g (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:390:11154) at c (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:439:7744)
at async Promise.allSettled (index 0)
at async ho (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:390:10446)
at async/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:439:8292 at async di.startProgressPromise (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:390:48066)
at async ze.resolveEverything (/Users/falgunpatel/myvoltoproject/.yarn/releases/yarn-3.2.3.cjs:439:6285)
[falgunpatel@Falgun-Patel myvoltoproject % yarn install
= YNo002: | Resolution Stepm:16.18.0 doesn't provide @typescript-eslint/estint-plugin (pBab63), requested by eslint-config-react-a
pp
• YN0002: @plone/volto@pm:16.18.0 doesn't provide @typescript-eslint/parser (pc0322), requested by eslint-config-react-app
VNOOLO •

I tried installing yarn lock files, using yarn install but then too it showed following error.

falgunpatel@Falgun-Patel myvoltoproject % yarn start
Compiling..
• Client
compiling (0%)
O Server
node:internal/crvoto/hash:71
this[kHandle] = new _Hash (algorithm, xofLen);
Error: error: 0308010C:digital envelope routines: :unsupported
at new Hash (node:internal/crpto/hash:71:19)
at Object.createHash (node:crypto: 133:10)
at module.exports (/Users/falgunpatel/myvoltoproject/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash(/Users/falgunpatel/myvoltoproject/node_modules/webpack/lib/NormalModule.js:417:16 at handleParseError/Users/falgunpatel/myvoltoproject/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/falgunpatel/myvoltoproject/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/falgunpatel/myvoltoproject/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/falaunpatel/mvvoltoproject/node modules/loader-runner/lib/LoaderRunner.is: 373:3 at iterateNormalLoaders(/Users/falgunpatel/myvoltoproject/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. <anonymous> (/Users/falgunpatel/myvoltoproject/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/falgunpatel/myvoltoproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/falgunpatel/myvoltoproject/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/falgunpatel/myvoltoproject/node_modules/graceful-fs/graceful-fs.js:123:16 at FSRedCallback.readFileAfterClose [as oncombletel (node:internal/fs/read file context:68:3) ‹
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines' reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'
Node.js v18.15.0

Then i changed the node version with nvm install 16 , nvm use 16. and tried installing the default file and then installing the yarn files and then starting it. It worked then.

falgunpatel@Falgun-Patel ~ % nvm use 16                              
Now using node v16.19.1 (npm v8.19.3)
falgunpatel@Falgun-Patel ~ % npm install -g yo @plone/generator-volto
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

changed 1413 packages, and audited 1414 packages in 33s

141 packages are looking for funding
  run `npm fund` for details

25 vulnerabilities (8 moderate, 13 high, 4 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
falgunpatel@Falgun-Patel ~ % yo @plone/volto                   
Getting latest Volto version
Error @plone/volto 

undefined
falgunpatel@Falgun-Patel ~ % yo @plone/volto
Getting latest Volto version
Error @plone/volto 

undefined
falgunpatel@Falgun-Patel ~ % yo @plone/volto
Getting latest Volto version
Using latest released Volto version: 16.18.0
Retrieving Volto's yarn.lock
? Project name (e.g. my-volto-project) (falgunpatel) 

Now I have installed it correctly, and completed most of the training with it.

But I also face error while changing the font style to any other font , volto starts to compile with error.
I tried it with different font styles. But then I have to remove fonts to make it work correctly and Guess what? It worked !

@fontName : 'Comic Sans MS';

I will complete my training soon enough and will ask for your help if need be.

Thank You.

The generator is a generic utility, it doesn't "hardcode" Volto's version. You need to treat it as a separate command, so you need to pass it some arguments. In this case, it's the canary argument

1 Like

Sir @tiberiuichim,
I tried this out and is working fine for now.

Thank you for helping me out, I really appreciate it. :slight_smile: