Issue on setting up volto locally

_Suman_98 · January 4, 2023, 1:42pm

After cloning the plone/volto repository in github , I have ran the command yarn && yarn start . The result is shown above . The result states that it failed with errors.

Then I ran the plone backend with the help of docker . The backend runs successfully .

Then I tried to start the frontend (volto) using yarn start . Which results in compiling client with some errors but successfully complies with server part .Details of which is shown above.

After that I have tried to open http://localhost:3000/ . The result of which is shown above.

Please help me with the problem I have mentioned above .

stevepiercy · January 4, 2023, 2:41pm

Try posting the text from the console output instead of an image of the text. I can't read images with tiny blurry fonts, so I cannot help. Oh, well.

Doing so has an added benefit of reading the text in the console output, which can indicate where to look for additional information to analyze the issue.

nileshgulia1 · January 4, 2023, 3:22pm

A quick look on your first screenshot demonstrates command yarn install doesn't ran properly. Which node version are you using? I recommend using node v16.
Try to execute these commands:
rm -rf node_modules
corepack enable
yarn set version 3.2.3
yarn cache clean
yarn install

_Suman_98 · January 4, 2023, 8:24pm

As per your suggestion I have upgrade the node version to 16 and yarn to 3.2.3 and yarn is done with warnings

➤ YN0000: └ Completed in 0s 970ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 9s 631ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 23s 233ms
➤ YN0000: Done with warnings in 34s 136ms

After that I have done , yarn start
which results in

WAIT Compiling...

× Client
Compiled with some errors in 1.30m

( ) Server

× Client
Compiled with some errors in 1.30m

√ Server
Compiled successfully in 39.16s

Server-side HMR Enabled!
sswp> Handling Hot Module Reloading
Volto is running in SEAMLESS mode
Using internal proxy: http://localhost:3000 -> http://localhost:8080/Plone
Volto started at 0.0.0.0:3000
Warning: Failed prop type: Invalid prop name of type string supplied to Icon, expected object.
at Icon (E:\plone__make\volto\build\server.js:86937:3)
at App (E:\plone__make\volto\build\server.js:83442:5)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at injectIntl(Connect(App))
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Route (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:470:29)
at Switch (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:676:29)
at Route (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:470:29)
at AsyncConnect (E:\plone__make\volto\build\server.js:100046:5)
at AsyncConnectWithContext (E:\plone__make\volto\build\server.js:100172:5)
at C (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:731:37)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Router (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:99:30)
at StaticRouter (E:\plone__make\volto\node_modules\react-router\cjs\react-router.js:587:35)
at IntlProvider (E:\plone__make\volto\node_modules\react-intl\dist\components\provider.js:84:47)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone__make\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Provider (E:\plone__make\volto\node_modules\react-redux\lib\components\Provider.js:21:20)
at Provider (E:\plone__make\volto\node_modules\react-intl-redux\lib\components\Provider.js:19:20)
at CookiesProvider (E:\plone__make\volto\node_modules\react-cookie\cjs\CookiesProvider.js:52:24)
at ChunkExtractorManager (E:\plone__make\volto\node_modules@loadable\server\lib\ChunkExtractorManager.js:13:3)

please help .

_Suman_98 · January 5, 2023, 8:13am

If anyone could help , please help I got stuck here .

tiberiuichim · January 5, 2023, 8:20am

There's two processes running on the frontend. client + server. You can see that the client part failed to compile properly. Open the developer console and search for clues on errors there. I expect that you've tried to customize some stylesheet and for some reason this failed?

_Suman_98 · January 5, 2023, 10:37am

No I have not tried to customize any stylesheet . I am just trying to set up volto repository locally , simply by cloning the volto repository , then ran

yarn && yarn start

in the console .
And after that this comes in the console

Client
Compiled with some errors in 2.27m

◯ Server

Client
Compiled with some errors in 2.27m

Server

Compiled successfully in 1.10m
Server-side HMR Enabled!
sswp> Handling Hot Module Reloading
Volto is running in SEAMLESS mode
Using internal proxy: http://localhost:3000 -> http://localhost:8080/Plone
Volto started at 0.0.0.0:3000

Then when I fetch the localhost:3000 in browser this comes in .

tiberiuichim · January 5, 2023, 10:38am

Are there any relevant messages in the browser developer console?

_Suman_98 · January 5, 2023, 10:38am

Warning: Failed prop type: Invalid prop name of type string supplied to Icon, expected object.
at Icon (E:\plone\volto\build\server.js:86937:3)
at App (E:\plone\volto\build\server.js:83442:5)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at injectIntl(Connect(App))
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Route (E:\plone\volto\node_modules\react-router\cjs\react-router.js:470:29)
at Switch (E:\plone\volto\node_modules\react-router\cjs\react-router.js:676:29)
at Route (E:\plone\volto\node_modules\react-router\cjs\react-router.js:470:29)
at AsyncConnect (E:\plone\volto\build\server.js:100046:5)
at AsyncConnectWithContext (E:\plone\volto\build\server.js:100172:5)
at C (E:\plone\volto\node_modules\react-router\cjs\react-router.js:731:37)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Router (E:\plone\volto\node_modules\react-router\cjs\react-router.js:99:30)
at StaticRouter (E:\plone\volto\node_modules\react-router\cjs\react-router.js:587:35)
at IntlProvider (E:\plone\volto\node_modules\react-intl\dist\components\provider.js:84:47)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at ConnectFunction (E:\plone\volto\node_modules\react-redux\lib\components\connectAdvanced.js:233:41)
at Provider (E:\plone\volto\node_modules\react-redux\lib\components\Provider.js:21:20)
at Provider (E:\plone\volto\node_modules\react-intl-redux\lib\components\Provider.js:19:20)
at CookiesProvider (E:\plone\volto\node_modules\react-cookie\cjs\CookiesProvider.js:52:24)
at ChunkExtractorManager (E:\plone\volto\node_modules@loadable\server\lib\ChunkExtractorManager.js:13:3)

tiberiuichim · January 5, 2023, 10:39am

I should mention, also, that we don't use Windows for Volto development, not sure if that would impact your case.

_Suman_98 · January 5, 2023, 10:41am

Is linux is compatible for developing volto ???

tiberiuichim · January 5, 2023, 10:59am

I do Volto development with Linux, which I think it's easiest. Other people do Volto development with macbooks. Linux is definitely the easiest path, IMHO.

nileshgulia1 · January 6, 2023, 9:58am

That might be the issue. I haven't tried to install Volto on windows tbh. Maybe you could start a virtual machine and use a linux distro there?

_Suman_98 · January 7, 2023, 7:24pm

Hey , thank you all for helping . I have set up volto successfully on my windows machine. Thank you very much .

tiberiuichim · January 7, 2023, 8:09pm

@_Suman_98 could you give us a brief descriptions of the problems you've encountered, and how you solved them? There's other people trying Volto on windows, and they have similar issues.

rileydog · January 7, 2023, 9:06pm

Yes, I also hit a wall trying to install on windows. would appreciate a summary of your issues and how you fixed.

_Suman_98 · January 8, 2023, 12:10pm

Surely,
The problems I have faced that are shown below :

Solution to the above problems:
Install Linux on Windows with WSL , default ubuntu I have used (further details : wsl guide)
Then go to ubuntu on windows do all necessary steps for setup .
Then install node v16.19.0 (follow this guide wsl node installation).
Then check for make (command : make -v) whether it is available on the ubuntu subsystem or not .If not then install choco then through choco install make .
Then install yarn through npm ( command : npm install --global yarn).
After successful installation of yarn , run the following commands :
yarn set version 3.2.3
yarn cache clean

Then go to the project folder and run the following commands :
rm -rf node_modules
yarn cache clean
yarn && yarn start

Or , It will be better to make a fresh start by cloning the git repo and install the node modules through yarn .

I think this will be enough to start frontend (volto).

Then to start backend :
I have used docker . Install docker (guide for windows : installation guide and software link)

After successful installation and setup :
run backend ( command : docker run -it --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.0b3 ) .

I think that will probably set up the project in locally .

_Suman_98 · January 8, 2023, 2:43pm

@tiberiuichim I have written down the issues that I have faced and the details to solve it (Link : https://community.plone.org/t/issue-on-setting-up-volto-locally/16093/17)

tiberiuichim · January 9, 2023, 10:33am

Thanks! So, the big conclusion is, run Volto under WSL rather then trying to run it as Windows native. Good to know, maybe we should document this. CC @stevepiercy

stevepiercy · January 9, 2023, 11:00am

I would gladly accept a PR with the suggested changes. Here are some places that could use some touch-up.

Almost any modern operating system, including Linux, macOS, and Windows, but a UNIX-based operating system is recommended.

This statement needs to be revised. If Volto requires WSL, then we should say exactly that.

I think we still support Windows without WSL for Plone 6 with Classic UI, but I have no idea as I don't do Windows. Can someone verify?

We do not need to update https://6.docs.plone.org/volto/getting-started/install.html because it is for legacy purposes only, now that we direct people upstream to the main docs for installation.