Create a Symfony2 application

Create a new Symfony2 project by typing

composer create-project symfony/framework-standard-edition my_project_name "2.7.*"

Make indexAction load our React-application

Webpack will create a bundle.js file containing all our front-end logic, js-libraries, styling and views. Lets create a Symfony2-action that loads the bundle.js file.

src/AppBundle/Controller/DefaultController.php

/**
 * @Route("/", name="app")
 */
public function indexAction()
{
    return $this->render('default/index.html.twig');
}

Add script tags for loading the bundle.js file. When developing the file will load from a special development server (127.0.0.1:3000). This makes magical things like react-hot-loader possible.

app/Resources/views/base.html.twig

{% block javascripts %}
    {% if app.environment == 'dev' %}
        <script src="http://127.0.0.1:3000/static/bundle.js"></script>
    {% else %}
        <script src="{{ asset('dist/bundle.js') }}"></script>
    {% endif %}
{% endblock %}

The only thing we will need in index.html.twig is a HTML element that will be used to mount the React application.

app/Resources/views/default/index.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <div id="app"></div>
{% endblock %}

Our Symfony2 application is now ready to start serving the bundle.js file generated by Webpack!

Create a fallback url

We will use react-router to handle all front end routes in our application. All routes in our application will need to point to the indexAction we configured above.

app/config/routing.yml

fallback:
    pattern: /{url}
    defaults: { _controller: AppBundle:Default:index, url: null }
    requirements:
        url: .*