Skip to main content

Basic Prototype App with Symfony3

The objective of this is to build a simple route, and controller that handles this entire “application.”

The components of this simple prototype are essentially a bunch of HTML pages with interaction hard-coded or baked into the twig templates. So the objective here is to build the structure such that building a new template is all that is required and the application will then pick it up.

Assumptions

  1. Separately a custom controller handles exception catching and 404 errors.
  2. Everything, including authentication/authorization can be “faked”
    1. Presumably you’d hide this behind HTTP-Basic or keep local only.

The Route

The Controller

How it Works

Now all you need to do is build your filenames to match and you can create template files that work out of the box.

Now your routes map to filenames, which for the purposes of a simple static HTML prototype makes things very easy for any designer or developer to add and work with:

Route (path) Template filename
/jake/home DemoBundle\Resources\views\Jake\home.html.twig
/auth/forgot-password DemoBundle\Resources\views\Auth\forgot-password.html.twig
/jake/dashboard DemoBundle\Resources\views\Jake\dashboard.html.twig

API environment contextual responses with Symfony3 Subscribers for Dev vs. Non-Dev

According to the ideal 12 Factor App you want to store your configuration in the specific environment. This includes debugging, logging, and everything else your application does. When building an API, these days you want your response data to be JSON, unless you’re an XML holdout which case you’re still using XML. Regardless, while in production you want clear and concise error message responses that do not reveal too much information. However, outside of production you probably want a quick way to see at least the source file throwing the exception so you know where to begin without crawling logs for every iterative issue while in development. For this you’ll need your API response data to include some contextual debugging and/or exception information you normally wouldn’t want in your response. This is a perfect scenario for environment configuration, and Symfony has a great way we can handle this with an ExceptionSubscriber for “Dev” and for “Non-Dev” environments (in this example).

Here’s a brief breakdown of what we’re building:

  1. Service declaration for subscribing to exceptions in dev and default environments
  2. ExceptionSubscriber class that processes exceptions being thrown, and cleans up the response JSON (…and XML because we aren’t jerks).
  3. DevExceptionSubscriber that extends ExceptionSubscriber and adds some debug “stuff” to the response.

Declare the Default Service

Build ExceptionSubscriber

 

Extend ExceptionSubscriber for DevExceptionSubscriber

Here, we don’t filter any of the message content, so we can get the literal exception text thrown for exception classes we didn’t specifically write. This is particularly useful if we want to mask exceptions for invalid passwords so users cannot guess which usernames exist or not, and other business rule exceptions for Unauthorized or Access Denied messages where we don’t want to reveal too much.

Finally..

In use, you’ll know see responses like this:

CORS API supporting Symfony3 + Angular2

Is your API giving you trouble with a missing Access-Control-Allow-Origin header error?

Perhaps you enjoy living on the bleeding edge, and you’ve decided to build an app with Symfony3 + Anglar2 and you’ve seen this before?

XMLHttpRequest cannot load http://myapp.dev. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4000' is therefore not allowed access.

After many days of stressing and confusion I’ve identified what I believe to be the “easiest” solution to this problem, specifically if you’re using nginx.

Install nginx-extras (Debian/Ubuntu)

Configure NGINX

Failed Solutions

  1. I attempted nelmio/cors-bundle with limited success and various odd issues. Particularly the response would come back successful, but the browser would still react as if there was a 404 on the response Header. This resulted in Angular2 acting as though the response wasn’t even worth processing, and so it didn’t.
  2. I attempted hard-coding the header directly to the $response object in my frontend controller, but this made me feel dirty and ultimately was ignored by nginx anyway. I also would be shocked if this worked in any real environment using a load-balancer of any kind.
  3. Building a simplified version of nelmio/cors-bundle via a CorsListener EventListener yielded similar results to above in both respects. This appeared to be completely ignored by nginx, and resulted in no tangible change. An example implementation can be found here: https://www.snip2code.com/Snippet/87161/Allow-CORS-in-symfony2