Made withSymfonyClip

[1/9] - Beginners Symfony 4 Tutorial - Getting Started With Symfony 4

C

Code Review Videos

Creator on the Symfony channel

Watch on YouTube ↗

110K viewsJan 26, 201812:00 runtime

Get started with Symfony 4 in this beginner-friendly tutorial. Learn the essential first steps, from project setup using Composer and the website-skeleton to running the built-in web server. This guide covers key prerequisites like PHP 7.1.3 and installing the server bundle for…

Chapters

#symfony#clip#frameworks

Getting Started with Symfony 4

This document summarizes the key steps to set up a new Symfony 4 project and render your first page.

Prerequisites

PHP: Version 7.1.3 or higher.
Composer: Must be installed globally.
No database or external web server (like Apache/Nginx) is required for this initial setup, as Symfony's local web server will be used.

Project Setup

Symfony offers different project starting points, known as "skeletons."

symfony/website-skeleton: Recommended for traditional websites. It comes pre-packaged with commonly needed components like Twig, Doctrine, and Monolog.
symfony/skeleton: A minimal, bare-bones project, ideal for microservices, console applications, or when you want to add all dependencies manually.

Tip
For building a website, starting with the website-skeleton is the most straightforward approach.

You create a new project using Composer:

composer create-project symfony/website-skeleton your-project-name

Running the Application

After installation, Symfony provides a command to start a local web server. For a better development experience, install the dedicated server bundle.

Install the Server Bundle:
```
composer require server --dev
```
Manage the Server: This gives you access to easy-to-remember commands.
- Start the server: php bin/console server:start
- Stop the server: php bin/console server:stop
- Check status: php bin/console server:status

Important
Upon first running the application, you'll likely encounter a 404 Not Found error. This is because a fresh project has no route defined for the root path (/).

Debugging and Creating Your First Page

To fix the 404 error, you need to tell Symfony what to do when a user visits the root URL. This involves creating a route and a corresponding template.

Debug Routes: Use the debug:router command to see all currently configured routes in your application.
```
php bin/console debug:router
```
Create a Template: Create a new file in the templates/ directory, for example templates/hello_page.html.twig, with simple HTML content.
```
{# templates/hello_page.html.twig #}
Hello code review videos
```
Define a Route: Instead of creating a full controller class, you can use a shortcut for simple pages by defining a route in YAML that uses Symfony's built-in TemplateController.

Edit config/routes.yaml:
```
# config/routes.yaml
hello_page:
    path: /
    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
    defaults:
        template: 'hello_page.html.twig'
```
- path: The URL path that triggers this route.
- controller: Points to the built-in controller for rendering templates.
- defaults.template: Specifies which Twig template to render.

After saving the file, refreshing your browser at the root URL will now display your new page. This quick method is useful for static pages, but for most use cases, you will create your own custom controllers.

Introduction to the Symfony 4 Series

Hello YouTube, I'm Chris from codereviewvideos.com. Before watching this video, I'd like to let you know that I have over 500 similar videos available on my site, codereviewvideos.com. If you love Symfony, then you'll feel right at home here. I'll show you how to build both websites and JSON APIs, and then we're going to talk to those JSON API's in React and Redux.

There's courses on Docker and Ansible, as well as loads on deployment and test-driven development and behavior-driven development. If you enjoyed this video, please like and subscribe, and as ever, thanks for watching.

Hi, I'm Chris from codereviewvideos.com, and welcome to this beginner's practical hands-on with Symfony 4. In this tutorial series, we're going to cover how to download Symfony 4 and get your Symfony site up and running. We're going to look at how we can create pages, which will touch on using routing, controllers, and Twig templates. We'll create our first Symfony form and we'll use that form to capture some visitor information such as the name, email address, and date of birth. And we'll look at how we can convert this form data into an email message, which we'll send with Gmail. Now, if you don't have Gmail, there are alternatives available and I'll show you how to set up those. And we'll finish off by setting up our very first service. Working with services is something you will do frequently when working with Symfony, so I think it'd be useful to you to get hands-on by creating your own services sooner rather than later.

So this is going to be a very hands-on course, rather than a lot of theory. And we're not intending this to be an exhaustive dive into every Symfony feature. I want you to think of this as a beginner-friendly exploration of Symfony 4, and we're going to prioritize fun and hands-on practical experience. But we're still going to learn a lot along the way. There's tons to cover, so let's jump right in.

Prerequisites & Project Creation

There are some prerequisites for working with Symfony 4. You're going to need at least PHP 7.1.3, and you will also need Composer installed. We won't be working with a database in this series, and with the way that we're going to install Symfony 4, we do get a built-in web server also, so you won't need to set up Apache or Nginx or anything like that at this stage.

I'm just going to clear that off with Ctrl+L, and then I'm going to type in composer create-project and I'm going to create this project based off the symfony/website-skeleton, and then I'm going to give it my project name, which is going to be let's-explore-symfony-4. Now, you can give your project a name anything that you like; that's what we're going with here.

We're basing our project off the Symfony website skeleton because that's a really close approximation to what we would have got if we had installed the Symfony standard edition for Symfony 2 or Symfony 3. That's to say that we'll have access immediately to things like routing and Twig and Doctrine and Monolog. But there is a much more slimmed-down version called the Symfony skeleton. So though we're using the Symfony website skeleton, there is also the Symfony skeleton. And a Symfony skeleton is like a very bare-bones project which is really useful if you're building like a command-line app or you know specifically which dependencies that you want and you don't want anything else brought in. What I would say is if you're looking to build a website with Symfony, then start with the website skeleton as it's going to give you most everything that you need.

Running the Application & First Error

Now the installation process is finished, and when it finishes it gives you some instructions as to what to do. So some files have been created and what-not. Review, edit and commit them. That's okay, we'll look at that in a moment. And what's next? Run your application. And it gives some instructions here. So I'll take a copy of that, just highlighting it and Command-C on a Mac there. And then it says browse to our localhost once we've got that web server up and running.

It also recommends that we run the command composer require server for a better web server, so we're going to do that almost immediately. We've got some configuration advice: modify our database URL. Well, we don't have a database in this project, that'll come in the next project, so we're just going to ignore that for now. Then we've got some stuff about testing, and again, that'll come in a future project too.

So as a quick heads-up, just because we've downloaded our project into this let's-explore-symfony-4 directory, we're still in the development directory. So we need to switch into let's-explore-symfony-4. I'm just going to Ctrl+L there as well to clear that off. And so if I do git status now, you can see our project is actually set up for Git, and it's so far saying that all these files are untracked. And as we just saw, it was recommending that we review, edit, and commit these files. So I'll just start off by doing a git add on everything. I'll do a git commit with a message of 'init'. And again, a Ctrl+L to clear off the screen there.

Now we took a copy of that web server command, so I'm just going to paste that in. And then it says we're listening on HTTP 127.0.0.1 port 8000, and we can browse to that. And somewhat unusually, whilst it does work, we are getting this 404 page. But there's some nice things going on here. Firstly, we actually have a working web server up and running, and something must be happening to be able to see this error page. We can click on the web debug toolbar, we can browse around in here and find out what the exception was, look in the logs. And what we can see here is that there's no route found for the /. So we're sending in a GET request to the / or the root page of our site, and Symfony doesn't know how to handle that at the moment.

Now again, if we went back to the Symfony skeleton, not the website skeleton, but if we just installed the skeleton, then we wouldn't even have a router. We wouldn't have the web debug toolbar. We'd have to do a composer require on each of these pieces in order to set them up to begin with.

Installing the Web Server Bundle

So I'm just going to come back here, I'm going to press Ctrl+C like it recommends to quit. And before I do anything else, I'm just going to clear that off again. And we'll do a php bin/console. I'll just hit return here, and we can see a list of all the available Symfony console commands that come configured with Symfony 4 out of the box. And if you've ever used Symfony before in a local development environment, you may be used to running the command php or just bin/console–you don't need the php at the start, I will use them interchangeably. So you may just be used to running the command bin/console server:start like that. It says there's no commands defined in that server namespace. Okay.

So a few moments ago, when we installed Symfony 4, one of the recommended follow-on items was to run the command composer require server, which installs the Symfony web server bundle. And in doing that, we're going to get access to all those server commands that you may be used to. So let's do that now. So we'll do a composer require server, and I'm going to do --dev at the end, as we should never need the web server in a production environment. Not entirely sure why they miss off that in the generated output. Okay, so again control+L, just clear that off. And if I do a php bin/console, we now have these commands in the server namespace. So what that means is we can run the command server:start. That brings up our web server, and it's the same thing basically, but we didn't have to type in that php -S etc, etc, command that I'm never going to remember in a million years. And again, I'm just going to arrow up a couple of times there to get back to that original command, and I can do a stop and a status and anything else like that that you'd like to be. I do actually want it started, so I'm going to start it back up.

Defining a Page with YAML Routing

There's one extra thing to cover here before we jump into PHPStorm and start writing a bit of code. I'm just going to do a php bin/console debug:router. It's a handy command that shows you all the configured routes in our project. And what we could see before is that there's no route found for GET /. And so, these are all the configured routes in our project, and we can see that one of them doesn't have the path of just /.

So in order to fix that error, what we need to do is define something that tells Symfony that, hey, when we're trying to access this / route, do this. So, what I'm about to show you is something that you probably wouldn't do that often. And even though this is the very first thing that you're going to do with Symfony 4, this is really quite geeky. It's quite an interesting thing; honestly, it's quite a useful thing to know that you can do, but the chances of you ever really having to do it are quite slim. And you may be wondering then why on earth I'm showing it here. Well, firstly, it's quite geeky and it's quite interesting. Secondly, there's always more than one way to do anything, so it's nice to know that multiple ways exist, and this is one such way. And thirdly, this gives us an opportunity to look at a different type of routing than you would probably normally use in Symfony 4 as well. So we're going to look at YAML routing to begin with, but most of the time moving forwards, we'll just use annotation routing. And if you're just thinking, what on earth are you talking about at this point, then hopefully it will all become a little bit clearer. But this actually allows us to get started without doing that much, and that's the biggest reason that I'm showing you.

Okay, so the first thing is we're going to need a new template. We need to show something when we hit that route. So I'm just going to start off by creating a new template in here, which I'm just going to call hello_page.html.twig. You can of course call it anything you like. PHPStorm's trying to be helpful and telling me I want to add a lot of stuff, which I probably don't actually. It would probably be better to jump into .gitignore in here and add the .idea folder to the .gitignore because that's just a load of stuff that comes with PHPStorm that you don't need to share with everyone. Anyway, let's get rid of all these warnings and errors and so on. And I'm just going to define a very simple template that just says, 'Hello code review videos'. That's my template done. Convention generally for Twig templates: lowercase and use an underscore for your spaces. We'll get on to a bit more stuff around templates as we go through this this short tutorial.

Now, simply defining a template isn't enough. We need to tell Symfony that, hey, when we access this /, this route, whatever route it is, that needs to do something. And in our case, what we're going to do is do the bare minimum to get this template rendered and returned to us, the response to the user. So I'm going to open up under config, we want the routes.yaml file. I'm just going to get rid of all of that, you can leave that in, it's just a comment. That's going to call it hello_page. That's the name of our route, we'll see that again in a moment. We need to tell it the path, and so we've been talking about the /. You could give this any other path, so /some/path or whatever, or /some/nested/path, it doesn't really matter. But whatever you put in there is what you're going to need to hit in your browser in a moment. And this is where things get a little bit geeky.

So we're going to define a controller, but we're not creating our own controller yet. We're going to get on to that. But again, to keep things as simple as possible, what I'm going to do is reuse one that comes with Symfony. So on the SymfonyBundleFrameworkBundle, there's a controller called the TemplateController, and we can call the templateAction on that TemplateController to render out just a template without having to define our own controller. And as I say, this is very geeky. In fact, it's beyond geeky, it's kind of nerdy. And the usefulness of this in a day-to-day project is quite slim, but it does mean that we don't need to define our own controller to begin with. Then we need to define a defaults, and I'm going to say our template is going to be hello_page.html.twig. That should be enough.

Verification and Next Steps

Let's jump back here and we can check what's available in our router. We can see we've now defined hello_page is here. It accepts any method, we're only going to be sending in a GET request. Don't need to worry about HTTP and HTTPS and all that. But crucially, it's going to hit when we hit the site root, the /.

So if we go back now, just give that a refresh, we can see our template is getting rendered. And we could come back, we could change this to be /anything/i/like. Again, now this hello_page points to /anything/i/like. So I have to take a copy of that... not the biggest fan of typing. And there we go, that still works. But if we now browse back to the / then that's broken again because we've just changed that path.

Okay, so we've done the bare minimum to get our website up and running. I'm going to change this back actually for the moment, just so that we have something when we browse to this website. I might as well get rid of that one as well. But of course in a real project or in the real world, you're going to need to do a bit more than this, like in the vast majority of times. And so whilst that is quite nerdy and quite interesting to know, it's also not really that useful. More than likely, you're going to want to define your own controller and do stuff in there. So we're going to get onto that in the very next video.