Creating a Symfony project from zero to success in 52 weeks (week 3)

I want to thank all the support this series of tutorials is receiving. I would like to make it clear that the title is not bait, I am really building this project from Saturday to Saturday and in real time along with the programming. I’m not even on the Medium Partner Program so I don’t make a dime for this. My only motivation is your readings, follows and claps.

Miss the week 2? Want to start from the beginning?

https://www.instagram.com/p/CdgVmocLR3N/

I would like to share in each article my work as an amateur photographer. Please, if you see any worthwhile photos, I would appreciate it if you would follow me on Instagram.

Ok, let’s add some templating & styling.

Configure your Webpack to work with SASS style sheets. We’ll configure Bootstrap through variables.

Rename the default stylesheet file assets/styles/app.css to app.scss:

$ git mv assets/styles/app.css assets/styles/app.scss

Change the import line in assets/app.js to the renamed file:

// import './styles/app.css';
import './styles/app.scss';

Tell Webpack Encore to compile SASS in webpack.config.js:

...
.enableSassLoader()
...

Install sass-loader & sass:

$ npm install sass-loader@^13.0.0 sass --save-dev

Install & load Bootstrap 5. A good idea doesn’t need more.

$ npm install bootstrap@5.2.0 — save-dev

Create a file named _variables.scss in assets/styles. We’ll configure Bootstrap through this file.

Clear the content of assets/styles/app.scss and add:

@import "variables";
@import "~bootstrap";

Now import the bootstrap JavaScript in assets/app.js:

...
import 'bootstrap';
...

Configure the initial Twig 3-level-layout templates.

Level 1, the ‘base’ template. This will hold the common html across the entire project. It’s in templates/base.html.twig and we’ll add some required meta by Bootstrap:

Level 2, the ‘layout’ template. This holds the organization of the differents sections of your design, i.e. the admin layout or the public layout. It’s in templates/layout.html.twig and extends from the base template:

Level 3, the individual views. This holds the specific html of a view, like a table, a form, etc. In this case I will add the view for the future homepage. It’s in templates/home.html.twig and extends from the layout template:

Finally, create the controller that renders this in src/Controller/CommonController.php. Like it’s name points, this will holds the ‘commons’ routes of the application:

Go and refresh your project root at https://localhost:8000. We now have a ‘true’ homepage. Next Saturday we’ll unleash the power of The Console Component.