Symfony 4: CSS and JavaScript Assets

Video loading...

  • 0:03
    Symfony 4: CSS and JavaScript Assets with Ryan Weaver
  • 0:07
    Even astronauts, who generally spend their time
  • 0:10
    staring into the black abyss, demand a site that is less ugly than this.
  • 0:17
    Let's fix that.
  • 0:19
    If you download the course code from the page
  • 0:21
    that you're watching this video on right now,
  • 0:24
    inside the zip file you'll find a start directory,
  • 0:28
    and inside that, you'll find this same tutorial directory that I have here.
  • 0:33
    And inside that, I've created a new base.html.twig.
  • 0:40
    Copy that and overwrite our version in templates.
  • 0:44
    On a technical level, this is basically the same as before.
  • 0:48
    It has the same blocks, title, stylesheets, body
  • 0:52
    and JavaScripts at the bottom.
  • 0:55
    But now, we have a nice HTML layout that's styled with Bootstrap.
  • 1:00
    If you refresh, it should look better.
  • 1:02
    Whoa, no change.
  • 1:05
    Weird!
  • 1:06
    Actually, this is more weird than you might think.
  • 1:12
    Find your terminal and remove the var/cache/dev/* directory.
  • 1:18
    What the heck is this?
  • 1:20
    Internally, Symfony caches things in this directory
  • 1:23
    and you normally don't need to think about this at all.
  • 1:29
    Symfony is smart enough during development
  • 1:32
    to automatically rebuild this cache whenever necessary.
  • 1:36
    So, why am I manually clearing it?
  • 1:40
    Well, because we copied my file
  • 1:44
    and because its last modified date is older
  • 1:48
    than our original base.html.twig,
  • 1:52
    Twig gets confused and thinks that the template was not updated.
  • 1:57
    Seriously, this is not something to worry about in any other situation.
  • 2:03
    And when we refresh,
  • 2:05
    there it is.
  • 2:07
    OK, it's still pretty ugly.
  • 2:10
    That's because we're missing some CSS files.
  • 2:13
    In the tutorial directory, I've also prepped
  • 2:15
    some CSS fonts and images.
  • 2:19
    All of these files need to be accessed by the user's browser
  • 2:24
    and that means they must live inside public.
  • 2:29
    Open that directory and paste them there.
  • 2:32
    By the way, Symfony has an awesome tool
  • 2:35
    called Webpack Encore, that helps process,
  • 2:38
    combine, minify and generally do amazing things
  • 2:43
    with your CSS and JS files.
  • 2:46
    We are going to talk about Webpack Encore
  • 2:49
    but in a different tutorial.
  • 2:52
    For now, let's get things set up with normal static files.
  • 2:56
    The 2 CSS files we want to include
  • 2:59
    are font-awesome.CSS and styles.CSS
  • 3:03
    and we don't need to do anything complex or special.
  • 3:07
    In base.html.twig
  • 3:09
    find the stylesheets block and add a link tag.
  • 3:13
    But wait, why exactly are we adding the link tag
  • 3:17
    inside the stylesheets block?
  • 3:19
    Is that important?
  • 3:22
    Well, technically it doesn't matter.
  • 3:25
    A link tag can live anywhere in head, but later
  • 3:30
    we might want to add additional CSS files on specific pages.
  • 3:36
    By putting the link tag inside this block,
  • 3:39
    we'll have more flexibility to do that. Don't worry.
  • 3:44
    We're going to see an example of this with a JavaScript file soon.
  • 3:48
    So, what path should we use?
  • 3:51
    Since public is the document route,
  • 3:53
    it should just be /css/font-awesome.css.
  • 3:59
    Do the same thing for the other file, /css/styles.css.
  • 4:04
    It's that simple.
  • 4:07
    Refresh.
  • 4:09
    Still not perfect, but much better.
  • 4:12
    And now, I'm going to slightly complicate things.
  • 4:18
    Go back into PhpStorm's preferences.
  • 4:23
    Search for Symfony and find the Symfony plugin.
  • 4:28
    Change the web directory to public.
  • 4:31
    It was called web in Symfony 3.
  • 4:34
    This is not required, but it will give us more
  • 4:38
    autocompletion when working with assets.
  • 4:41
    Delete the font-awesome path, retype it and hit tab to autocomplete.
  • 4:46
    Whoa!
  • 4:48
    It wrapped the path in a Twig asset function.
  • 4:52
    Do the same thing below for styles.css.
  • 4:56
    Here's the deal:
  • 4:58
    whenever you link to a static asset,
  • 5:00
    CSS, JS or images,
  • 5:03
    you should wrap the path in this asset function.
  • 5:08
    But, it's not really that important.
  • 5:12
    In fact, right now, it doesn't do anything.
  • 5:16
    It will print the same path as before.
  • 5:19
    But, in the future,
  • 5:22
    the asset function will give us more flexibility to version
  • 5:26
    our assets or store them on a CDN.
  • 5:31
    In other words, don't worry about it too much, but do remember to use it.
  • 5:36
    Actually, the asset function does do something immediately,
  • 5:41
    it breaks our site.
  • 5:43
    Refresh.
  • 5:44
    The asset function comes from a part of Symfony
  • 5:48
    that we don't have installed yet.
  • 5:50
    Fix that by running
  • 5:52
    composer require asset.
  • 5:55
    This installs the symfony/asset component.
  • 5:59
    And as soon as Composer is done,
  • 6:02
    we can refresh and it works.
  • 6:06
    To prove that the asset function isn't doing anything magic,
  • 6:11
    you can look at the link tag in the HTML source.
  • 6:14
    It's the same boring /css/styles.css.
  • 6:20
    There's 1 other spot where we need to use asset.
  • 6:24
    In the layout, search for image.
  • 6:27
    Ah, an image tag.
  • 6:29
    Remove the source and retype astronaut-profile.
  • 6:34
    Perfect.
  • 6:35
    Refresh and enjoy our new avatar on the user menu.
  • 6:40
    There's a lot of hard-coded data but we'll make this dynamic over time.
  • 6:46
    The layout is looking great but the inside of the page,
  • 6:51
    yeah, that's still pretty terrible.
  • 6:55
    Back in the tutorial directory, there is also an article.html.twig file.
  • 7:01
    Don't copy this entire file; just copy its contents.
  • 7:07
    Close it and open show.html.twig.
  • 7:11
    Paste the new code at the top of the body block.
  • 7:19
    Check it out in your browser.
  • 7:21
    Yep, it looks cool!
  • 7:23
    But, all of this info is hard-coded,
  • 7:27
    I mean that article name is just static text.
  • 7:32
    Let's take the dynamic code that we have at the bottom
  • 7:35
    and work it into the new HTML.
  • 7:42
    For the title use {{ title }}.
  • 7:48
    Below, it prints the number of comments.
  • 7:51
    Replace that with {{ comments|length }}.
  • 7:58
    Oh, and at the bottom,
  • 7:59
    there is a comment box and 1 actual comment.
  • 8:06
    Let's find this and add a loop, for comment in comments on top
  • 8:12
    and endfor at the bottom.
  • 8:19
    For the actual comment, use {{ comment }}.
  • 8:25
    Delete the old code from the bottom.
  • 8:31
    Oh, but don't delete the endblock.
  • 8:35
    Let's try it.
  • 8:37
    Refresh.
  • 8:38
    It looks awesome!
  • 8:41
    A bunch of things are still hard-coded, but this is much better.
  • 8:46
    It's time to make our homepage less ugly
  • 8:49
    and learn about the second job of routing,
  • 8:53
    route generation for linking.

Symfony 4: CSS and JavaScript Assets

Loading...

In this tutorial, let's make our pages less ugly and learn how we can include CSS and JavaScript assets in our application.

Downloads: 
Log in or sign up to download companion files.