with tailwindcss

A few years ago, I've dedicated a post to the integration of React.js with Symfony

Ruby On Rails with React.js frontend Integration

 over Pure React

As web development continues to evolve, the demand for efficient and performant components is higher than ever. React has been a prominent choice for building web applications, but developers...

Boosting Component Development: The Advantages of Stencil

as my blog CMS

Recently, I've moved from Jolpin to Notion, due to syncronization problems.

How to create a Notion database connected to Nuxt.js

by using useReducer

This week, I had to implement a member management form, using React.js

How to Avoid the useState Hell in React.js

TypeScript and Tailwind CSS

This week, I had to develop an API handler, using Next.js, to allow to upload files

How to create a file upload API using Next.js

Using tailwindcss

I know that sometimes it can be a nigthmare to center items on a div, that's why I've decided to create this tutorial

How to Center Items on a div

Next.js, TypeScript and Tailwind CSS

This week at work I had to develop a multistep, or multistage, form using React.js. 

How to create a multistep form using React.js

What is different ?

New year, new blog engine. It's been four years since the last time I've decided to upgrade the language and engine of the blog.

Blog version 3.0

and React.js with TSX

Today I've decided to create an&nbsp;Express.js&nbsp;application with TypeScript and React.js.
To begin our new project, let's start by creating a new&nbsp;Express.js&nbsp;project

Today I've decided to create an&nbsp;Express.js&nbsp;application with&nbsp;TypeScript&nbsp;and React.js.
To begin our new project, let's start by creating a new express&nbsp;Express.js&nbsp;js project
<div class="joplin-editable">
<pre class="language-javascript"><code>$ mkdir new-express-js &amp;&amp; cd new-express-js
$ npx express-generator --view=react
$ npm i</code></pre>
</div>
Now, let's start by adding the necessary packages
<div class="joplin-editable">
<pre class="language-javascript"><code>$ npm i --save-dev @types/express @types/node @types/react typescript ts-node
$ npm i --save express-react-views react react-dom</code></pre>
</div>
let's start by adapting our package.json to use ts-node instead of the default node, to do that you need to update the scripts to
<div class="joplin-editable">
<pre class="language-javascript"><code>"start": "ts-node ./app.ts"</code></pre>
</div>
that way when you run&nbsp;<code class="inline-code">npm run start</code>&nbsp;it will use the ts-node which can interpreter typescript.
Now, let's initialise typescript by running
<div class="joplin-editable">
<pre class="language-javascript"><code>$ npx tsc --init</code></pre>
</div>
you'll notice a new file will appear on you project, called&nbsp;<code class="inline-code">ts-config.json</code>.
Let's open it add look for "jsx", you'll notice the line will be probably be commented, uncomment and adapt to look like
<div class="joplin-editable">
<pre class="language-javascript"><code>"jsx": "react",</code></pre>
</div>
this change will allow ts-node to deal with the react.js files.
Now, let's rename our app.js file to app.ts
<div class="joplin-editable">
<pre class="language-javascript"><code>$ mv app.js app.ts</code></pre>
</div>
In order to be able to use the react view engine, open the app.ts file and after
<div class="joplin-editable">
<pre class="language-javascript"><code>var app = express();</code></pre>
</div>
add
<div class="joplin-editable">
<pre class="language-javascript"><code>app.set("views", __dirname + "/views")
app.set("view engine", "tsx")
app.engine("tsx", require("express-react-views").createEngine())</code></pre>
</div>
at the end of the file, right before module.exports = app, we also need to adjust the port, because that parte was being configured on the bin/www file, for that reason you need to add
<div class="joplin-editable">
<pre class="language-javascript"><code>const port = 3000

app.listen(port, () =&gt; {
 console.log("Listening on port " + port)
})</code></pre>
</div>
finally, on the views folder, create a new file called index.tsx with the following content
<div class="joplin-editable">
<pre class="language-javascript"><code>import React from "react"

const HelloMessage = (props: any) =&gt; &lt;div&gt;Hello {props.title}&lt;/div&gt;

module.exports = HelloMessage</code></pre>
</div>
Ok, now let's boot up our express application to see if everything is working fine.
<div class="joplin-editable">
<pre class="language-javascript"><code>$ npm run start</code></pre>
</div>
the output will be something like
<div class="joplin-editable">
<pre class="language-javascript"><code>&gt; express@0.0.0 start /Users/pedroresende/Projects/express
&gt; ts-node ./app.ts

Listening on port 3000</code></pre>
</div>
Now all you need to do is open you browser with the url&nbsp;<code><a title="http://localhost:3000" href="http://localhost:3000/" data-from-md="">http://localhost:3000</a></code>.

How to create an Express.js project with TypeScript

with TypeScript

Today I've decided to integrate Apollo GraphQL with the Next.js API, instead of using the existing one in REST.

Today I've decided to integrate <a title="Apollo GraphQL" href="https://www.apollographql.com" target="_blank" rel="noopener">Apollo GraphQL</a> with the <a title="Next.js" href="https://nextjs.org" target="_blank" rel="noopener">Next.js</a> API, instead of using the existing one in <a title="REST" href="https://en.wikipedia.org/wiki/Representational_state_transfer" target="_blank" rel="noopener">REST</a>.
To begin our new project, let's start by creating a new Next.js project
<pre class="language-javascript"><code>npx create-next-app --typescript</code></pre>
after selecting the project name, which is the folder where your project is going to be created.
<pre class="language-javascript"><code>Need to install the following packages:

 create-next-app

Ok to proceed? (y) y

✔ What is your project named? &hellip; my-app

Creating a new Next.js app in /Users/pedroresende/Projects/next-graphql/my-app.

Using npm.

Installing dependencies:

- react
- react-dom
- next

added 269 packages, and audited 270 packages in 5s

45 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:

- typescript
- @types/react

added 5 packages, and audited 275 packages in 1s

45 packages are looking for funding

 run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created my-app at /Users/pedroresende/Projects/next-graphql/my-app
Inside that directory, you can run several commands:

 npm run dev
 Starts the development server.

 npm run build
 Builds the app for production.

 npm start
 Runs the built app in production mode.

We suggest that you begin by typing:

 cd my-app
 npm run dev</code></pre>
I decided to use the default project name, which is `my-app`.
Now, let install the apollo GraphQL&nbsp;server, by running
<pre class="language-javascript"><code>$ cd my-app

$ npm install apollo-server-micro --save</code></pre>
Now, let's add the file graphql.ts under pages/api/ with the following content
<pre class="language-javascript"><code>import { ApolloServer, gql } from "apollo-server-micro"

let book = {
 name: "The Hungarian Sausage",
 author: "Ben Grunfeld",
}

const typeDefs = gql`
 type Book {
 name: String
 author: String
 }

 type Query {
 book: Book
 }

 type Mutation {
 updateBook(name: String!, author: String!): Book
 }
`

const resolvers = {
 Query: {
 book: () =&gt; book,
 },

 Mutation: {
 updateBook: (root, args) =&gt; {
 book.name = args.name
 book.author = args.author
 return book
 },
 },
}

const server = new ApolloServer({ typeDefs, resolvers })

const handler = server.createHandler({ path: "/api/graphql" })

export const config = {
 api: {
 bodyParser: false,
 },
}

export default handler</code></pre>
let's start next.js, by running
<pre class="language-javascript"><code>$ npm run dev</code></pre>
Now, open in a browser http://localhost:3000/api/graphql and you'll see the apollo GraphQL explorer.
Let's give it a try, to see if everything is working fine. On the query add the following GraphQL&nbsp;query
<pre class="language-javascript"><code>query {
 book {
 name
 author
 }
}</code></pre>
press the play button and you should see the following response
<pre class="language-markup"><code>{
 "data": {
 "book": {
 "name": "The Hungarian Sausage",
 "author": "Ben Grunfeld"
 }
 }
}</code></pre>
Now, let's try a mutation (update), on the query section, add
<pre class="language-javascript"><code>mutation {
 updateBook(name:"Test-Driven Development by Example", author:"Kent Beck" ) {
 name
 author
 }
}</code></pre>
Press once again on the play button and the response should be
<pre class="language-javascript"><code>{
 "data": {
 "updateBook": {
 "name": "Test-Driven Development by Example",
 "author": "Kent Beck"
 }
 }
}</code></pre>
That's it.
The tutorial is available on <a title="Github" href="https://github.com/pedroresende/nextjs-graphql" target="_blank" rel="noopener">Github</a>.
What do you think about this tutorial?

How to add Apollo GraphQL to Next.js

On you're next JavaScript Project

For the last six months I`ve been working on a JavaScript Full-Stack project, using React.js has the front-end framework, GraphQL for the API Gateway and Hapi Server for the micro-service which is connected to a ...

For the last six months, I`ve been working on a JavaScript Full-Stack project, using React.js as the front-end framework, GraphQL for the API Gateway and Hapi Server for the micro-service which is connected to a Postgres RDS Database and during this time I had the pleasure for being able to work with TypeScript.
<h2>Advantages</h2>
You may ask what's the advantage of using TypeScript, another framework, instead of pure JavaScript which is more than enough. Well... it's quite simple, imagine all the power of the well known JS with the advantage of a typed language like C#, Java, or even PHP.&nbsp;
But the reality it's that you can start moving slowly from JavaScript to TypeScript, that's one of the main advantages, another one is the integration with you're editor, which will infer correctly the type of a given variable, function input or output and in the end, it's all compiled to pure JavaScript which is simply perfect.
<h2>Basic Types</h2>
Let's start by seeing what are the Basic Types available:
<h3>Boolean</h3>
<pre class="language-javascript"><code>const booleanValue: boolean = false;</code></pre>
<h3>Number</h3>
<pre class="language-javascript"><code>const number: number = 12;</code></pre>
<h3>String</h3>
<pre class="language-javascript"><code>const someString: String = "This is a string";</code></pre>
<h3>Array</h3>
<pre class="language-javascript"><code>const array: number[] = [1, 2];</code></pre>
<h3>Tuple</h3>
<pre class="language-javascript"><code>const x : [string, number] = [a , 1];</code></pre>
<h3>Enum</h3>
<code></code>
<pre class="language-javascript"><code>enum Type {

 WATER,

 ELECTRICITY,

 GAS,

}

Type::WATER</code></pre>
<code></code>
<h3>Unknown</h3>
<pre class="language-javascript"><code>let x: unknown = 4;

x = "string";</code></pre>
<h3>Any</h3>
<pre class="language-javascript"><code>const xpto: any = "Can be anything";</code></pre>
<h3>Void</h3>
<pre class="language-javascript"><code>const xpto = (): void =&gt; {console.log("some message")}</code></pre>
<h3>Never</h3>
<pre class="language-javascript"><code>const xpto = (): never =&gt; {throw new Error("Some Error")}</code></pre>
Has you can see there is plenty of types to be with, and in the case of doubt you can set it to "any".
<h3>Convert from JavaScript to TypeScript</h3>
Imagine you have the following JS file
<pre class="language-javascript"><code>const add = (a, b) =&gt; a + b;

console.log(add(1,2));</code></pre>
it's quite a simple example, but I believe it's enough to be with, in TS you've had&nbsp;
<pre class="language-javascript"><code>const add = (a: number, b: number): number =&gt; a + b;

console.log(add(1,2));</code></pre>
which is exactly the same, but if in my editor, which currently it's vscode, I make the mistake of typing<code></code>
<pre class="language-javascript"><code>console.log(add("x", 2));</code></pre>
<code></code>
I'll have the following warning
<pre class="language-javascript"><code>Argument of type '"x"' is not assignable to parameter of type 'number'.</code></pre>
which is quite nice and the number of small issues will be reduced.
What do you think about TypeScript?&nbsp;

Why you should use TypeScript

A few years ago, I've dedicated a post to the integration of React.js with Symfony

A few years ago, I've dedicated a post to the integration of React.js with Symfony (<a title="Symfony with React.js frontend Integration" href="../../../../../symfony-with-react.js-frontend-integration/">Symfony with React.js frontend Integration</a>).
For the last year and a half I've been working on a daily basis using Vue.js has a dedicated frontend framework. I must say that when I started, I was against it since I had already quite some experience with React.js and it was strange, however I have to admit it was a good surprise. The learning curve is way better than React.js, and when comparing Redux with VueX it's amazing how simple it is to use.
Therefor, I've decided, like I've done 4 years ago with React.js to write a possible integration with Symfony.
A kind reminder that this is a possible integration and if any of you believe there is a better approach, please feel free to leave a comment.
Let's start by installing a clean Symfony 5.x environment for this example:
<pre class="language-markup"><code>$ symfony new vuejssymfonyintegration</code></pre>
Let's start by installing twig integration in order to have a frontend
<pre class="language-markup"><code>$ cd vuejssymfonyintegration
$ composer req twig
$ symfony serve</code></pre>
Access to your browser, using the address provided, probably something like
<pre class="language-markup"><code>[OK] Web server listening on https://127.0.0.1:8000 (PHP CLI 7.4.2)</code></pre>
Let's start by creating a controller to return our main page
<pre class="language-markup"><code>$ composer req make doctrine/annotations symfony/webpack-encore-bundle
$ ./bin/console make:controller</code></pre>
Back to the editor, now you'll see the presence of `VueFrontEndController.php` on the folder `src/Controller`. If you open your file, you'll have something like
<pre class="language-php"><code>&lt;?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class VueFrontendController extends AbstractController
{
 /**
 * @Route("/vue/frontend", name="vue_frontend")
 */
 public function index()
 {
 return $this-&gt;render('vue_frontend/index.html.twig', [
 'controller_name' =&gt; 'VueFrontendController',
 ]);
 }
}</code></pre>
Let's change the Route from "/vue/frontend" to "/" in order to show it has our homepage.
Now, let change the contents of the file `templates/vue_frontend_index.html.twig` which has the following:
<pre class="language-php"><code>{% extends 'base.html.twig' %}

{% block title %}Hello VueFrontendController!{% endblock %}

{% block body %}
&lt;style&gt;
 .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
 .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
&lt;/style&gt;

&lt;div class="example-wrapper"&gt;
 &lt;h1&gt;Hello {{ controller_name }}! ✅&lt;/h1&gt;

 This friendly message is coming from:
 &lt;ul&gt;
 &lt;li&gt;Your controller at &lt;code&gt;&lt;a href="{{ '/home/pedroresende/Projects/vuejssymfonyintegration/src/Controller/VueFrontendController.php'|file_link(0) }}"&gt;src/Controller/VueFrontendController.php&lt;/a&gt;&lt;/code&gt;&lt;/li&gt;
 &lt;li&gt;Your template at &lt;code&gt;&lt;a href="{{ '/home/pedroresende/Projects/vuejssymfonyintegration/templates/vue_frontend/index.html.twig'|file_link(0) }}"&gt;templates/vue_frontend/index.html.twig&lt;/a&gt;&lt;/code&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
{% endblock %}</code></pre>
to something like
<pre class="language-markup"><code>{% extends 'base.html.twig' %}

{% block title %}Hello VueFrontendController!{% endblock %}

{% block stylesheets %}
 {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block body %}
 &lt;div id="app"&gt;&lt;/div&gt;
{% endblock %}

{% block javascripts %}
 {{ encore_entry_script_tags('app') }}
{% endblock %}</code></pre>
Now that we have our Symfony structure ready, let's go into the JS part.
Let's add encore.js to our project, by running
<pre class="language-markup"><code>$ composer req symfony/webpack-encore-bundle
$ yarn install
$ yarn add vue tailwindcss --save
$ yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props vue-loader@^15.0.11 vue-template-compiler postcss-loader@^3.0.0 sass-loader@^7.0.1 node-sass --dev</code></pre>
Open webpack.config.js file, which is located at the root of our project and change to have the following:
<pre class="language-javascript"><code>var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
 Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
 .setOutputPath('public/build/')
 .setPublicPath('/build')
 .addEntry('app', './assets/js/app.js')
 .enableSingleRuntimeChunk()
 .cleanupOutputBeforeBuild()
 .enableBuildNotifications()
 .enableSourceMaps(!Encore.isProduction())
 .enableVersioning(Encore.isProduction())
 .configureBabelPresetEnv((config) =&gt; {
 config.useBuiltIns = 'usage';
 config.corejs = 3;
 })

 .enableVueLoader(() =&gt; {}, {
 useJsx: true
 })
 .enablePostCssLoader()
 .enableSassLoader(function (options) {}, {
 resolveUrlLoader: false
 })
;

module.exports = Encore.getWebpackConfig();</code></pre>
Let's add a postcss.config.js file, with the following contents
<pre class="language-javascript"><code>module.exports = {
 plugins: [
 // ...
 require('tailwindcss'),
 require('autoprefixer'),
 // ...
 ]
}</code></pre>
Open /assets/app.js file and change it to
<pre class="language-javascript"><code>import '../css/app.css';

import Vue from 'vue';
import vuefrontend from './../vue/vuefrontend';

if (document.getElementById('app') !== null) {
 new Vue({
 el: '#app',
 template: '&lt;vuefrontend/&gt;',
 components: {
 vuefrontend
 }
 })
}

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');</code></pre>
Let's create the file assets/vue/vuefrontend.vue with the following content
<pre class="language-javascript"><code>&lt;template&gt;
 &lt;div class="container m-auto"&gt;
 &lt;div class="p-20"&gt;
 {{ message }}
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 name: 'vuefrontend',

 data() {
 return {
 message: 'Hello World'
 }
 }
}
&lt;/script&gt;</code></pre>
Let's boot the encore watcher, to take into account our changes
<pre class="language-markup"><code>$ yarn encore dev --watch</code></pre>
Back to your browser, you should see Hello World
That is it, please let me know if you propose a different approach, the code is available at this <a title="vuejssymfonyintegration" href="https://github.com/pedroresende/vuejssymfonyintegration" target="_blank" rel="noopener">link</a>.

Symfony with Vue.js frontend Integration

In 9 easy steps

Today, I've decided to take a look at Symfony 4.3 and it's login system. I must say they've made a pretty good job with the new funcionalities and the ease of use.

Today, I've decided to take a look at Symfony 4.3 and it's login system. I must say they've made a pretty good job with the new funcionalities and the ease of use. Therefor I've decided to share with you a small tutorial on how to add a login form and a private page in easy 9 steps.
I'll assume you've already installed Symfony 4.3 and Mysql configured, if you haven't please follow check how to do it <a title="Symfony Install" href="https://symfony.com/download" target="_blank" rel="noopener">here</a>.
Let's start by running the following command in the terminal:
<pre class="language-php"><code>./bin/console make:user</code></pre>
you should answer the following questions
<pre class="language-php"><code> The name of the security user class (e.g. User) [User]:
 &gt; 

 Do you want to store user data in the database (via Doctrine)? (yes/no) [yes]:
 &gt; 

 Enter a property name that will be the unique "display" name for the user (e.g. email, username, uuid) [email]:
 &gt; 

 Will this app need to hash/check user passwords? Choose No if passwords are not needed or will be checked/hashed by some other system (e.g. a single sign-on server).

 Does this app need to hash/check user passwords? (yes/no) [yes]:
 &gt; 

The newer Argon2i password hasher requires PHP 7.2, libsodium or paragonie/sodium_compat. Your system DOES support this algorithm.
You should use Argon2i unless your production system will not support it.

 Use Argon2i as your password hasher (bcrypt will be used otherwise)? (yes/no) [yes]:
 &gt; 

 created: src/Entity/User.php
 created: src/Repository/UserRepository.php
 updated: src/Entity/User.php
 updated: config/packages/security.yaml

 
 Success! </code></pre>
Now, we have our entity created, please proceed with the migration creation and the creation of the User table in the database.
<pre class="language-php"><code>./bin/console make:migration &amp;&amp; ./bin/console doctrine:migrations:migrate</code></pre>
Let's create a <a href="https://symfony.com/doc/current/security.html#guard-authenticators" target="_blank" rel="noopener">Guard Authenticator</a>
<pre class="language-php"><code>./bin/console make:auth</code></pre>
Where you'll defined the desired options
<pre class="language-php"><code> What style of authentication do you want? [Empty authenticator]:
 [0] Empty authenticator
 [1] Login form authenticator
 &gt; 1

 The class name of the authenticator to create (e.g. AppCustomAuthenticator):
 &gt; AppAuthenticator

 Choose a name for the controller class (e.g. SecurityController) [SecurityController]:
 &gt; 


 created: src/Security/AppAuthenticator.php
 updated: config/packages/security.yaml
 created: src/Controller/SecurityController.php
 created: templates/security/login.html.twig

 
 Success! 
 

 Next:
 - Customize your new authenticator.
 - Finish the redirect "TODO" in the App\Security\AppAuthenticator::onAuthenticationSuccess() method.
 - Review &amp; adapt the login template: templates/security/login.html.twig.</code></pre>
Now, we need a registration for to add the users to the database, we'll execute the following command for that
<pre class="language-markup"><code>./bin/console make:registration-form</code></pre>
<pre class="language-php"><code> Creating a registration form for App\Entity\User

 Do you want to add a @UniqueEntity validation annotation on your User class to make sure duplicate accounts aren't created? (yes/no) [yes]:
 &gt; 

 Do you want to automatically authenticate the user after registration? (yes/no) [yes]:
 &gt; 

 updated: src/Entity/User.php
 created: src/Form/RegistrationFormType.php
 created: src/Controller/RegistrationController.php
 created: templates/registration/register.html.twig

 
 Success! 
 

 Next: Go to /register to check out your new form!
 Make any changes you need to the form, controller &amp; template.</code></pre>
Now, edit the file src/Controller/SecurityController.php and add the following
<pre class="language-php"><code> /**
 * @Route("/logout", name="app_logout", methods={"GET"})
 */
 public function logout()
 {
 // controller can be blank: it will never be executed!
 throw new \Exception('Don\'t forget to activate logout in security.yaml');
 }</code></pre>
This will allow the users to logout.
Now, in the security.yml we need to define that the app_logout path is responsible for the users logout
<pre class="language-php"><code> firewalls:
 dev:
 pattern: ^/(_(profiler|wdt)|css|images|js)/
 security: false
 main:
 logout:
 path: app_logout</code></pre>
Let's update the login reddirect path by changing in the file, where you have
<pre class="language-php"><code> public function onAuthenticationSuccess(Request $request, TokenInterface $token, $providerKey)
 {
 if ($targetPath = $this-&gt;getTargetPath($request-&gt;getSession(), $providerKey)) {
 return new RedirectResponse($targetPath);
 }

 // For example : return new RedirectResponse($this-&gt;urlGenerator-&gt;generate('some_route'));
 throw new \Exception('TODO: provide a valid redirect inside '.__FILE__);
 }</code></pre>
By
<pre class="language-php"><code> public function onAuthenticationSuccess(Request $request, TokenInterface $token, $providerKey)
 {
 if ($targetPath = $this-&gt;getTargetPath($request-&gt;getSession(), $providerKey)) {
 return new RedirectResponse($targetPath);
 }

 return new RedirectResponse($this-&gt;urlGenerator-&gt;generate('default'));
 }</code></pre>
Finally, create the following controller symfony/src/Controller/DefaultController.php
<pre class="language-php"><code>&lt;?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class DefaultController extends AbstractController
{
 /**
 * @Route("/", name="default")
 */
 public function index()
 {
 return $this-&gt;render('default/index.html.twig', [
 'controller_name' =&gt; 'DefaultController',
 ]);
 }

 /**
 * @Route("/private", name="private")
 */
 public function private()
 {
 $this-&gt;denyAccessUnlessGranted('ROLE_USER');
 return $this-&gt;render('default/index.html.twig', [
 'controller_name' =&gt; 'DefaultController',
 ]);
 }
}</code></pre>
Now, all you have to do is register a new user, by accessing to the path /register and to login, use the path /login.
P.S. - Please let me know if you have a easier and cleaner way, without bundles.

Creating a private area with authentication in Symfony 4.3

My experience upgrading a Phalcon PHP 1.3.5 application to 3.4.2

In the last couple of weeks I've been working on the upgrade of framework Phalcon on the existing platform from version 1.3.5 to 3.4.2.

In the last couple of weeks I've been working on the upgrade of framework Phalcon on the existing platform from version 1.3.5 to 3.4.2.
Whenever you thing about an upgrade jumping to a major version of an existing framework it's usually a nightmare, due to the code deprecations and BC (Binary Compatibility) breaks.
However, I must admit I was quite surprised with the changes needed, tipicaly it basicly resumed to the following:
<pre class="language-php"><code> public function setDI($dependencyInjector) -&gt; public function setDI(\Phalcon\DiInterface $dependencyInjector)

 On the classes extending \Phalcon\Mvc\Controller instead of being able to use $this-&gt;di, it changed to $this-&gt;_dependencyInjector or $this-&gt;getDi(). In my opinion the usage of $this-&gt;getDi() is recommended.

 public function format ($message, $type, $timestamp, $context) -&gt; public function format ($message, $type, $timestamp, $context = null)

 protected function _engineRender ($engines, $path, $silence, $mustClean, $cache) -&gt; protected function _engineRender($engines, $viewPath, $silence, $mustClean, \Phalcon\Cache\BackendInterface $cache = NULL)

 public function setVars ($vars, $merge=null) -&gt; public function setVars(array $params, $merge = NULL)

 public function validate($validator, $attribute) -&gt; public function validate(\Phalcon\Validation $validation, $attribute)

 isSetOption() -&gt; hasOption()</code></pre>
And the most anoying one if the validation limit. In version 1.3.x we could use `max` =&gt; null and it would consider the value unlimited, however in 3.4.2 you need to specify a value...
That's it, has you can see there aren't a lot of changes needed
&nbsp;

Phalcon PHP Upgrade

the KISS way

Today, while working on a project with <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a> and <a href="https://vuex.vuejs.org/" target="_blank" rel="noopener">VueX</a>, I found an apparent limitation of the vuex store.

Today, while working on a project with&nbsp;<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>&nbsp;and&nbsp;<a href="https://vuex.vuejs.org/" target="_blank" rel="noopener">VueX</a>, I found an apparent limitation of the vuex store.
It seem that it's not possible to pass parameters to a getter, when it's being mapped by&nbsp;<a href="https://vuex.vuejs.org/api/#mapgetters" target="_blank" rel="noopener">mapGetters</a>.
I've declared normally my getter in the store like the following:
<pre class="language-javascript"><code>getters: {
 getProcess: state =&gt; processId =&gt; {
 return state.process.processId;
 }
}</code></pre>
Then, imported has a computed property, inside my vue.js component
<pre class="language-javascript"><code>import { mapGetters } from 'vuex';

export default {
 computed: {
 ...mapGetters(['getProcess'])
 }
};</code></pre>
but when I tried to use it in the template section
<pre class="language-javascript"><code>{{ getProcess(1) }}</code></pre>
I was getting the following error in the browser console
<pre class="language-javascript"><code>TypeError: a.getProcess is not a function</code></pre>
Apparently is seem that you can't call directly into the template a getter from a store with parameters, therefor a way to overcome this limitation is by adding the following method into you component
<pre class="language-javascript"><code>methods: {
 getProcessFromStore(processId) {
 return this.getProcess(1);
 }
}</code></pre>
turning your script section into the following:
&nbsp;
<pre class="language-javascript"><code>&lt;script&gt;
import { mapGetters } from 'vuex';

export default {
 computed: {
 ...mapGetters(['getProcess'])
 },
 methods: {
 getProcessFromStore(processId) {
 return this.getProcess(1);
 }
 }
};
&lt;/script&gt;</code></pre>
and you only have to change your template into
&nbsp;
<pre class="language-javascript"><code>{{ getProcessFromStore(1) }}</code></pre>
That's it, although it doesn't makes a lot of sense for not being able to inject directly the variable to the store getter, this is due to the fact of the computed properties are by default <a href="https://vuejs.org/v2/guide/computed.html#Computed-Setter" target="_blank" rel="noopener">getter-only</a>.

How to pass parameters to a Vuex store getter

With some help from jayson

Today, I had to implement a JSON-RPC client for the Vue.js project I'm working on. Since there wasn't any library available, I thought it would be a good idea to return to the community with a custom made a library to help others.&nbsp;

Today, I had to implement a JSON-RPC client for the Vue.js project I'm working on. Since there wasn't any library available, I thought it would be a good idea to return to the community with a custom made a library to help others.&nbsp;
I've started by by installing a very well knowned library called <a title="Jayson" href="https://github.com/tedeh/jayson" target="_blank" rel="noopener">Jayson</a>. This library was an implementation of JSON-RPC for client and server side for node.js, the only thing I had to do was import it to Vue.js.
I've started by creating a new file, with the following:
<pre class="language-javascript"><code>'use strict';

import jayson from 'jayson/lib/client';

export default {
 install: function(Vue, url = url, ssl = false) {
 let client = jayson.http({
 host: url
 });
 if (ssl) {
 client = jayson.https({
 host: url
 });
 }

 Object.defineProperty(Vue.prototype, '$JaysonRPC', { value: client });
 }
};
</code></pre>
then, to allow it to be used in all the project, I've open my main.js file and imported this new library
<pre class="language-javascript"><code>import JaysonRPC from 'jayson-rpc-vue';

Vue.use(JaysonRPC, '&lt;URL&gt;', false);</code></pre>
Finally, inside my App.vue file I only have to call it by using
<pre class="language-javascript"><code>this.$JaysonRPC.request('method_name', payload, (err, response) =&gt; {
 if (err) throw err;
 console.log(response.result); // 2
});</code></pre>
That's it, if any one need this library, it's already available on <a title="jayson-rpc-vue" href="https://www.npmjs.com/package/jayson-rpc-vue" target="_blank" rel="noopener">npm</a> or on <a href="https://github.com/pedroresende/jayson-rpc-vue" target="_blank" rel="noopener">github</a>.
Any suggestions of improvement are welcome.
NOTE (12-07-2018): Since jayson library had some limitations (missing credentials), I've decided to create a new one based on fetch.js, it's available on <a href="https://www.npmjs.com/package/vue-json-rpc-client-fetch-withcredentials" target="_blank" rel="noopener">npm</a> or on <a href="https://github.com/pedroresende/vue-json-rpc-client-fetch-withcredentials" target="_blank" rel="noopener">github</a>.

How to Create a JSON-RPC Client for Vue.js

The quick and easy way

Since last week I had been working with Vue.js and struggling to get it working with jquery. I know you're probably thinking that the ideia behind Vue.js is to replace jquery....&nbsp;

Since last week I had been working with <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a> and struggling to get it working with jquery. I know you're probably thinking that the ideia behind Vue.js is to replace jquery but actually it can be really hand to have it.
Therefore, to start, I advise you to use <a href="https://cli.vuejs.org/" target="_blank" rel="noopener">Vue CLI</a> and I assume you already have it <a href="https://cli.vuejs.org/guide/creating-a-project.html#installation" target="_blank" rel="noopener">installed</a> in your system.
Let's start by creating a new vue project
<pre class="language-markup"><code>$ vue create new-project</code></pre>
Once it's finished, let's add jquery to it
<pre class="language-markup"><code>$ npm install jquery --save</code></pre>
or if you are a yarn guy, you'll have to run
<pre class="language-markup"><code>$ yarn add jquery --save</code></pre>
Now, let's create a new file, called vue.config.js and add the following code
<pre class="language-javascript"><code>const webpack = require('webpack')

module.exports = {
 chainWebpack: config =&gt; {
 config.plugin('define').tap(definitions =&gt; {
 definitions[0] = Object.assign(definitions[0], {
 $: 'jquery',
 jquery: 'jquery',
 'window.jQuery': 'jquery',
 jQuery: 'jquery',
 _: 'lodash'
 })
 return definitions
 })
 }
}</code></pre>
edit you .eslintrc.js file and add the following lines
<pre class="language-javascript"><code> globals: {
 $: false,
 jQuery: false,
 },</code></pre>
this will allow the validation to work correctly.
Finally, add the following in side main.js, under the src folder
<pre class="language-javascript"><code>window.$ = window.jQuery = window.jquery = require("jquery");</code></pre>
It's all done&nbsp;<img src="../../../../../static/tinymce/js/tinymce/plugins/emoticons/img/smiley-smile.gif" alt="smile" />.
If you want to test it, simply edit src/vuews/Home.vue file and change it to the following:
<pre class="language-javascript"><code>&lt;template&gt;
 &lt;div class="home"&gt;
 &lt;img src="../assets/logo.png"&gt;
 &lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
 name: "home",
 components: {
 HelloWorld
 },
 mounted() {
 console.log($(".home").html());
 }
};
&lt;/script&gt;
</code></pre>
start vue development environment
<pre class="language-markup"><code>$ yarn serve</code></pre>
open your browser in http://localhost:8080, open you console, by pressing F11 and you'll see the following
<pre class="language-markup"><code>Home.vue?76f2:18 &lt;img src="/img/logo.82b9c7a5.png"&gt;&lt;div data-v-469af010="" class="hello"&gt;&lt;h1 data-v-469af010=""&gt;Welcome to Your Vue.js App&lt;/h1&gt;&lt;p data-v-469af010=""&gt;
 For guide and recipes on how to configure / customize this project,&lt;br data-v-469af010=""&gt;
 check out the
 &lt;a data-v-469af010="" href="https://cli.vuejs.org" target="_blank"&gt;vue-cli documentation&lt;/a&gt;.
 &lt;/p&gt;&lt;h3 data-v-469af010=""&gt;Installed CLI Plugins&lt;/h3&gt;&lt;ul data-v-469af010=""&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"&gt;babel&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank"&gt;pwa&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank"&gt;eslint&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 data-v-469af010=""&gt;Essential Links&lt;/h3&gt;&lt;ul data-v-469af010=""&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://vuejs.org" target="_blank"&gt;Core Docs&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://forum.vuejs.org" target="_blank"&gt;Forum&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://chat.vuejs.org" target="_blank"&gt;Community Chat&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://twitter.com/vuejs" target="_blank"&gt;Twitter&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 data-v-469af010=""&gt;Ecosystem&lt;/h3&gt;&lt;ul data-v-469af010=""&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://router.vuejs.org" target="_blank"&gt;vue-router&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://vuex.vuejs.org" target="_blank"&gt;vuex&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"&gt;vue-devtools&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://vue-loader.vuejs.org" target="_blank"&gt;vue-loader&lt;/a&gt;&lt;/li&gt;&lt;li data-v-469af010=""&gt;&lt;a data-v-469af010="" href="https://github.com/vuejs/awesome-vue" target="_blank"&gt;awesome-vue&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;</code></pre>

How to use jQuery with Vue.js

New year, new blog. Since this blog was made to increase my knowledge of Symfony, by implementing all the logic behind it. I've decided to increase my knowledge, but this time on a new language...

New year, new blog. Since this blog was made to increase my knowledge of Symfony, by implementing all the logic behind it (Controllers, Doctrine, Routes, etc...).
I've decided to increase my knowledge, but this time on a new language.
I've thought about using node.js, however since I already knew the node and the lack of defined structure I've decided to go for a different path.
The two remaining options were <a href="https://www.google.pt/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwid9e_MhunYAhXIwBQKHX1VCVUQFggoMAA&amp;url=http%3A%2F%2Frubyonrails.org%2F&amp;usg=AOvVaw0epiqyAbLyZLd_L0nxpc1u" target="_blank" rel="noopener">Ruby on Rails</a> or <a href="https://www.python.org/" target="_blank" rel="noopener">Python</a>, after searching the great sea of the internet, I've decided to take a chance on Python due it's knowned performance out of the box. I must say that I'm pleasant surprised and I'm amazed about it can be done with so few lines of code in Python.
In terms of web framework, I've analyzed <a href="http://flask.pocoo.org/" target="_blank" rel="noopener">Flask</a> and <a href="https://www.djangoproject.com/" target="_blank" rel="noopener">Django</a>, but since this was my first experience I've decided with Django, since it has everything out of the box and ready.
Although there are some differences between PHP and Python, I must say I'm pretty impressed about it's simplicity and the ability of doing great things in a short time. I've took 2 days to get everything up and running and I've got the say the result is pretty awsome.
In terms of performance, comparing Symfony with Django, I also must say that Django is a winner :).
In fact I've loved some much Python and Django, that I've also decided to renew <a href="https://www.pedro.resende.biz" target="_blank" rel="noopener">my personal homepage</a>, using these two options.
That is it for now, I'll continue to write a articles about my daily development changes and leave some tips for all of you.

Blog version 2.0

Docker is a fast grower in open source software development. Follow our simple steps to easily set up a Docker environment in your project.

Let's start at the beginning and explain a bit what a docker is. In simple words, a docker is a standardised unit of software that is independent of its host.&nbsp;
&nbsp;

<h1>What exactly is Docker?</h1>
Let's start at the beginning and explain a bit what <a href="https://www.docker.com/what-container#/package_software" target="_blank" rel="noopener">a docker</a> is. In simple words, a docker is a standardised unit of software that is independent of its host. The <a href="https://www.docker.com/community-edition" target="_blank" rel="noopener">Docker open platform</a> makes it easier for developers to create, deploy and run applications within containers instead of virtual machines, adding a layer of abstraction. A container is an abstraction at the application layer that packages code and dependencies together, therefore eliminating the overhead of a full copy of an operating system.
Before getting started to build our environment, you need to install <a href="https://www.docker.com/community-edition#/download" target="_blank" rel="noopener">Docker</a> and <a href="https://docs.docker.com/compose/install/" target="_blank" rel="noopener">Docker image</a>.
<h1>The structure</h1>
Let&rsquo;s define the structure of our Docker environment:
We have 4 folders and the first one &ndash; build &ndash; is responsible for storing the information about each of the dockers that will live in our container. The second one &ndash; logs - will be used to store the log file from NGINX and PHP. The mysql folder will store the database in a persistent way in the host and finally the symfony folder will host the Symfony installation.
-&gt; build -&gt; logs -&gt; mysql -&gt; symfon
Inside the build folder, let&rsquo;s start by creating two folders, one for NGINX and another PHP:
-&gt; nginx
-&gt; php
<h1>NGINX docker</h1>
Inside NGINX folder, let&rsquo;s create a file called Dockerfile, which will host the necessary packages:
<pre class="language-php"><code>FROM debian:stretch

RUN apt-get update &amp;&amp; apt-get install -y nginx vim nano
COPY nginx.conf /etc/nginx/nginx.conf
ADD sites-enabled /etc/nginx/sites-enabled
RUN rm /etc/nginx/sites-enabled/default

WORKDIR /var/www/html/symfony

EXPOSE 80
EXPOSE 443

CMD ["nginx"]</code></pre>
Explaining a bit, each of the base commands declared inside our Docker file:
<ul>
<li>FROM is to define in which image this docker will be based on, in our case I&rsquo;ll use the latest build from Ubuntu,</li>
<li>RUN is used to execute command inside the docker,</li>
<li>COPY will copy a specific file from the host to the docker,</li>
<li>ADD will copy a specific folder from the host to the docker,</li>
<li>WORKDIR is used to define the base folder inside the docker,</li>
<li>EXPOSE defines the ports that will be available to connect from the host to the guest,</li>
<li>CMD is responsible for executing a command/command.</li>
</ul>
In this docker file, we&rsquo;ll install NGINX packages on Ubuntu images and will copy the nginx.conf file from the host and add the content of the folder sites-enabled and finally execute NGINX.
Inside the nginx.conf file we have the following:
<pre class="language-php"><code>user www-data;
pid /run/nginx.pid;

worker_processes 1;
daemon off;

events {
 worker_connections 768;
 # multi_accept on;
}

http {
 client_max_body_size 20M;

 ##
 # Basic Settings
 ##
 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 keepalive_timeout 65;
 types_hash_max_size 2048;
 # server_tokens off;
 # server_names_hash_bucket_size 64;
 # server_name_in_redirect off;

 include /etc/nginx/mime.types;
 default_type application/octet-stream;

 ##
 # SSL Settings
 ##
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
 ssl_prefer_server_ciphers on;

 ##
 # Logging Settings
 ##
 access_log /var/log/nginx/access.log;
 error_log /var/log/nginx/error.log;

 ##
 # Gzip Settings
 ##
 gzip on;
 gzip_disable "msie6";
 gzip_vary on;
 gzip_proxied any;
 gzip_comp_level 6;
 gzip_buffers 16 8k;
 gzip_http_version 1.1;
 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

 ##
 # Virtual Host Configs
 ##
 include /etc/nginx/conf.d/*.conf;
 include /etc/nginx/sites-enabled/*;
}</code></pre>
Typically this is the base of nginx.conf file, with the exception of running on a single process, due to worker_process and running on the foreground with daemon off;
Inside the sites-enabled folder, we&rsquo;ll have a unique file, called default_symfony with the following:
<pre class="language-php"><code>server {
 server_name _;

 root /var/www/html/symfony/web;

 location / {
 # try to serve file directly, fallback to app.php
 try_files $uri /app_dev.php$is_args$args;
 }

 # DEV
 # This rule should only be placed on your development environment
 # In production, don't include this and don't deploy app_dev.php or config.php
 location ~ ^/(app_dev|config)\.php(/|$) {
 fastcgi_pass php:9000;
 fastcgi_split_path_info ^(.+\.php)(/.*)$;
 include fastcgi_params;
 # When you are using symlinks to link the document root to the
 # current version of your application, you should pass the real
 # application path instead of the path to the symlink to PHP
 # FPM.
 # Otherwise, PHP's OPcache may not properly detect changes to
 # your PHP files (see https://github.com/zendtech/ZendOptimizerPlus/issues/126
 # for more information).
 fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
 fastcgi_param DOCUMENT_ROOT $realpath_root;
 }

 # PROD
 location ~ ^/app\.php(/|$) {
 fastcgi_pass php:9000;
 fastcgi_split_path_info ^(.+\.php)(/.*)$;
 include fastcgi_params;
 # When you are using symlinks to link the document root to the
 # current version of your application, you should pass the real
 # application path instead of the path to the symlink to PHP
 # FPM.
 # Otherwise, PHP's OPcache may not properly detect changes to
 # your PHP files (see https://github.com/zendtech/ZendOptimizerPlus/issues/126
 # for more information).
 fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
 fastcgi_param DOCUMENT_ROOT $realpath_root;
 # Prevents URIs that include the front controller. This will 404:
 # http://domain.tld/app.php/some-path
 # Remove the internal directive to allow URIs like this
 internal;
 }

 # return 404 for all other php files not matching the front controller
 # this prevents access to other php files you don't want to be accessible.
 location ~ \.php$ {
 return 404;
 }

 error_log /var/log/nginx/error.log;
 access_log /var/log/nginx/access.log;
}</code></pre>
This file is the default Symfony configuration for NGINX, with the exception of fastcgi_pass php:9000. This will tell NGINX to use the PHP from the host PHP.
<h1>PHP docker</h1>
Inside PHP folder, let&rsquo;s create a file called Dockerfile, which will host the necessary packages:
<pre class="language-php"><code>FROM ubuntu:17.10

RUN apt-get update &amp;&amp; apt-get install -my \
 curl \
 wget \
 php-curl \
 php-fpm \
 php-gd \
 php-xsl \
 php-mysqlnd \
 php-mcrypt \
 php-cli \
 php-intl \
 php-bz2 \
 php-zip \
 php-mbstring \
 git \
 zip \
 php-apcu \
 php-redis \
 php-opcache

RUN mkdir /run/php

ADD conf/www.conf /etc/php/7.1/fpm/pool.d/www.conf
ADD conf/php-fpm.conf /etc/php/7.1/fpm/php-fpm.conf

RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer
RUN chmod +x /usr/local/bin/composer
RUN ln -snf /usr/share/zoneinfo/Europe/Lisbon /etc/localtime

WORKDIR /var/www/html/symfony

EXPOSE 9000

CMD ["php-fpm7.1"]</code></pre>
In this docker file, we&rsquo;ll install PHP packages on Ubuntu image with composer and will copy the www.conf and php-fpm.conf files from the host and add the content of the guest folders.
Inside www.conf add
<pre class="language-php"><code>[www]
user = www-data
group = www-data
listen = 0.0.0.0:9000
listen.owner = www-data
listen.group = www-data
pm = dynamic
pm.max_children = 5
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 3
chdir = /</code></pre>
And php-fpm.conf file
<pre class="language-php"><code>[global]
pid = /run/php/php7.1-fpm.pid
error_log = /var/log/php7.1-fpm.log
daemonize = no
include=/etc/php/7.1/fpm/pool.d/*.conf</code></pre>
And the base configuration for this Dockerfile, that will host PHP is done.
<h1>Docker-compose (The Connector)</h1>
Finally, the docker-compose.yml file will be responsible for connecting all the dockers with a local network, inside that file we&rsquo;ll have:
<pre class="language-php"><code>version: '3'

services:
 php:
 build: build/php
 expose:
 - '9000'
 depends_on:
 - db
 volumes:
 - ./:/var/www/html/symfony:cached
 - ./logs:/var/log
 web:
 build: build/nginx
 restart: always
 ports:
 - '81:80'
 depends_on:
 - php
 - db
 volumes:
 - ./:/var/www/html/symfony:cached
 - ./logs:/var/log/nginx
 db:
 image: mysql/mysql-server:latest
 environment:
 - MYSQL_DATABASE=${MYSQL_DATABASE}
 - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
 - MYSQL_ROOT_HOST=${MYSQL_ROOT_HOST}
 ports:
 - '3307:3306'
 volumes:
 - ./mysql:/var/lib/mysql</code></pre>
We&rsquo;ll have 3 dockers, one for php the will expose the port 9000 to be consumed by nginx and deal with the php files. Another for nginx, called web that will expose the por 81 to the host to be able to access the docker container and the last one db, which will run mysql.
To start the environment you&rsquo;ll need to run the command:
<pre class="language-php"><code>$ docker-compose build</code></pre>
That will build the containers.
Remember to add your project to the Symfony folder or simply run:
<pre class="language-php"><code>$ docker-compose up</code></pre>
To start the docker network.
Now, all you have to do is open your browser on the address <a href="http://localhost:81" target="_blank" rel="noopener">http://localhost:81</a>.
As you can see, it&rsquo;s not that hard! I hope this guide is useful and makes your developer days easier.

How to setup Docker for a Symfony Project with Nginx

How to call Symfony's cache:clear service ?

This week, while working on a project for a customer, I've decided to implement a clear cache service command.

This week, while working on a project for a customer, I've decided to implement a clear cache service command.
I know I've done something similar in the <a href="https://devblog.pedro.resende.biz/cache-clear-method/" target="_blank" rel="noopener">past</a>, but this time the idea was to use a service.
I've started by creating a new folder, under your bundle called Services.
In side that folder, I've add a&nbsp;file called Cache.php with the following:
<pre class="language-php"><code>&lt;?php
 
namespace Acme\Services;
 
use Symfony\Component\Console\Input\ArgvInput;
use Symfony\Bundle\FrameworkBundle\Console\Application;
 
/**
 * Cache Class responsible for dealing with clear cache command
 *
 * @author Pedro Resende &lt;pedroresende@mail.resende.biz&gt;
 */
class Cache
{
 /**
 * Symfony's Kernel Service
 *
 * @var [type]
 */
 private $kernel;
 
 public function __construct($kernel)
 {
 $this-&gt;kernel = $kernel;
 }
 
 /**
 * This Method is responsible for triggering the cache clear command
 *
 * @return void
 */
 public function clearCache()
 {
 $input = new Argvinput(array('console','cache:clear'));
 $application = new Application($this-&gt;kernel);
 $application-&gt;run($input);
 }
}
</code></pre>
<pre> Now, open you services.yml file, under Acme/Resources/services.yml, and add the following:</pre>
<pre class="language-php"><code> clear.cache:
 lazy: true
 class: Acme\Services\Cache
 arguments: [@kernel]</code></pre>
Now, to call this service inside a Controller, you'll simply will need to do:
<pre class="language-php"><code>$cache = $this-&gt;container-&gt;get('clear.cache');
$cache-&gt;clearCache();</code></pre>
Finally, you have to run the following command, to support the <a href="https://symfony.com/doc/current/service_container/lazy_services.html" target="_blank" rel="noopener">lazy service</a>.
<pre class="language-php"><code>$ composer require ocramius/proxy-manager</code></pre>
And it will clear your cache

Cache Clear Service

Sometime you might want to migrate from an existing PHP application to Symfony in order to continue the development of your old spaghetti code application.
&nbsp;

Sometime you might want to migrate from an existing PHP application to Symfony in order to continue the development of your old spaghetti code application.
You have two possibilities to do that:
<ol>
<li>Rewrite all the controllers, routes and create entities for all your existing tables that sometimes give you problems due to missing relations or primary keys or</li>
<li>You can encapsulate your old application into a bundle</li>
</ol>
In this post I&rsquo;ll address the second approach since in the majority of the cases it will take too much time and the costs will be too high to rewrite all the application.
We&rsquo;ll start by create a new bundle to deal with the legacy application and it&rsquo;s controller
<pre class="language-php"><code>$ php bin/console generate:bundle --namespace=LegacyBundle --dir=src --no-interaction </code></pre>
it will output something like the following &nbsp;<code></code>
<pre class="language-php"><code>Bundle generation 

&gt; Generating a sample bundle skeleton into app/../src/LegacyBundle 

created ./app/../src/LegacyBundle/ 
created ./app/../src/LegacyBundle/LegacyBundle.php 
created ./app/../src/LegacyBundle/Controller/ 
created ./app/../src/LegacyBundle/Controller/DefaultController.php 
created ./app/../tests/LegacyBundle/Controller/ 
created ./app/../tests/LegacyBundle/Controller/DefaultControllerTest.php 
created ./app/../src/LegacyBundle/Resources/views/Default/ 
created ./app/../src/LegacyBundle/Resources/views/Default/index.html.twig 
created ./app/../src/LegacyBundle/Resources/config/ 
created ./app/../src/LegacyBundle/Resources/config/services.yml 

&gt; Checking that the bundle is autoloade 
&gt; Enabling the bundle inside app/AppKernel.php 
updated ./app/AppKernel.php 
&gt; Importing the bundle's routes from the app/config/routing.yml file 
updated ./app/config/routing.yml 

&gt; Importing the bundle's services.yml from the app/config/config.yml file 
updated ./app/config/config.yml 
Everything is OK! 
Now get to work :). </code></pre>
<pre><code></code></pre>
Let's start by removing the DefaultController.php, since it's not needed and create a new one
<pre class="language-php"><code>$ rm src/LegacyBundle/Controller/DefaultController.php 

$ touch src/LegacyBundle/Controller/LegacyController.php </code></pre>
Inside our new controller let's add the following:<code class="php"></code>
<pre class="language-php"><code>&lt;?php 

namespace LegacyBundle\Controller; 

use Symfony\Bundle\FrameworkBundle\Controller\Controller; 
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException; 
use Symfony\Component\HttpFoundation\File\File; 
use Symfony\Component\HttpFoundation\File\Exception\FileNotFoundException; 
use Symfony\Component\HttpFoundation\Request; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Component\Security\Core\Authentication\Token\UsernamePasswordToken; 
use Symfony\Component\Security\Http\Event\InteractiveLoginEvent; 
use Symfony\Component\Security\Core\Exception\UsernameNotFoundException; 

class LegacyController extends Controller { 

 /** 
 * This method is responsible for returning the legacy content 
 * 
 * @param Symfony\Component\HttpFoundation\Request $request Symfony's request 
 * @param string $path The Path where the fetch the file 
 * @return Symfony\Component\HttpFoundation\Response Symfony's response 
 */ 
 public function fallbackAction(Request $request, $path)
 { 
 $response = new Response(); 
 $legacyContent = __DIR__.'/../legacy_app'.$request-&gt;getRequestUri(); 
 if (substr($legacyContent, -1) == '/') { 
 $legacyContent .= 'index.php'; 
 } 

 $arguments = strpos($legacyContent, '?'); 
 if ($arguments != 0) { 
 
 $legacyContent = substr($legacyContent, 0, $arguments); 
 if (strpos($legacyContent, 'index.php') == 0) { 
 $legacyContent .= 'index.php'; 
 } 
 } 

 try { 
 return $this-&gt;returnResponse($legacyContent, $response, $request); 
 } catch(FileNotFoundException $e) { 
 throw new NotFoundHttpException("Page not found $e"); 
 } 
 } 

 private function returnResponse($legacyContent, $response, $request) 
 { 
 $file = new File($legacyContent); 
 if ($file-&gt;getExtension() == 'php') { 

 ob_start(); 

 include $legacyContent; 

 $content = ob_get_clean(); 

 $authenticationHelper = $this-&gt;get('authentication.helper'); 

 if ($_SESSION['logged']) { 
 $authenticationHelper-&gt;authenticateInSymfony($_SESSION['id'], $request); 
 } else { 
 $authenticationHelper-&gt;logout(); 
 } 
 } else { 
 $content = file_get_contents($legacyContent); 
 if (strpos($legacyContent, '.css')) { 
 $response-&gt;headers-&gt;set('Content-Type', 'text/css'); 
 } else { 
 $response-&gt;headers-&gt;set('Content-Type', $file-&gt;getMimeType()); 
 } 

 $response-&gt;setPublic(); 
 $response-&gt;setMaxAge(3600); 
 $date = new \DateTime(); 
 $date-&gt;modify('+3600 seconds'); 

 } 

 $response-&gt;setStatusCode(Response::HTTP_OK); 
 $response-&gt;setContent($content);

 return $response; 
 } 
} </code></pre>
<pre><code class="php"></code></pre>
Let's analyse a bit the code, the fallbackAction method is responsible for dealing with the request.<code></code>
<pre class="language-php"><code>$legacyContent = __DIR__.'/../legacy_app'.$request-&gt;getRequestUri(); 
if (substr($legacyContent, -1) == '/') { 
 $legacyContent .= 'index.php'; 
}</code></pre>
<pre><code></code></pre>
this chunk of code will verify if the $legacyContent variable ends with a "/" and if it does, it will append 'index.php' at the end.<code></code>
<pre class="language-php"><code>$arguments = strpos($legacyContent, '?'); 
if ($arguments != 0) { 
 $legacyContent = substr($legacyContent, 0, $arguments); 

 if (strpos($legacyContent, 'index.php') == 0) { 
 $legacyContent .= 'index.php'; 
 } 
}</code></pre>
<pre><code></code></pre>
This will remove all the parameters from the url, because if we have parameters from the provided URL it won't match an existing file.
The method returnResponse($legacyContent, $response, $request) is responsible for dealing with the content itself. If the file existing I&rsquo;ll start by verifying if it is a PHP file and if it is it will buffer the output into a $content variable and will deal with the authentication.
On the other hand, if it isn&rsquo;t a PHP&nbsp;file, then I&rsquo;ll fetch the file contents and store it using the file_get_contents and at the end I&rsquo;ll return the response. In the first glance, this seems to be very simple however I&rsquo;ll describe a bit more the problems that I&rsquo;ve found with this approach:
<ul>
<li>Session sharing between Symfony and legacy application</li>
<li>Concerning global variables inside the legacy application</li>
<li>Authentication in Symfony through the legacy application</li>
<li>Catching the path, including the slash &ldquo;/&ldquo; &nbsp;</li>
</ul>
In order to address the problem of sharing sessions I&rsquo;ve followed the documentation about&nbsp;<a title="Bridge a legacy Application with Symfony Session" href="http://symfony.com/doc/current/session/php_bridge.html" target="_blank" rel="noopener">Bridge a legacy Application with Symfony Session</a>
The Global variables, you&rsquo;ll have to declare them before starting the ob_start() and then it will work perfectly
About the authentication, it is actually really simple and this is how I&rsquo;ve implemented.
I&rsquo;ve declared a new service, inside service.yml:<code></code>
<pre class="language-markup"><code>services:
 authentication.helper:
 class: LegacyBundle\Helper\AuthenticationHelper
 arguments: ["@security.token_storage", "@event_dispatcher", "@security.authorization_checker"]</code></pre>
<pre><code></code></pre>
And the content of the AuthenticationHelper is the following:<code></code>
<pre class="language-php"><code>&lt;?php 

namespace LegacyBundle\Helper;

use Symfony\Component\HttpFoundation\Request; 
use Symfony\Component\Security\Core\Authentication\Token\AnonymousToken;
use Symfony\Component\Security\Core\Authentication\Token\UsernamePasswordToken; 
use Symfony\Component\Security\Core\Exception\UsernameNotFoundException; 
use Symfony\Component\Security\Http\Event\InteractiveLoginEvent; 

class AuthenticationHelper { 
 private $securityTokenStorage;
 private $eventDispatcher;
 private $securityAuthorizationChecker;

 public function __construct($securityTokenStorage, $eventDispatcher, $securityAuthorizationChecker) { 
 $this-&gt;securityTokenStorage = $securityTokenStorage; 
 $this-&gt;eventDispatcher = $eventDispatcher;
 $this-&gt;securityAuthorizationChecker = $securityAuthorizationChecker;
 } 

 /**
 * 
 * This method is responsible for authenticating a user if it isn't authenticated yet 
 *
 * @param int $userId The user Id of the user to authenticate
 * @param Request $request The request 
 * @param string $level The level can be either ROLE_USER or ROLE_ADMIN 
 */ 
 public function authenticateInSymfony($userId = null, Request $request, $level = 'ROLE_USER') 
 { 
 if (!$this-&gt;securityAuthorizationChecker-&gt;isGranted('IS_AUTHENTICATED_FULLY')) { 
 if ($userId == null) { 
 throw new UsernameNotFoundException('User not found');
 } else {
 $token = new UsernamePasswordToken($userId, null, 'main', [$level]);
 $this-&gt;securityTokenStorage-&gt;setToken($token);

 //now dispatch the login event
 $event = new InteractiveLoginEvent($request, $token); 
 $this-&gt;eventDispatcher-&gt;dispatch('security.interactive_login', $event); 
 } 
 } 
 } 

 /** 
 * This method is responsible for logging out the user 
 */ 
 public function logout()
 { 
 if ($this-&gt;securityAuthorizationChecker-&gt;isGranted('IS_AUTHENTICATED_FULLY')) { 
 $token = new AnonymousToken(null, 'anon.', ['IS_AUTHENTICATED_ANONYMOUSLY']); 
 $this-&gt;securityTokenStorage-&gt;setToken($token); 
 }
 } 
}</code></pre>
<pre><code></code></pre>
Finally, the path. This one took me awhile but it was quite simple, in the routing.yml file you only need to add<code></code>
<pre class="language-php"><code>legacy_site:
 path: /{path}
 defaults: { _controller: LegacyBundle:Legacy:Legacy }
 requirements: 
 path: .*</code></pre>
P.S. - Just added the github <a title="repository" href="https://github.com/pedroresende/legacy-migration-to-symfony" target="_blank" rel="noopener">repository</a> with this article's tutorial.

How to migrate a Legacy application to Symfony ?

The Internet brave new World

For the last three months, I've been working for a customer doing a migration from Wordpress to a ...

For the last three months, I've been working for a customer doing a migration from Wordpress to a custom solutions with <a title="React.js" href="https://facebook.github.io/react/" target="_blank" rel="noopener">React.js</a>&nbsp;+ <a title="Azure Microservices" href="https://azure.microsoft.com/pt-pt/free/" target="_blank" rel="noopener">Azure Microservices</a>.
I have to say that at the beginning,&nbsp;<a title="React.js" href="https://facebook.github.io/react/" target="_blank" rel="noopener">React.js</a>&nbsp;seemed to be a bit strange, however, today, I believe it's a perfect candidate to integrate with <a title="Symfony" href="https://symfony.com" target="_blank" rel="noopener">Symfony</a>.
I'll explain a possible integration, this is only and example, if any of you believe there is a better approach, please leave a comment.
Let's start by installing Symfony<code></code>
<pre class="language-php"><code>$ symfony new reactintegration</code></pre>
<pre><code></code></pre>
Now that we have a symfony installation, let's begin with the part of react.js integration
<pre class="language-php"><code>$ cd reactintegration
$ npm init .</code></pre>
Now that we have a npm project at the root of our Symfony installation, lets install the needed packages
<pre class="language-php"><code>$ npm install --save react react-dom babel-loader babel-core babel-preset-es2015 babel-preset-react react-hot-loader react-router webpack jquery
</code></pre>
<pre>Let's start by creating a <a style="font-family: Verdana, Arial, Helvetica, sans-serif;" title="Babel Installation" href="https://babeljs.io/docs/plugins/preset-es2015/" target="_blank" rel="noopener">babel</a>&nbsp;presets for react and ES2015. This will allow to write ES2015 and React.js JSX into current javascript</pre>
<pre class="language-php"><code>$ vi .babelrc</code></pre>
Add to the file
<pre class="language-php"><code>{
 "presets" : ["es2015", "react"]
}</code></pre>
Edit package.js file and add the following on the "scripts" section<code></code>
<pre class="language-php"><code> "scripts": {
 "build": "webpack",
 "watch": "webpack --watch",
 },</code></pre>
<pre><code></code></pre>
Now, lets create our webpack.config.js
<pre class="language-php"><code>$ vi webpack.config.js</code></pre>
Add the following inside<code></code>
<pre class="language-javascript"><code>var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'web');
var APP_DIR = path.resolve(__dirname, 'react');
var config = {
 entry: [
 APP_DIR + '/app.jsx',
 ],
 output: {
 path: BUILD_DIR,
 filename: 'app.bundle.js',
 },
 module: {
 loaders: [{
 test: require.resolve("jquery"),
 loader: "imports?jQuery=jquery"
 }, {
 test: /.jsx?$/,
 loader: 'babel-loader',
 exclude: /node_modules/,
 query: {
 presets: ['es2015', 'react']
 }
 }, {
 test: /\.css$/,
 loaders: ['style', 'css', 'less']
 }]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin(),
 new webpack.DefinePlugin({
 'process.env': {
 'NODE_ENV': JSON.stringify('production')
 }
 }),
 ],
};

module.exports = config;</code></pre>
<pre><code></code></pre>
Now, lets create our React.js source
<pre class="language-php"><code>$ mkdir react

$ vi app.jsx</code></pre>
I'll add some demonstration code, that will allow you to see this example in action<code></code>
<pre class="language-javascript"><code>import React from 'react';

import {render} from 'react-dom';

import {
 Router,
 Route,
 IndexRoute,
 Link,
 browserHistory,
 Redirect,
 IndexRedirect
} from 'react-router';

var Homepage = React.createClass({
 render: function() {
 return (
 HEllo World
 )
 }
});


var Homepage2 = React.createClass({
 render: function() {
 return (
 HEllo World2
 )
 }
});

var Homepage404 = React.createClass({
 render: function() {
 return (
 404
 )
 }
});

render((
 &lt;Router history={browserHistory}&gt;
 &lt;Route path="/"&gt;
 &lt;IndexRoute component={Homepage}/&gt;
 &lt;Route path="hi" component={Homepage2}/&gt;
 &lt;Route path="*" component={Homepage404}/&gt;
 &lt;/Route&gt;
 &lt;/Router&gt;
), document.getElementById('app'));
</code></pre>
<pre><code></code>We're almost there, now we all need to do is add the app.bundle.js to our Symfony part</pre>
<pre class="language-php"><code>$ vi app/Resources/default/index.html.twig</code></pre>
Replace all the content with<code></code>
<pre class="language-php"><code>{% extends 'base.html.twig' %}

{% block body %}
 &lt;div id="app"&gt;&lt;/div&gt;
{% endblock %}

{% block javascripts %}
 &lt;script src={{ asset('app.bundle.js') }} type="text/javascript"&gt;&lt;/script&gt;
{% endblock %}
</code></pre>
<pre><code></code>Let's prepare our Controller to deal with React.js<code></code></pre>
<pre class="language-php"><code>$ vi src/AppBundle/Controller/DefaultController.php</code></pre>
<pre><code></code></pre>
Replace the all the content with<code></code>
<pre class="language-php"><code>&lt;?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
 /**
 * @Route("/api/{slug}", name="API")
 */
 public function apiAction(Request $request, $slug = null)
 {
 // replace this example code with whatever you need
 // Symfony Backend integration
 }

 /**
 * @Route("/", name="homepage")
 * @Route("/{slug}", name="homepage2")
 */
 public function indexAction(Request $request, $slug = null)
 {
 // replace this example code with whatever you need
 return $this-&gt;render('default/index.html.twig', [
 'base_dir' =&gt; realpath($this-&gt;getParameter('kernel.root_dir').'/..').DIRECTORY_SEPARATOR,
 ]);
 }
}</code></pre>
<pre><code></code></pre>
Now, eveytime you access to "/" our "/{slug}" it will used&nbsp;react-router, the "/api/{slug}" it will use Symfony
To end, we need to "compile" react.js into our app.bundle.js, to do that run the following command
<pre class="language-php"><code>$ npm run watch</code></pre>
This way, everytime you make a change to app.jsx it will re-create a new app.bundle.js file
Now start symfony's server by running
<pre class="language-php"><code>$ php bin/console server:run</code></pre>
and access with your browser to&nbsp;
<pre class="language-php"><code>http://localhost:8080/</code></pre>
You'll see "HEllo World", if you try to access "/lsakdjjksda" you'll be reddirect to the 404 React.js route but if you access to "/api/" the response will be from symfony.
That is it, please let me know if you propose a different approach, the code is available at this <a title="Github" href="https://github.com/pedroresende/reactjs-symfony-boiler-plate" target="_blank" rel="noopener">link</a>.

Symfony with React.js frontend Integration

Extra precious stuff missing

This week, while working for a client's task, I had to implement a custom user&nbsp;provider for Symfony which would validate the user from a webservice.

This week, while working for a client's task, I had to implement a custom user&nbsp;provider for Symfony which would validate the user from a webservice.
At first glance, this is a quite simple task, the only thing you really need to do is follow this <a href="http://symfony.com/doc/current/cookbook/security/custom_provider.html" target="_blank" rel="noopener">tutorial</a>. However, while implementing the solution when I had this
<pre class="language-php"><code>&lt;?php

namespace AppBundle\Security\User;

use Symfony\Component\Security\Core\User\UserProviderInterface;
use Symfony\Component\Security\Core\User\UserInterface;
use Symfony\Component\Security\Core\Exception\UsernameNotFoundException;
use Symfony\Component\Security\Core\Exception\UnsupportedUserException;

class WebserviceUserProvider implements UserProviderInterface

{

 public function loadUserByUsername($username)
 {
 // make a call to your webservice here
 $userData = ...
 // pretend it returns an array on success, false if there is no user

 if ($userData) {
 $password = '...';
 // ...

 return new WebserviceUser($username, $password, $salt, $roles);
 }

 throw new UsernameNotFoundException(
 sprintf('Username "%s" does not exist.', $username)
 );

 }

 

 public function refreshUser(UserInterface $user)
 {
 if (!$user instanceof WebserviceUser) {
 throw new UnsupportedUserException(
 sprintf('Instances of "%s" are not supported.', get_class($user))
 );
 }

 return $this-&gt;loadUserByUsername($user-&gt;getUsername());
 }

 public function supportsClass($class)
 {
 return $class === 'AppBundle\Security\User\WebserviceUser';
 }
}</code></pre>
I asked myself
"This looks wunderfull, however where the hell is the password entered by the user ?"
This is the perfect question, since the tutorial shows the example where the custom User Provider would authenticate with an external webservice but no information how to pass the user password to that service.
That's when, after diging into the container and the request I've manage to get to this solution&nbsp;
<pre class="language-php"><code>&lt;?php

namespace AppBundle\Security\User;

use Symfony\Component\Security\Core\User\UserProviderInterface;
use Symfony\Component\Security\Core\User\UserInterface;
use Symfony\Component\Security\Core\Exception\UsernameNotFoundException;
use Symfony\Component\Security\Core\Exception\UnsupportedUserException;

class WebserviceUserProvider implements UserProviderInterface
{
 private $container;
 private $logger;

 public function __construct($container, $logger)
 {
 $this-&gt;container = $container;
 $this-&gt;logger = $logger;
 }
 
 public function loadUserByUsername($username)
 {
 $request = $this-&gt;container-&gt;get('request');
 $password = $request-&gt;request-&gt;get('_password'); //User Password
 
 // make a call to your webservice here
 $userData = ...
 // pretend it returns an array on success, false if there is no user
 
 if ($userData) {
 $password = '...';
 
 // ...
 
 return new WebserviceUser($username, $password, $salt, $roles);
 }
 
 throw new UsernameNotFoundException(
 sprintf('Username "%s" does not exist.', $username)
 );
 }
 
 public function refreshUser(UserInterface $user)
 {
 if (!$user instanceof WebserviceUser) {
 throw new UnsupportedUserException(
 sprintf('Instances of "%s" are not supported.', get_class($user))
 );
 }
 return $this-&gt;loadUserByUsername($user-&gt;getUsername());
 }

 
 public function supportsClass($class)
 {
 return $class === 'AppBundle\Security\User\WebserviceUser';
 }
}
</code></pre>
The service will be declared has
<pre class="language-php"><code> custom.user_provider:
 class: AppBundle\Security\User
 arguments: [ @service_container, @logger ]</code></pre>
The logger is not needed, however I'm using it to log the authentication

Symfony's custom login handler

Is assetic really bad ?!?

For those&nbsp;who have been using symfony since version 2.0, assetic has been a great help to keep css/js files...

For those&nbsp;who have been using symfony since version 2.0, assetic has been a great help to keep css/js files inside your bundles and to help you to minify them. However, for some strange or insane reason,&nbsp;<a href="http://fabien.potencier.org" target="_blank" rel="noopener">Fabien Potencier</a>, the father of Symfony, decided that Assetic Bundle should be <a href="https://github.com/symfony/symfony-standard/pull/860" target="_blank" rel="noopener">removed</a>&nbsp;from symfony-standard package since Symfony is a PHP Backend&nbsp;framework and css/js are the responsibility of the FrontEnd developer and given that they should manage the css/js files in another way (grunt.js, gulp.js or npm)...
In my opinion this doesn't make any sense and given that I'll explain how to "install" assetic bundle into Symfony 2.8/3.0+.
Start by adding to composer.json the requirement of assetic-bundle and update the vendors
<pre class="language-php"><code>$ composer require symfony/assetic-bundle
$ composer update</code></pre>
After a while, you'll notice your vendors are updated. Now, lets add the Assetic bundle to AppKernel.
<pre class="language-php"><code>$ vi app/AppKernel.php</code></pre>
Inside the $bundles array add
<pre><code>new Symfony\Bundle\AsseticBundle\AsseticBundle(),</code></pre>
Now, to end you only need to add to config.yml
<pre class="language-php"><code>$ vi app/config/config.yml</code></pre>
the following
<pre><code></code></pre>
<pre class="language-php"><code># Assetic Configuration
assetic:
 debug: "%kernel.debug%"
 use_controller: false
 bundles: [ ]
 #java: /usr/bin/java
 filters:
 cssrewrite: ~
 #closure:
 # jar: "%kernel.root_dir%/Resources/java/compiler.jar"
 #yui_css:
 # jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"</code></pre>
<pre><code></code></pre>
And that is it, you are good to go :)

How To Add Assetic to Symfony 2.8/3.0

The New LTS

Fabien Potencier aka as the&nbsp;father&nbsp;of Symfony, released the latest version of the Symfony Framework Family, this time it was 2.8. This new version is an LTS with support until November&nbsp;2018.
As usual, this new version comes with many&nbsp;<a href="http://symfony.com/blog/symfony-2-8-0-beta1-released" target="_blank">new features and enhancements</a>.
The most intresting feature, IMHO of course are:
<ul>
<li>Foundation form layout integration;</li>
<li>Console&nbsp;progress indicator helper;</li>
<li>Console table columns styles;</li>
<li>New Symfony Profiler and web debug toolbar;</li>
<li>Removed Assetic Bundle from Symfony-Standard installer</li>
</ul>

Symfony 2.8 Released

Event Listeners How to

Today I'm going to explain how to create an event listener to record every login failure attempt.

Today I'm going to explain how to create an event listener to record every login failure attempt.
To start, in your TestBundle, inside EventListener folder add a new class called OnLoginFailListener.
It will have the following appearance
<pre class="language-php"><code>&lt;?php

namespace PedroResende\TestBundle\EventListener;

use Symfony\Component\Routing\RouterInterface;
use Symfony\Component\HttpFoundation\Session\Session;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;
use Symfony\Component\Security\Core\SecurityContextInterface;
use Symfony\Component\HttpFoundation\RedirectResponse;

/**
 * Description of OnLoginFailListener
 *
 * @author Pedro Resende &lt;pedroresende@mail.resende.biz&gt;
 */
class OnLoginFailListener implements AuthenticationFailureHandlerInterface
{

 private $router;
 private $session;
 private $container;

 /**
 * Constructor
 */
 public function __construct(RouterInterface $router, Session $session, $container)
 {
 $this-&gt;router = $router;
 $this-&gt;session = $session;
 $this-&gt;container = $container;
 }

 public function onAuthenticationFailure(Request $request, AuthenticationException $exception)
 {
 // Whatever you would like to do ;)
 $request-&gt;getSession()-&gt;set(SecurityContextInterface::AUTHENTICATION_ERROR, $exception);
 return new RedirectResponse($this-&gt;router-&gt;generate('login'));
 }

}</code></pre>
on your Resources/config/service.yml file add
<pre class="language-php"><code>parameters:
 onloginfaillistener.class: PedroResende\TestBundle\EventListener\OnLoginFailListener
services:
 kernel.listener.authentication_failure_event_listener:
 class: %onloginfaillistener.class%
 arguments: [@router, @session, @service_container]</code></pre>
And that is it ;)

Symfony On Login Failure Listener

BDD: Behavior-Driven Development with symfony

Today, I've decided to start writting bdd tests into my Symfony projects. However the available&nbsp;<a title="behat" href="http://docs.behat.org/en/v2.5/" target="_blank" rel="noopener">documentation</a>&nbsp;isn't quite the most straight forward.

Today, I've decided to start writting bdd tests into my Symfony projects. However the available <a title="behat" href="http://docs.behat.org/en/v2.5/" target="_blank" rel="noopener">documentation</a>&nbsp;isn't quite the most straight forward. The steps are quite simples, to beging with, start by installing a new Symfony project
<pre class="language-php"><code>$ symfony new bdd</code></pre>
Enter your symfony project and run the following composer
<pre class="language-php"><code>$ composer require behat/behat behat/symfony2-extension behat/mink-extension behat/mink behat/mink-goutte-driver behat/mink-selenium2-driver
</code></pre>
Let's edit a new behat.yml file and add the following content
<pre class="language-php"><code>default:
 extensions:
 Behat\Symfony2Extension: ~
 Behat\MinkExtension:
 base_url: http://en.wikipedia.org
 goutte: ~
 selenium2: ~
 suites:
 my_suite:
 type: symfony_bundle
 bundle: AppBundle</code></pre>
Let's now initiate our behat project, by running
<pre class="language-php"><code>$ bin/behat --init --suite=my_suite</code></pre>
To finished edit your FeatureContext file, located in features/bootstrap/AppBundle/Features/Context/FeatureContext.php and replace it's content by
<pre class="language-php"><code>&lt;?php

namespace AppBundle\Features\Context;

use Behat\Behat\Context\ClosuredContextInterface,
 Behat\Behat\Context\TranslatedContextInterface,
 Behat\Behat\Context\BehatContext,
 Behat\Behat\Exception\PendingException;
use Behat\Gherkin\Node\PyStringNode,
 Behat\Gherkin\Node\TableNode;

use Behat\MinkExtension\Context\MinkContext;

/**
 * Defines application features from the specific context.
 */
class FeatureContext extends MinkContext
{

}</code></pre>
Finally to verify that everything is fine, run
<pre class="language-php"><code>$ bin/behat -dl</code></pre>
You should see the list of mink definitions.
Now you can start implementing your feature in a new feature file in side your bundle :)

How to use Behat with Symfony

How can use legacy datatypes ?

Today, while working on a project for a customer, I&nbsp;was using a legacy extension inside a Symfony bundle.

Today, while working on a project for a customer, I&nbsp;was using a legacy extension inside a Symfony bundle.
Everything was working smoothly, except for the fact that when trying to access a content with a custom "legacy" datatype, eZ Publish was returning the following error
<pre class="language-php"><code>Exception occured. Error: Could not find 'Content' with identifier 'array ( 'id' =&gt; '384', 'languages' =&gt; NULL, 'versionNo' =&gt; 1, )' with code: 404
</code></pre>
As you can imagine, this Exception is everything except clear... After investigating I've found out that if the "legacy" datatype was removed the content was returned.
I've concluded that a custom fieldtype was needed, but the value of that fieldtype could be ignored...
I've started by reading the <a href="https://doc.ez.no/display/EZP/eZ+Publish+5+Field+Type+Tutorial" target="_blank" rel="noopener">Custom FieldType documentation</a>, but in my case I'd need something to be ignored, like nullable.
After looking into ezpublish-kernel, I've found out that some "legacy" attributes are nullable, for instance "eznum", "ezidentifier", "ezinisetting", etc...
So what I did was declare the following inside my service.yml
<pre class="language-php"><code>service:
 custom.fieldType.legacydatatype:
 class: %ezpublish.fieldType.eznull.class%
 parent: ezpublish.fieldType
 arguments: [ "legacydatatype" ]
 tags:
 - {name: ezpublish.fieldType, alias: legacydatatype}
 
 custom.fieldType.legacydatatype.converter:
 class: %ezpublish.fieldType.eznull.converter.class%
 tags:
 - {name: ezpublish.storageEngine.legacy.converter, alias: legacydatatype, lazy: true, callback: '::create'}
</code></pre>
And "magically" the content started being returned correctly :)&nbsp;
I may think it's pretty simple, but I almost lost 2 hours looking for a clean way to do this.

eZ Publish 5.x Custom nullable fieldtype

Fabien Potencier aka as the&nbsp;father&nbsp;of Symfony, released the latest version of the Symfony Framework Family, this time it was 2.7. This new version is an LTS with support until May 2018.
As usual, this new version comes with 100 <a href="http://symfony.com/blog/symfony-2-7-0-beta1-released" target="_blank">new features and enhancements</a>&nbsp;and <a href="http://www.php-fig.org/psr/psr-7/" target="_blank">PSR-7</a>&nbsp;support.
The most intresting feature, IMHO of course are:
<ul>
<li>Add a twig profiler;</li>
<li>Track and report deprecated classes and interfaces;</li>
<li>New Asset component, and of course</li>
<li>PSR-7 support.</li>
</ul>
&nbsp;

Symfony 2.7 Released

How to call Symfony's cache:clear command ?

This week, while working on a project, I've decided to implemente a cache clear function.

This week, while working on a project, I've decided to implemente a cache clear function.
After investigating a while, I've found out the easiest way was by calling Symfony command
<pre class="language-php"><code>$ php app/console cache:clear</code></pre>
However, using something like
<pre class="language-php"><code>exec("php app/console cache:clear"); </code></pre>
doesn't seems the best option.
It was when I've found something like
<pre class="language-php"><code>&lt;?php

use Symfony\Component\Console\Input\ArgvInput;
use Symfony\Bundle\FrameworkBundle\Console\Application;

class Something {

 private function cacheClear() {
 $input = Argvinput(array('console','cache:clear'));
 $application = new Application($this-&gt;get('kernel'));
 $application-&gt;run($input);
 }
}</code></pre>
You can see it's a pretty simple method that does the expected job in a clean way ;)

Cache Clear Method

How to Create Friendly Configuration for a Bundle

This passed few days I've spend some time working on a new bundle, and decided that I wanted to create a specific configuration.&nbsp;

This passed few days I've spend some time working on a new bundle, and decided that I wanted to create a specific configuration. Since it's a process that doesn't have much information on, I've decided to write a few lines, can also be considered notes, about how to do it.
I've started to investigate on Symfony's online <a title="How to Create Friendly Configuration for a Bundle" href="http://symfony.com/doc/current/cookbook/bundles/configuration.html" target="_blank" rel="noopener">documentation</a>, however some steps are missing.
To beging I'll assum that you already have a bundle create, let's consider that your bundles's name is TestBundle.
Start by opening the DependencyInjection folder inside your bundle.
You'll notice that there are two files inside:
<ul>
<li>Configuration.php, and</li>
<li>TestExtension.php</li>
</ul>
Start by opening Configuration.php file, inside you should have something like:
<pre class="language-php"><code>&lt;?php

namespace TestBundle\DependencyInjection;

use Symfony\Component\Config\Definition\Builder\TreeBuilder;
use Symfony\Component\Config\Definition\ConfigurationInterface;

/**
 * This is the class that validates and merges configuration from your app/config files
 *
 * To learn more see {@link http://symfony.com/doc/current/cookbook/bundles/extension.html#cookbook-bundles-extension-config-class}
 */
class Configuration implements ConfigurationInterface
{
 /**
 * {@inheritdoc}
 */
 public function getConfigTreeBuilder()
 {
 $treeBuilder = new TreeBuilder();
 $rootNode = $treeBuilder-&gt;root('pedro_resende_test');

 return $treeBuilder;
 }
}
</code></pre>
Let's start by adding
<pre class="language-php"><code> $rootNode
 -&gt;children()
 -&gt;arrayNode('twitter')
 -&gt;children()
 -&gt;integerNode('client_id')-&gt;defaultValue('123')-&gt;end()
 -&gt;scalarNode('client_secret')-&gt;defaultValue('123')-&gt;end()
 -&gt;end()
 -&gt;end() // twitter
 -&gt;end()
 ;
</code></pre>
&nbsp;It should look like
<pre class="language-php"><code>&lt;?php

namespace TestBundle\DependencyInjection;

use Symfony\Component\Config\Definition\Builder\TreeBuilder;
use Symfony\Component\Config\Definition\ConfigurationInterface;

/**
 * This is the class that validates and merges configuration from your app/config files
 *
 * To learn more see {@link http://symfony.com/doc/current/cookbook/bundles/extension.html#cookbook-bundles-extension-config-class}
 */
class Configuration implements ConfigurationInterface
{
 /**
 * {@inheritdoc}
 */
 public function getConfigTreeBuilder()
 {
 $treeBuilder = new TreeBuilder();
 $rootNode = $treeBuilder-&gt;root('test');

 $rootNode
 -&gt;children()
 -&gt;arrayNode('twitter')
 -&gt;children()
 -&gt;integerNode('client_id')-&gt;defaultValue('123')-&gt;end()
 -&gt;scalarNode('client_secret')-&gt;defaultValue('123')-&gt;end()
 -&gt;end()
 -&gt;end() // twitter
 -&gt;end()
 ;

 return $treeBuilder;
 }
}</code></pre>
Open you terminal window and type
<pre class="language-php"><code>$ php app/console TestBundle</code></pre>
you should get something like&nbsp;
<pre class="language-php"><code># Current configuration for "TestBundle"
test:
 twitter:
 client_id: 123
 client_secret: $ecret</code></pre>
This is your bundle default configuration.
Now, it's time to load your configurations, to do that you'll need to open TestExtension.php
Inside, you'll see&nbsp;
<pre class="language-php"><code>&lt;?php

namespace PedroResende\TestBundle\DependencyInjection;

use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\Config\FileLocator;
use Symfony\Component\HttpKernel\DependencyInjection\Extension;
use Symfony\Component\DependencyInjection\Loader;

/**
 * This is the class that loads and manages your bundle configuration
 *
 * To learn more see {@link http://symfony.com/doc/current/cookbook/bundles/extension.html}
 */
class PedroResendeTestExtension extends Extension
{
 /**
 * {@inheritdoc}
 */
 public function load(array $configs, ContainerBuilder $container)
 {
 $configuration = new Configuration();
 $config = $this-&gt;processConfiguration($configuration, $configs);

 $loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
 $loader-&gt;load('services.yml');
 }
</code></pre>
<pre>Add, right after $config = $this-&gt;...</pre>
<pre class="language-php"><code> foreach ($config as $key =&gt; $value) {
 $container-&gt;setParameter('test.'.$key, $value);
 }</code></pre>
This will convert your bundle configuration to parameters, in order to get them you'll only need to use
To override the default configurations, add to app/config/config.yml
<pre class="language-php"><code>test:
 twitter:
 client_id: 123
 client_secret: $ecret</code></pre>
And that's it, it's not hard but there's no documentation refering the step of fetching your configuration and passing the values into parameters.

Symfony's friendly Configuration Bundle

The nightmare of the One-To-One Relation

This week, while working on a project, I've decided the implement correctly the database relations directly in the entity classes.

This week, while working on a project, I've decided the implement correctly the database relations directly in the entity classes.
After&nbsp;designing the database model in MySQL Workbench, I've decided to define the association Mapping as described in the <a href="http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/reference/association-mapping.html" target="_blank" rel="noopener">documentation</a>.
It was a simple One-To-One, Unidirectional relation between two tables and I've used like it was supposed to.
The first table was Page and the second one, Language.
<pre class="language-php"><code>&lt;?php
/** @Entity **/
class Product
{
 // ...

 /**
 * @OneToOne(targetEntity="Shipping")
 * @JoinColumn(name="shipping_id", referencedColumnName="id")
 **/
 private $shipping;

 // ...
}

/** @Entity **/
class Shipping
{
 // ...
}</code></pre>
When I've created the integration tests everything worked smoothly, however each time I tried adding a second entry to the database everything went south with the following error appearing.
Error Code: 1062 Duplicate entry 'saldjsdjald' for key 'id_language'
After googling it and hammering my head against the desk a few times, I've figured that Doctrine/ORM in the case of One-To-One relation creates an UNIQUE index !!! Of course they forgot to mention that on the documentation.
Thanks for the two hours I've spend googling the problem.
Seem the way to overcome this problem is to define a One-To-Many relation, using
<pre class="language-php"><code>/**
* @ORM/OneToMany(targetEntity="Language")
**/</code></pre>
This way it will simply create and index with the type INDEX and not UNIQUE.

Doctrine:ORM Nightmare

New Symfony release

Yesterday, Fabien Potencier aka as the&nbsp;father&nbsp;of Symfony, release the latest version of the Symfony Framework Family, this time it was 2.6.
Symfony new version has 100 new features than 2.5, the most interest ones IMHO are:
<ul>
<li><a href="http://symfony.com/blog/new-in-symfony-2-6-new-shortcut-methods-for-controllers" target="_blank">New shortcut methods for controllers</a>;</li>
<li><a href="http://symfony.com/blog/new-in-symfony-2-6-ajax-requests-in-the-web-debug-toolbar" target="_blank">AJAX requests in the web debug toolbar</a>, and</li>
<li><a href="http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme" target="_blank">Bootstrap form theme</a>.</li>
</ul>
In the next week I'll have to integrate FOSRestBundle and FOSUserBundle on a new project.
I'll add a few articles describing the configuration and implementation needed to integrate in a clean SF installation.

Symfony 2.6 Released

A little introduction on what's coming

I'd like to welcome all the readers of this blog, by making a brief presentation.
This blog was made as a study to learn a bit about the Symfony's framework, It's currently running version 2.5.7, but it will be update regulary in order to prevent possible problems and security issues.
Why Symfony ? You may ask, simply becase it's the framework I'm currently working on, since it's the base of eZ Publish.
You're probably wondering what's eZ Publish ? It's an enterprise grade CMS/CMX developed by <a href="http://ez.no" target="_blank">eZ Systems</a>, the company I'm proud of doing Q.A. for.
Other than development you might also have some IT related posts