This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

This holiday season, maximize your sales through enhanced website performance and 24/7 caring support. SAVE 30% NOW

Getting started With React in Symfony Using Webpack Encore

Updated on  15th August

6 Min Read
Reading Time: 6 minutes

Managing JavaScript files in Symfony-based application is easy, thanks to the the introduction of a pure-JavaScript library called Symfony Webpack Encore. It offers a simplified process for working with CSS and JavaScript files in Symfony. In my previous article on Getting Started with Vue.js in Symfony, I pointed out that Symfony as a PHP framework remains neutral when it comes to making a choice to implement the client logic and greater functionalities in web applications.

Keeping that in view, this post will demonstrate a step-by-step process for setting up a Symfony React application. React.js is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. Irrespective of how you prefer to use React in your application, either to build a single page app or to power a specific part of your frontend, by the time you have read this article in full, you will have had a good foundational knowledge on how to start a new project with React or introduce it into an existing Symfony encore application.

In this blog, you will learn to build a simple Symfony reactjs app that uses a backend API. Instead of setting up the backend service in this application, I’ll make use of a fake online REST API (JSONPlaceholder) for testing and prototyping purposes.

Prerequisites

A basic knowledge of React and Object oriented programming with PHP will help you get the best out of this article. Do ensure that you have Node.js and Yarn package manager installed on your system.

Setting Up a New Symfony Application

To kick-start, use composer to quickly set up a new Symfony project. Alternatively, set up a Cloudways account to launch a server and follow this tutorial to set up a Symfony 4 project in just a few minutes.

Open up the terminal and run the command mentioned below to create a new project named symfony-react-starter and install all the dependencies for a standard Symfony application:

Start the Application

By default, the application comes installed with a Symfony PHP web server for the development process. On production, you should use a web server like Nginx or Apache, Cloudways PHP hosting supports both. For now, open up your terminal and use the command mentioned below to change directory into the newly created project folder and start the development server:

The command mentioned above will create the development folder on http://localhost:8000. Open up that link in your favorite browser, you should see this:

symfony welcome page

Now having the application running, the next step is to configure Webpack Encore and initiate the setup of React.js for your application.

Configure Symfony Encore, Install React and Other Dependencies

As pointed out above, I will use Webpack Encore in this tutorial to set up React for the application. Therefore, you must run the command mentioned below to install Webpack Encore, React and other dependencies:

Once you are done with the configuration process, move on to the enabling of React in your application and also set up an entry point for Webpack Encore by navigating to ./webpack.config.js. Edit the file as shown below:

Finally, to complete this process, create a subdirectory named js within the assets folder and then add an app.js file into it.

Create The Route And Controller

In the terminal, run the command mentioned below to create a controller named DefaultController:

Open the newly created controller and edit as shown below:

You might also like: Symfony 4 : Routes, Controllers & Templates

Create the AppComponent

It’s time to create the AppComponent. For this, you must open the app.js and paste the content mentioned below, in it:

Here, you are basically importing React into the application and also importing an Item component which you will create at a later stage. Within the ComponentDidMount() life cycle method, you have to make an API call to https://jsonplaceholder.typicode.com/posts/, it will fetch the dummy post to test out application.

Creating the Items Component

The Items component basically receives props from the main component and renders the contents to the view. To set it up, create a new subfolder named Components within ./assets/js. Now, create a new file called Items.js inside the newly created folder. Open up this file and edit:

Bootstrap card is used here, to give each post a default layout and styling.

Display React Component Content

Navigate back to the default template generated for our application, include a div with an id of root. You will use it as React mount point. Edit the content of default/index.html.twig as shown below:

Base Template

Edit the application’s base template and include the compiled JavaScript file in it. Compilation command will execute in the next step.

Test the Symfony Application and See it Working

Now you can compile the asset which the Symfony template will use. See the changes by using the following command:

Also, ensure that your development server is currently running. If otherwise, open another terminal and navigate to the root directory of your project, then run the following command:

symfony react starter

You might also like: Create and Run PHP Unit Testing

Wrapping Up

Developing and successfully running an awesome application requires a lot of effort, time and tools. When it comes to working with Symfony Framework, a frontend library matters the most. Symfony gives you the opportunity to integrate great JavaScript libraries like React easily into your application, making your app’s front end really worthy and have a diligent look.

This article serves you as a quick guide on how to develop a fully functional Symfony React application using Webpack Encore. It’s a great JavaScript package that allows you to easily set up creative front-end applications in Symfony.

I hope you that you will find this Symfony Webpack Encore tutorial really useful. You can share your thoughts in the comment section below and feel free to check out the complete source code here on GitHub.

Share your opinion in the comment section. COMMENT NOW

Olususi k Oluyemi

A tech enthusiast, programming freak and a web development junkie who loves to embrace new technology.

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.