Month: January 2021

Before staring installation of Webpack Encore bundle, Let’s take a look in Why this bundle need to be install ?

In earlier version of symfony ( till 3.4 )  we used Assetic Bundle for provides integration of the Assetic library into the Symfony framework.
As of Symfony 4.0, Symfony applications Deprecated this Bundle from Symfony Application.
CAUTION: Now, Symfony applications should use Webpack Encore , instead of Assetic Bundle.

First, make sure you install Node.js and also the Yarn package manager. The following instructions depend on whether you are installing Encore in a Symfony application or not.
Step 1: Install Node.js
https://nodejs.org/en/download/ Form here, you can down load Node.js for  WindowOs as well as MacOs.
Step 2: Yarn Installation
You can install yarn via below command…

npm install -g yarn

Should you later want to update Yarn to the latest version, just run:

yarn set version latest

Step 3: Installing Encore in Symfony Applications
Run these commands to install both the PHP and JavaScript dependencies in your project:

composer require symfony/webpack-encore-bundle
yarn install

If you are using Symfony Flex, this will install and enable the WebpackEncoreBundle, create the assets/ directory, add a webpack.config.js file, and add node_modules/ to .gitignore. You can skip the rest of this article and go write your first JavaScript and CSS by reading Encore: Setting up your Project!

If you are not using Symfony Flex, you’ll need to create all these directories and files by yourself…
Step 4: Configuring Encore/Webpack
Everything in Encore is configured via a webpack.config.js file at the root of your project. It already holds the basic config you need:

The key part is addEntry(): this tells Encore to load the assets/app.js file and follow all of the require() statements. It will then package everything together and – thanks to the first app argument – output final app.js and app.css files into the public/build directory.

To build the assets, run:

Congrats! You now have three new files:

public/build/app.js (holds all the JavaScript for your “app” entry)
public/build/app.css (holds all the CSS for your “app” entry)
public/build/runtime.js (a file that helps Webpack do its job)

Next, include these in your base layout file. Two Twig helpers from WebpackEncoreBundle can do most of the work for you:

{{ encore_entry_link_tags(‘app’) }} & {{ encore_entry_script_tags(‘app’) }}

{{ encore_entry_link_tags(‘app’) }} (For css complied)
{{ encore_entry_script_tags(‘app’) }} (For js complied)

For Example..

Compiling Only a CSS File
If you want to only compile a CSS file, that’s possible via addStyleEntry():

This will output a new some_page.css.

Conclusion: I hope this tutorial helpful for you, if you have any issue regarding this blog, please comment below, we’ll be soon back to you.

Thank You!

Symfony 4: it’s a game changer. Honestly, I’ve never been so excited to start writing tutorials: you are going to love it!
Step 1: Remove Deprecations
look into your project at the bottom you got nav-bar of symfony, something like below.

This is nothing but Deprecations which shows, some functionality or services deprecated in new version, so it’s very important to remove all the listed deprecations before take next step. After removing all the deprecations please see the next step.
Step 2: Version Controller
Now, you are able to upgrade your project/application with the new symfony 4.4, the main changes you should have to do is, change the symfony version in composer.json file.

In older version till 3.4 we used `symfony/symfony` bundle , which is deprecated with `symfony/framework-bundle` in symfony 4.4 . Now we should use like below…

“symfony/framework-bundle”: “^4.0”

You can manage your version with below reference…

Step 3: Update Composer
After setting-up all deprecations & versions in composer.json, you just need to apply `composer update` command in cmd or git bash.

This command will update/install/remove all the dependencies which is used for described bundle in composer.json file, it’s take few minutes to update dependencies via composer.

Now your project is on symfony4.4 😊.

But still some main steps are remining.
Step 4: Moving to Symfony 4.4 directory structure

The var directory now holds the logs and cache files instead of app directory.
Create the directory in the root folder and move the files in it.

mkdir var
git mv app/cache var/
git mv app/logs var/

To update the project and the changes to take place, make the following changes in app/Appkernel.php

public function getRootDir() { return __DIR__; } public function getCacheDir() { return dirname(__DIR__).’/var/cache/’.$this->environment; } public function getLogDir() { return dirname(__DIR__).’/var/logs’; }

the folder structure something like below

Note :- Please use `git mv` command for change directory structure, do not directly move file via `copy/past` otherwise you’ll face file path in git repository. 
That’s all, you are now on symfony4.4, Enjoy your newest symfony version…✌.

Conclusion: I hope this tutorial helpful for you, if you have any issue regarding this blog, please comment below, we’ll be soon back to you.

Thank You!