Symfony with React.js frontend Integration

  • Let’s start by installing Symfony
  • Now that we have a symfony installation, let’s begin with the part of react.js integration
  • Eveytime you access to “/” our “/{slug}” it will used react-router, the “/api/{slug}” it will use Symfony
  • I’ll add some demonstration code, that will allow you to see this example in action
  • Now that we have a npm project at the root of our Symfony installation, lets install the needed packages

Symfony with React.js frontend Integration – The Internet brave new World

@symfony_fi: Symfony with React.js frontend Integration #symfony #reactjs /kudos @pmmresende

For the last three months, I’ve been working for a customer doing a migration from WordPress to a custom solutions with React.js + Azure Microservices.

I have to say that at the beginning, React.js seemed to be a bit strange, however, today, I believe it’s a perfect candidate to integrate with Symfony.

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

Now that we have a symfony installation, let’s begin with the part of react.js integration

Now that we have a npm project at the root of our Symfony installation, lets install the needed packages

Let’s start by creating a babel presets for react and ES2015. This will allow to write ES2015 and React.js JSX into current javascript

Add to the file

Edit package.js file and add the following on the “scripts” section

Now, lets create our webpack.config.js

Add the following inside

Now, lets create our React.js source

I’ll add some demonstration code, that will allow you to see this example in action

We’re almost there, now we all need to do is add the app.bundle.js to our Symfony part

Replace all the content with

Let’s prepare our Controller to deal with React.js

Replace the all the content with

Now, eveytime you access to “/” our “/{slug}” it will used 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

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

and access with your browser to 

http://localhost:8080/

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 link.

Symfony with React.js frontend Integration