I'm learning Symfony, following a tuto. Problem is, it is with Symfony5 and i'm using Symfony6.
The tuto says to create an assets folder in public directory, which I did :
When I use Twig to call my bootstrap.css like this :
<link href="{{ assets('assets/css/bootstrap.min.css' )}}" rel="stylesheet">
I get this error :
An exception has been thrown during the rendering of a template ("Asset manifest file "/Applications/MAMP/htdocs/laboutiquefr/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
My questions are :
How do I fix this manifest.json error ?
I see an assets folder with Symfony6, which is not on the tuto with Symfony5. Should I use this folder instead ?
Thank you very much.
You need to build asset when updating css/js/images by using the command:
yarn encore dev --watch when using yarn or npm run watch when using npm.
This should build your assets (and create a manifest.json referencing those assets).
Related
Not Loading CSS File In Laravel From public folder
i have all the css file in public folder and i also link them to my index but the css not working.
Try using PHP built-in webserver instead of artisan server
php -S localhost:8000 -t public/ (run this command in the root of your Laravel project).
Also, you need to run npm install && npm run dev so that the default CSS and JS will be compiled. (Laravel documentation)
You can access the public folder using asset (). Let's assume that there is a template folder under Public and a style.css file in this folder. If you use it as follows, your problem will be solved.
<link rel="stylesheet" href="{{ asset('template/') }}/style.css">
I've just done a fresh install of the latest Symfony version. Inside my templates folder I've created a new folder called website which contains a base.html.twig and a home.html.twig.
File structure: templates/website/base.html.twig
Inside my public directory I've created the following css/app.css. Now in my base I've done:
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
Inside my stylesheet I'm just setting the body background colour to red so I know it works. For whatever reason it isn't loading my css. When I view source it appears as:
<link rel="stylesheet" href="/css/app.css" type="text/css">
and clicking the href I just get a Symfony 404. I cannot figure out why it isn't loading my static CSS file.
I don't want to use Symfony Encore as thats overcomplicating things for my project. I have also tried assets:install command and nothing installed or changed.
UPDATE:
I installed and done a basic setup with Symfony Encore in the hope I could at least get some CSS working. Still get the exact same issue.
If you want to use the asset funtion you have to install the component first with the following command:
composer require symfony/asset
That is really all there is to it if you do not wish to use webpack encore.
Optional: If you happen to use PHPStorm with the Symfony plugin, go to settings > symfony and change Web Directory from app to public for the new directory that Symfony 4 uses. This gives you all the autocomplete goodness and your references will work.
You should store your static files inside the assets directory at the root of your project. So just place the css-folder with the app.css-file in <root>/assets/css/app.css
Source: https://symfony.com/doc/current/best_practices/web-assets.html
I tried to find a similar case to mine but didn't succeed.
Here is the issue. I followed Symfony documentation to add Bootstrap to my project.
I indeed get a bootstrap folder in a new folder called "nodes_modules".
The thing is i can't find a global.scss file anywhere (as mentioned in the tutorial) then i don't know where to put the following command:
#import "~bootstrap/scss/bootstrap";
Do i have to create this file or does it exist somewhere in my Symfony project?
Thank you in advance.
Yes, global is your application scss file, it can be named different on you wish. You can refer this documentation in order to see how to configure it (it is app.scss in the example)
I understood what was wrong there! So if you are creating a Symfony 4.1 project on mac and you don't know where to import your bootstrap theme(s) since you don't have any assets folder here is the solution:
To have the assets folder you have to install the webpack "encore".
Please make sure you have node.js and yarn installed before that.
Then just run the following commands inside your root project directory:
composer require symfony/webpack-encore-pack
yarn install
You might have now an "assets" folder inside your project with an assets/css/app.css file and a assets/js/app.js file.
Thank you for your time ScayTrase.
According to Symfony Best Practices,
Store your assets in the assets/ directory at the root of your project.
But currently, I don't have this folder created and if I create it, I got the error telling me that ressources can't be found.
I tried composer require webassets , but don't working.
Anyone have the solution ?
Regards
Placing assets folder in root directory is best practice. Reason that root directory cannot be accessible from outside. You should try Symfony's Webpack Encore plugin. It compiles your minimized and compressed assets into public folder so they can never be shown as original.
If that is not fit your interest just put your whole assets folder into public directory.
You try following command.
$ composer require encore
$ yarn install
May be good to refer to here.
http://symfony.com/doc/current/frontend/encore/installation.html
Enable the encore composer require encore
update yarn yarn install
I'm trying to get Polymer 0.9 working with Meteor however Meteor is spitting out:
While building the application:
bower_components/polymer/polymer-micro.html:9: bad formatting in HTML template
bower_components/polymer/polymer-mini.html:9: bad formatting in HTML template
bower_components/polymer/polymer.html:17: bad formatting in HTML template
=> Your application has errors. Waiting for file change.
Is there any way to resolve the issue?
You should place the components in public/ at the root of your project.
I've had the same problems. I can't tell if you're using vulcanize, but I assume so.
What fixed me was:
Install Bower: npm install -g bower (bower.org)
Create a file in the root of the project called .bowerrc
Then, you want to tell bower where to install polymer components.
In that .bowerrc put:
{
"directory": "public/bower_components"
}
Now, use bower to install polymer
bower install --save Polymer/polymer#^1.2.0
If you're using other parts of polymer like paper and iron, you'll repeat the bower install step for those as well.
Then attempt starting up meteor again.