demo icon indicating copy to clipboard operation
demo copied to clipboard

The style are not showing in browser

Open alexbotnaru opened this issue 2 years ago • 5 comments

I installed the application using the command : symfony new --demo my_project. It seems to work, but the styles and maybe the scripts are not working in browser, so the app looks like this: image I tried to run some commands like : composer install, composer require symfony/webpack-encore-bundle, npm install, npm run build but the problem persists. Any help?

alexbotnaru avatar Nov 23 '21 14:11 alexbotnaru

Are there any errors reported in your browser console ?

stof avatar Nov 23 '21 14:11 stof

Yes image

alexbotnaru avatar Nov 23 '21 17:11 alexbotnaru

Hm, I can't reproduce this... my steps were:

  1. symfony new --demo my_project/
  2. cd my_project/
  3. symfony serve
  4. Open https://127.0.0.1:8000/

Styles are OK to me after this. Do you use the latest version of Symfony CLI? You can check by executing symfony self:update. If yes, what browser and OS do you use? What browser version? It may help I think

bocharsky-bw avatar Nov 23 '21 19:11 bocharsky-bw

yeah, so I opened the project in Microsoft Edge and everythink works properly. I dont know why in Google Chrome i get those errors, as I have the last version of it (96.0.4664.45 ). Anyway, thanks a lot!

alexbotnaru avatar Nov 23 '21 20:11 alexbotnaru

@alexbotnaru, Is it resolved?

seb-jean avatar Mar 15 '22 10:03 seb-jean

This is still an issue. I just installed it now for the third time in a clean environment on a virtual machine.

  • downloaded the newest version today
  • Win 10 prof
  • xampp (8.2.0)
  • composer installed (2.5.5)
  • demo installed with "composer create-project symfony/symfony-demo"
  • git installed by composer during the process
  • result in edge AND chrome: css missing
  • "symfony serve" doesn't work either
  • used xampps apache server

It's hard to tell my students, that they need to install a node.js Webserver(!!!) and paket Manager npm/yarn to fix this issue. :-/ Any idea how to solve it?

acsig avatar Mar 28 '23 14:03 acsig

Try to run only these commands:

composer create-project symfony/symfony-demo
cd symfony-demo
symfony serve

Then browse any page, and tell us the error logs that you see in the terminal that is running symfony serve. Thanks.

javiereguiluz avatar Mar 28 '23 14:03 javiereguiluz

Looks like I found the problem:

  • I hadn't installed the symfony-cli binaries, thought symfoy/console is the same => MY FAULT! Sorry.
  • after running the demo with symfony serve it looked fine
  • running it in the apache-environment from XAMPP NOT in the root-directory causes problems
  • some assets are linked to http://localhost/build/*, some others are linked to the subfolfers the demo is running in (which is a typical way of installing it in a teaching-environment: http://localhost/ism/smyfony-demo/public/*
  • I still don't know where to change that
  • the blogpost about the demo2 (https://symfony.com/blog/symfony-demo-2-0-introduces-support-for-symfony-6-0) does only implicitly mention, you have to install symfony-cli (via "best practises) and it also does not mention you have to run it in a root directory. Maybe this should be pointed out more clearly.

different_path

Maybe consider the following: The symfony demo is intended to learn and teach symfony, to introduce people to symfony. After they installed XAMPP and composer, they're told "composer composes (a) symfony for you" BUT THEN i have to ask them to:

  • install another webserver (node.js) we actually don't use, because we only need:
  • the included NPM package manager to
  • install ANOTHER package Manager called YARN
  • this runs for several minutes and maps ca. 30k dependencies... WHY?
  • Finally please install a 4th "installer" scoop to install symfony-cli which can't be installed by composer
  • because scoop doesn't do the whole job, edit the path variable of your system manually.

=> after that nobody is convinced anymore, that symfony and composer is a great, finetuned combination. :-/

Hope I could open your eyes a bit for problems some people might run into.

acsig avatar Mar 29 '23 09:03 acsig

Running a website in a subdirectory requires configuring webpack-encore to make it aware of that subdirectory. The committed files in this repo use a configuration expecting a deployment at the root.

  • install another webserver (node.js)

node.js is not a webserver. It is a language runtime.

And if you just want to run the demo and not rebuild its assets, you don't need to install node, yarn and the JS dependencies. That's precisely the reason why the output of the asset building is committed in the repo instead of being ignored (as is done in most projects). You need node.js if you want to run the asset building pipeline, because this pipeline relies on frontend tooling that is implemented in JS rather than in PHP.

stof avatar Mar 29 '23 09:03 stof

@acsig I think there's been a misunderstanding. If you check the README of this repository, you'll see that to use this project to learn and teach Symfony, you only have to do this:

(1) Browse https://symfony.com/download (2) Install "Symfony CLI" according to your operating system (3) Open a terminal window (4) Run this command: symfony new --demo my_project (5) Run this command: cd my_project/ (6) Run this command: symfony serve (or symfony serve -d)

That's all you need to have this project working.

You don't need:

  • Node
  • npm
  • yarn
  • XAMPP
  • etc.

You don't have to install anything else. You don't have to run any commands to build assets. You don't need to configure any options.

I hope it's more clear now.

javiereguiluz avatar Mar 29 '23 09:03 javiereguiluz

Let's close this one as hopefully fixed according to the latest comments. Thanks.

javiereguiluz avatar Apr 14 '23 14:04 javiereguiluz