Assets: CSS & JavaScript

Even astronauts - who generally spend their time staring into the black absyss - demand a site that is less ugly than this! Let's fix that!

If you download the course code from the page that you're watching this video on right now, inside the zip file, you'll find a start/ directory. And inside that, you'll see the same tutorial/ directory that I have here. And inside that... I've created a new base.html.twig. Copy that and overwrite our version in templates/:

<!doctype html>
<html lang="en">
<head>
<title>{% block title %}Welcome to the SpaceBar{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
<a style="margin-left: 75px;" class="navbar-brand space-brand" href="#">The Space Bar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a style="color: #fff;" class="nav-link" href="#">Local Asteroids</a>
</li>
<li class="nav-item">
<a style="color: #fff;" class="nav-link" href="#">Weather</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown" style="margin-right: 75px;">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="nav-profile-img rounded-circle" src="images/astronaut-profile.png">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Create Post</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
{% block body %}{% endblock %}
<footer class="footer">
<div class="container text-center">
<span class="text-muted">Made with <i class="fa fa-heart" style="color: red;"></i> by the guys and gals at <a href="https://knpuniversity.com">KnpUniversity</a></span>
</div>
</footer>
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
$('.dropdown-toggle').dropdown();
</script>
{% endblock %}
</body>
</html>

On a technical level, this is basically the same as before: it has the same blocks: title stylesheets, body and javascripts at the bottom. But now, we have a nice HTML layout that's styled with Bootstrap.

If you refresh, it should look better. Woh! No change! Weird! Actually... this is more weird than you might think. Find your terminal and remove the var/cache/dev directory:

rm -rf var/cache/dev/*

What the heck is this? Internally, Symfony caches things in this directory. And... you normally don't need to think about this at all: Symfony is smart enough during development to automatically rebuild this cache whenever necessary. So... why am I manually clearing it? Well... because we copied my file... and because its "last modified" date is older than our original base.html.twig, Twig gets confused and thinks that the template was not updated. Seriously, this is not something to worry about in any other situation.

Referencing CSS Files

And when we refresh... there it is! Ok, it's still pretty ugly. That's because we're missing some CSS files!

In the tutorial/ directory, I've also prepped some css/, fonts/ and images/. All of these files need to be accessed by the user's browser, and that means they must live inside public/. Open that directory and paste them there.

By the way, Symfony has an awesome tool called Webpack Encore that helps process, combine, minify and generally do amazing things with your CSS and JS files. We are going to talk about Webpack Encore... but in a different tutorial. For now, let's get things setup with normal, static files.

The two CSS files we want to include are font-awesome.css and styles.css. And we don't need to do anything complex or special! In base.html.twig, find the stylesheets block and add a link tag.

But wait, why exactly are we adding the link tag inside the stylesheets block? Is that important? Well, technically... it doesn't matter: a link tag can live anywhere in head. But later, we might want to add additional CSS files on specific pages. By putting the link tags inside this block, we'll have more flexibility to do that. Don't worry: we're going to see an example of this with a JavaScript file soon.

So... what path should we use? Since public/ is the document root, it should just be /css/font-awesome.css:

<!doctype html>
<html lang="en">
<head>
... lines 5 - 8
{% block stylesheets %}
... line 10
<link rel="stylesheet" href="/css/font-awesome.css">
... line 12
{% endblock %}
</head>
... lines 15 - 67
</html>

Do the same thing for the other file: /css/styles.css:

<!doctype html>
<html lang="en">
<head>
... lines 5 - 8
{% block stylesheets %}
... line 10
<link rel="stylesheet" href="/css/font-awesome.css">
<link rel="stylesheet" href="/css/styles.css">
{% endblock %}
</head>
... lines 15 - 67
</html>

It's that simple! Refresh! Still not perfect, but much better!

The Not-So-Mystical asset Function

And now I'm going to slightly complicate things. Go back into PhpStorm's Preferences, search for "Symfony" and find the "Symfony" plugin. Change the "web" directory to public - it was called web in Symfony 3.

This is not required, but it will give us more auto-completion when working with assets. Delete the "font-awesome" path, re-type it, and hit tab to auto-complete:

<!doctype html>
<html lang="en">
<head>
... lines 5 - 8
{% block stylesheets %}
... line 10
<link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
... line 12
{% endblock %}
</head>
... lines 15 - 67
</html>

Woh! It wrapped the path in a Twig asset() function! Do the same thing below for styles.css:

<!doctype html>
<html lang="en">
<head>
... lines 5 - 8
{% block stylesheets %}
... line 10
<link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
{% endblock %}
</head>
... lines 15 - 67
</html>

Here's the deal: whenever you link to a static asset - CSS, JS or images - you should wrap the path in this asset() function. But... it's not really that important. In fact, right now, it doesn't do anything: it will print the same path as before. But! In the future, the asset() function will give us more flexibility to version our assets or store them on a CDN.

In other words: don't worry about it too much, but do remember to use it!

Installing the asset Component

Actually, the asset() function does do something immediately - it breaks our site! Refresh! Ah!

The asset() function comes from a part of Symfony that we don't have installed yet. Fix that by running:

composer require asset

This installs the symfony/asset component. And as soon as Composer is done... we can refresh, and it works! To prove that the asset() function isn't doing anything magic, you can look at the link tag in the HTML source: it's the same boring /css/styles.css.

There is one other spot where we need to use asset(). In the layout, search for img. Ah, an img tag! Remove the src and re-type astronaut-profile:

<!doctype html>
<html lang="en">
... lines 3 - 15
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
... lines 18 - 21
<div class="collapse navbar-collapse" id="navbarNavDropdown">
... lines 23 - 34
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown" style="margin-right: 75px;">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="nav-profile-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
</a>
... lines 40 - 44
</li>
</ul>
</div>
</nav>
... lines 49 - 66
</body>
</html>

Perfect! Refresh and enjoy our new avatar on the user menu. There's a lot of hardcoded data, but we'll make this dynamic over time.

Styling the Article Page

The layout is looking great! But the inside of the page... yea... that's still pretty terrible. Back in the tutorial/ directory, there is also an article.html.twig file. Don't copy this entire file - just copy its contents. Close it and open show.html.twig. Paste the new code at the top of the body block:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
<div class="row">
<div class="col-sm-12">
<img class="show-article-img" src="{{ asset('images/asteroid.jpeg') }}">
<div class="show-article-title-container d-inline-block pl-3 align-middle">
<span class="show-article-title ">Why do Asteroids Taste Like Bacon?</span>
<br>
<span class="align-left article-details"><img class="article-author-img rounded-circle" src="{{ asset('images/alien-profile.png') }}"> Mike Ferengi </span>
<span class="pl-2 article-details"> 3 hours ago</span>
<span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="article-text">
<p>Spicy jalapeno bacon ipsum dolor amet veniam shank in dolore. Ham hock nisi landjaeger cow,
lorem proident beef ribs aute enim veniam ut cillum pork chuck picanha. Dolore reprehenderit
labore minim pork belly spare ribs cupim short loin in. Elit exercitation eiusmod dolore cow
turkey shank eu pork belly meatball non cupim.</p>
<p>Laboris beef ribs fatback fugiat eiusmod jowl kielbasa alcatra dolore velit ea ball tip. Pariatur
laboris sunt venison, et laborum dolore minim non meatball. Shankle eu flank aliqua shoulder,
capicola biltong frankfurter boudin cupim officia. Exercitation fugiat consectetur ham. Adipisicing
picanha shank et filet mignon pork belly ut ullamco. Irure velit turducken ground round doner incididunt
occaecat lorem meatball prosciutto quis strip steak.</p>
<p>Meatball adipisicing ribeye bacon strip steak eu. Consectetur ham hock pork hamburger enim strip steak
mollit quis officia meatloaf tri-tip swine. Cow ut reprehenderit, buffalo incididunt in filet mignon
strip steak pork belly aliquip capicola officia. Labore deserunt esse chicken lorem shoulder tail consectetur
cow est ribeye adipisicing. Pig hamburger pork belly enim. Do porchetta minim capicola irure pancetta chuck
fugiat.</p>
<p>Sausage tenderloin officia jerky nostrud. Laborum elit pastrami non, pig kevin buffalo minim ex quis. Pork belly
pork chop officia anim. Irure tempor leberkas kevin adipisicing cupidatat qui buffalo ham aliqua pork belly
exercitation eiusmod. Exercitation incididunt rump laborum, t-bone short ribs buffalo ut shankle pork chop
bresaola shoulder burgdoggen fugiat. Adipisicing nostrud chicken consequat beef ribs, quis filet mignon do.
Prosciutto capicola mollit shankle aliquip do dolore hamburger brisket turducken eu.</p>
<p>Do mollit deserunt prosciutto laborum. Duis sint tongue quis nisi. Capicola qui beef ribs dolore pariatur.
Minim strip steak fugiat nisi est, meatloaf pig aute. Swine rump turducken nulla sausage. Reprehenderit pork
belly tongue alcatra, shoulder excepteur in beef bresaola duis ham bacon eiusmod. Doner drumstick short loin,
adipisicing cow cillum tenderloin.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="share-icons mb-5"><span class="pr-1">Share:</span> <i class="pr-1 fa fa-facebook-square"></i><i class="pr-1 fa fa-twitter-square"></i><i class="pr-1 fa fa-reddit-square"></i><i class="pr-1 fa fa-share-alt-square"></i></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3><i class="pr-3 fa fa-comment"></i>10 Comments</h3>
<hr>
<div class="row mb-5">
<div class="col-sm-12">
<img class="comment-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
<div class="comment-container d-inline-block pl-3 align-top">
<span class="commenter-name">Amy Oort</span>
<div class="form-group">
<textarea class="form-control comment-form" id="articleText" rows="1"></textarea>
</div>
<button type="submit" class="btn btn-info">Comment</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img class="comment-img rounded-circle" src="{{ asset('images/alien-profile.png') }}">
<div class="comment-container d-inline-block pl-3 align-top">
<span class="commenter-name">Mike Ferengi</span>
<br>
<span class="comment"> Now would this be apple wood smoked bacon? Or traditional bacon - IMHO it makes a difference.</span>
<p><a href="#">Reply</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h1>{{ title }}</h1>
... lines 99 - 122

Check it out in your browser. Yep! It looks cool... but all of this info is hardcoded. I mean, that article name is just static text.

Let's take the dynamic code that we have at the bottom and work it into the new HTML. For the title, use {{ title }}:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
<div class="row">
<div class="col-sm-12">
... line 13
<div class="show-article-title-container d-inline-block pl-3 align-middle">
<span class="show-article-title ">{{ title }}</span>
... lines 16 - 19
</div>
</div>
</div>
... lines 23 - 94
</div>
</div>
</div>
</div>
{% endblock %}

Below, it prints the number of comments. Replace that with {{ comments|length }}:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
... lines 11 - 60
<div class="row">
<div class="col-sm-12">
<h3><i class="pr-3 fa fa-comment"></i>{{ comments|length }} Comments</h3>
... lines 64 - 92
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

Oh, and at the bottom, there is a comment box and one actual comment. Let's find this and... add a loop! For comment in comments on top, and endfor at the bottom. For the actual comment, use {{ comment }}:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
... lines 11 - 60
<div class="row">
<div class="col-sm-12">
... lines 63 - 78
{% for comment in comments %}
<div class="row">
<div class="col-sm-12">
... line 82
<div class="comment-container d-inline-block pl-3 align-top">
... lines 84 - 85
<span class="comment"> {{ comment }}</span>
... line 87
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

Delete the old code from the bottom... oh, but don't delete the endblock:

... lines 1 - 4
{% block body %}
<div class="container">
... lines 8 - 97
</div>
{% endblock %}

Let's try it - refresh! It looks awesome! A bunch of things are still hardcoded, but this is much better.

It's time to make our homepage less ugly and learn about the second job of routing: route generation for linking.

Leave a comment!

  • 2018-09-18 Victor Bocharsky

    Hey Student,

    You have a single quote after "{{ blog.picture }}", I suppose that should be removed ;)

    Cheers!

  • 2018-09-17 Student

    Hi Guys,
    Here how I can use assets <img src="/theme/front/images/posts/{{ blog.picture }}') }}">
    I have this in for []
    Thanks.

  • 2018-09-17 Victor Bocharsky

    Hey Student!

    Good question! Here's how this image will look like with Twig asset() function:


    <img src="{{ asset('theme/front/images/posts/' ~ blog.picture) }}"/>

    So as you can see, you need to get rid of curly braces inside twig expressions, and that tilda char ("~") is the same as dot in PHP files, i.e. it's just a concatenation operator.

    Cheers!

  • 2018-09-17 Student

    Hi all,
    Exp. blog.picture value is "sample.jpg", how I can here use assets()
    <img src="theme/front/images/posts/{{ blog.picture }}"/>
    Thanks.

  • 2018-07-23 weaverryan

    Hey Szklenár Ferenc!

    Ah! I'm so happy to hear that! The further you get into Symfony, the more rewarding it will be :).

    So, funny story about that error. I caused it :). We recently made a change to a recipe (I approved it) for one of the core Symfony packages. It had an unintended consequence, and you're seeing it! Basically, the manifest.json file is related to Webpack Encore: a tool in the Symfony world that we're not talking about in this tutorial (but we DO have a tutorial on Encore, and Encore is great!). By default, because website-skeleton installs Encore, Encore requires this file to be present. I think we're going to remove Encore by default (https://github.com/symfony/..., which will solve this problem. Later, when you install Encore, you will of course go through all the steps needed, which will ultimately create this required manifest.json file.

    The fix is this:


    composer remove encore

    That will remove the package & the configuration files that are causing this error. Later, when you're ready to use Encore, you can just reinstall it, follow the docs and... boom! You're good to go :).

    Let me know if this helps!

    Cheers!

  • 2018-07-20 Szklenár Ferenc

    Hi! A big thanks for this tutorial i love symfony so much! This is THE framework i was looking for.
    But i have a problem in this chapter. I was looking for a solution but not yet solved.
    I do exactly the same that you in the tutorial but i have an error message.
    I installed Symfony 4.1 website-skeleton and this is the message i get: "An exception has been thrown during the rendering of a template ("Asset manifest file "/Applications/MAMP/htdocs/Github/php-symfony-practice/public/build/manifest.json" does not exist.")."
    Any advice?

  • 2018-06-27 Victor Bocharsky

    Hey Joni,

    Thank *you*! If you're talking about start/ and finish/ directories with the code from this screencast - you can find "Download" button in the top right corner of this page, then see "Course code" link. But this feature is available to our subscribers or course owners only. If you don't have a subscription - you can find the start code in our public repo, see https://github.com/knpunive...

    Let me know if I understand you wrong.

    Cheers!

  • 2018-06-26 Joni

    Hi, first thanks for the great tutorial. But where i can get the Demo HTML / CSS Files? I can't find a download link.
    Thanks

  • 2018-06-01 Diego Aguiar

    Yeah, it sounds like a problem with your web server configuration, make sure that it's pointing to your app's public folder

  • 2018-05-31 Yani Oz

    Hi Diego,

    I get a 404 ressource not found. Since it works with the built in server it’s definitely because the ressource dosen’t exist in the instanciated container or is not linked to public directory. I’m also new to docker if i sound confused it is because i am ^^ I guess i have to figure out the way to build the container copying that directory

  • 2018-05-30 Diego Aguiar

    Hey Yani Oz

    Can you tell us what error/problems are you facing?

  • 2018-05-30 Yani Oz

    Hi guys ! First, thanks for the great tutorials you offer here !
    I'm using docker with nginx... It works fine when i use the sf built in server. I guess it has something to do with my docker volumes conf, but i understand docker is not the subject here. Anyway i'll let you know when i find a solution, it may be usefull for others using docker. In the meantime if someone has any insight, he/she/it is welcome :)

  • 2018-03-09 Eugene Chabanov

    For me auto completion wasn't working until in symfony settings I changed the "Web directory" to "the_spacebar/public".

  • 2018-02-15 weaverryan

    Hey Jay Kay!

    Just to make sure, you're using PhpStorm, right? So, there is *one* setting that could be causing this problem:

    1) Make sure you have the Symfony plugin installed *and* enabled: https://gist.github.com/wea...
    2) When enabling the plugin (second screenshot above), there is a setting called "Web directory". Make sure to change this to public, because that is the name of the public directory in Symfony 4.

    Let me know if that helps!

    Cheers!

  • 2018-02-15 Jay Kay

    Can't got <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}"> from <link rel="stylesheet" href="/css/font-awesome.css"> after presing "TAB" button. "Emmet" doesn't work. Please, help me!

  • 2018-02-01 JC

    Hi!

    No, I don't have any special setups. I'm on Windows 10 Education, no VM. So, I continue developing on Symfony and wamp. If you want some extra information about my system, I would be happy to help.
    Sorry for not being able to give you more elements so you can figure out what the issue is.

    Thank you for your time!

  • 2018-01-31 weaverryan

    Hey @JC!

    I am absolutely *stumped*! I was also wondering if there was some kind of weird permissions issue on the CSS files that made them not readable by the web server. But, if that were true, then creating a new "foo.txt" file *should* have worked (but it did not). I see your on Windows, do you have any other special setups? Are you running a VM? At this point, I would say - if you've got it working with wamp, use that. I've never seen an issue before with the built-in PHP web server. I wish we could figure it out - I'm super curious!

    Cheers!

  • 2018-01-31 JC

    I think I remember you said it was weird, yes ;-)
    And I'm sorry to say that but none of these tries succeeded.

    1) When I run ' php -S 127.0.0.1:8000 public/index.php', the console displays a message saying "Document root is E:\Users\Jean-Christophe\Documents\Développement\Symfony\ProjetSymfony", so not 'public/' ? And it doesn't work : css not loading, and if I go to 'http://localhost:8000/css/font-awesome.css', it's a 404 but not the same (No route found for "GET /css/font-awesome.css").

    2)Same error as when I run the built-in server using server:run from the project root directory.

  • 2018-01-31 weaverryan

    Yo JC!

    Yea! Fast debugging - awesome :). Did I mention how weird this is? :D

    The built-in web server is just a small wrapper around some core PHP functionality. So, let's just try to use *that* directly, instead of through Symfony. In other words, try this:

    1) From the root of your project, run: php -S 127.0.0.1:8000 public/index.php. This should start a web server where public/ is the document root. But.... so should bin/console server:run... so we'll see if this works :).

    2) If it does *not* work, try this slightly different option. First, move *into* the public/ directory at the command line, then simply run php -S 127.0.0.1:8000. When you don't pass a path after, it starts a server whose document root is your *current* directory (so, public).

    Let me know if either of those work. I just can't think of why the build-in web server would not work. But, it's weird enough that, yea, it *is* possible that there's some edge-case bug that's affecting your machine :).

    Cheers!

  • 2018-01-31 JC

    Hey weaverryan

    1)
    I have already tried to stop and restart several times with no changes. I've just tried once more, indeed this doesn't make a difference.
    Using the port 9005 instead of 8000 results in the same issue : "The requested resource /css/styles.css was not found on this server"

    2)
    I can't access to the "foo.txt" file. The error is still a 404.

    I tried the application using wamp, it works fine. I think it just confirms that there is an issue with the built-in server.

    Thank you for your help !

  • 2018-01-31 weaverryan

    Hey JC!

    Wow, this is *super* weird! You've done a really good job debugging. So, here's what we know:

    A) In the final HTML, your paths look perfect: <link rel="stylesheet" href="/css/font-awesome.css">

    B) You're using the build-in PHP web server, which *should* be using public/ as the document root.

    C) Your CSS files are definitely in the correct place.

    Fortunately, this means that we can rule out any Symfony weirdness or cache issues: this is simply a case of our web server *not* seeing some static files. And I recognize the "The requested resource was not found on this server" message: that *indeed* comes from the built-in PHP web server.

    So... hmmm. Let me ask a few questions and make a few suggestions:

    1) If you haven't already, try stopping and restarting the built-in web server. This should *not* make a difference, but it could. I'm also wondering if you may possibly have the PHP web server running in some *other* directory - i.e. not this project. To be totally sure, you could try running the web server on a different port. Move into your project, and run: php bin/console server:run localhost:9005. Then, try going to http://localhost:9005/css/font-awesome.css.

    2) Try creating a "foo.txt" file directly in public/. You should be able to access this via http://localhost:8000/foo.txt. Can you see it? Or is it a 404?

    Let me know! I hope one of these suggestions will give us a clue :).

    Cheers!

  • 2018-01-31 JC

    Hey,

    No, I am on the dev environment. I already cleared the cache but I have just cleared again and nothing changes : still no css, nor images. If you don't mind you can have a look at the tree in PhpStorm. Everything seems OK to me.

    https://image.noelshack.com...

  • 2018-01-30 Diego Aguiar

    Hey @JC

    I believe you are hitting prod environment, can you see the profiler bar at the bottom of the page? If you can, it means that you are on production. You can change it by opening ".env" file at the root of your project, and changing the value of "APP_ENV" variable to "dev"
    If that's not the case, maybe you just need to clear the cache, but let's play agressive and delete the entire folder inside "var/cache/dev"

    Cheers!

  • 2018-01-30 JC

    Thank you for answering. I use Symfony built-in server. The lines refering to the CSS in 'base.html.twig' are these :

    {% block stylesheets %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn..." integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    {% endblock %}

    In the source code, it seems to be alright, I can read this :
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/styles.css">

    I put the files in public/css/
    I don't know what I did wrong. The error I see when I open "http://localhost:8000/css/font-awesome.css" is "Not found. The requested resource /css/font-awesome.css was not found on this server."
    I have the same problem with the images. It looks like 'public' is not recognized as the root.

  • 2018-01-29 Victor Bocharsky

    Hey JC,

    Hm, let's find out. First of all, do you build the proper path with "{{ asset('css/font-awesome.css') }}"? So when you look over source code in the browser the path should be "/css/font-awesome.css". Are you sure this file has exactly "public/css/font-awesome.css" path in your system? What error do you see when when open "http://localhost:8000/css/font-awesome.css" directly in a new tab? Btw, do you use Symfony built-in server, i.e. "bin/console server:run", or do you use a real web server like Nginx or Apache?

    Cheers!

  • 2018-01-28 JC

    Hi! First, thank you fo the course. I have a problem with the CSS files.
    They are in public/css but are not found (404). The request url of
    font-awesome.css in the firefox debugger is
    http://localhost:8000/css/font-awesome.css