How To Develop A CRUD App with Symfony 6 & React

How To Develop A CRUD App with Symfony 6 and React
5 Minutes to read

Table Of Content

Introduction

Symfony is an open-source PHP framework for building web-based applications. It was developed by Fabien Potencier in 2005 and is sponsored by SensioLabs.

These are the great in-built features of Symfony.

  • MVC (Model View Controller) based system
  • Easy URI Routing
  • Code reusability
  • Session handling
  • Error log handling
  • Security related to cross-site requests
  • Twig templating
  • Active community

Version 6 of Symfony was just released, and there are numerous changes to the directory structure and integration flow that make it easier to comprehend and construct a web application compared to earlier versions.

In this post, we will see the initial installation, configuration, and implementation of CRUD operations using Symfony as the backend platform and React as the frontend platform. Let’s begin with the installation.

Installation Steps of Symfony 6

Installation of Symfony can be done using either the composer OR we can use the Symfony CLI also. Now please go into the particular directory in which you want to install Symfony 6.

-> Please make sure that your composer version >= 2

Installation using Composer

composer create-project symfony/website-skeleton crud-react-app-symfony-6

Installation using CLI

symfony new crud-react-app-symfony-6 --full

Assuming you have successfully installed an application on your local system.

Database and Environment Configuration

Now, let’s configure the database and other variables to be used in our web application.

Here, we need to work with the env file for the global variables. When we install Symfony 6, we will have an env file at the root.

Make sure to set the APP_ENV and it should be a dev to enable the debug logs in case there are some errors in our programming.

Open the .env file from the root and update the values for the below parameters.

APP_ENV = dev

DATABASE_URL = Your database parameters

Example: DATABASE_URL="mysql://username:password@localhost:3306/database_name?serverVersion=5.7&charset=utf8mb4"

Now the application is in development mode and your database is configured and connected.

If you have created a database using phpMyAdmin, then it is fine, but in case the database is not created, you can create a database using a simple command for the same.

php bin/console doctrine:database:create

Now, let’s create a database table that we are going to use for our CRUD operation.

Create a Database Entity

An entity is nothing but a class that represents the database table and its columns; the entity will be created in the /src/Entity directory.

There is a command that needs to be executed to create an entity and columns for the same. 

php bin/console make:entity

We need to follow these steps for all the columns that we are going to use in our CRUD demo. So here are the field lists that need to be followed.

email, password, contact, degree, designation, address

Here, contact and address are not required fields that we are going to consider in our demo, so you have to set them nullable. Yes.

Assuming entity creation is done, let’s migrate the entity so it will be used when you set up the demo on another server or reuse it in the future.

Create Migration

php bin/console make:migration

The above command creates the migration file in the migrations folder in your project root.

We need to execute one more command to migrate the entity in our database.

php bin/console doctrine:migrations:migrate

That’s all with entities and migration. You can check your database; there should be an employee table and the above-defined columns.

Now, we are going to create an API controller which will be used on the react side later in the demo.

Create Controller

The controller plays the middle man role, with each request and response being handled via the controller only.

Execute the below command to create our API controller. It will be created in the src/Controller folder.

php bin/console make:controller EmployeeController

Once the controller is created, we need to add the required API functions to the controller and it will be used in our CRUD operations.

src/Controller/EmployeeController.php

Now, let’s create a controller for the React application.

Create a React App Controller

Again, same as it is, we just need to execute a command to create a controller, but here the controller name is different.

php bin/console make:controller ReactappController

src/Controller/ReactappController.php

Let’s work on the template files now. We need to start with our base template and update it as per our requirements.

Work with Template Files

/templates/base.html.twig

After working on the base template, we need to update the React app template that was already created.

templates/reactapp/index.html.twig

We are done with the backend configuration and have set up all the necessary assets, so let’s move to the frontend.

Here, we need to install the required dependencies for the react before we start with the programming and there are some sets of commands we need to execute.

Install React Dependencies

Here we need to install the Encore, which is a Symfony bundle, and it will install the PHP and JavaScript dependencies.

composer require symfony/webpack-encore-bundle

yarn install

Now we are going to install React dependencies.

Additionally, as we are using React as our frontend technology, we are going to use SweetAlert instead of the core dialog box to make the alert message more beautiful.

npm install sweetalert2

Once dependencies are installed, we need to update the webpack configuration file as per our demo. The webpack.config.js file is already in the root of the project directory.

Webpack.config.js

Now, let’s create the react application necessary files along with the javascript and templates in our root /assets directory, but before that, we start the watcher so it will show the errors in case we missed anything.

We need to run this command to start development watchers.

yarn encore dev --watch

Here is the screenshot of the files that we need in our react application.

File Manager

These directories and files are based on the demo, you can adjust in your way as per your requirement for your application.

Now, let’s start with the Main.js file as you see in your screenshot.

assets/Main.js

Let’s create one common file which is a react template to load the layout of the content area.

/assets/components/Layout.js

let’s modify assets/app.js the file to include the main.js file
require('./Main');

Now we need to work on CRUD operation pages for the React application, so let’s create a pages folder inside the /assets folder.

So here we will create the add, edit, view, and listing pages for our CRUD operation demo as shown above in the screenshot.

/assets/pages/AddEmployee.js

/assets/pages/EditEmployee.js

/assets/pages/ListEmployee.js

/assets/pages/ViewEmployee.js

We are set to move forward with the real output now for our CRUD Symfony + React application.

We need to start the server now by executing the command.

Run the Application

symfony server:start

Once the server is up and running, it will show the localhost server URL like http://localhost:8000 and we can play with our demo using the same.

Add employee error image
Add Employee Added image
Edit Employee
Employee table
View Employee
Delete Employee

Conclusion

A great deal of effort, time, and resources are required to create and run a phenomenal program. 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 having a diligent look.

This post provides a concise path for developing a CRUD App with Symfony 6 and React. It is an excellent JavaScript library that facilitates the development of Symfony front-end apps. And if you have any questions, you can contact our Symfony expert, who will assist you by leading you further. Also, read our Blog on “Laravel vs Symfony.

How To Develop A CRUD App with Symfony 6 and React
Jigar Shah
Shah
Jigar Shah is the Founder of WPWeb Infotech - a leading Web Development Company in India, USA. Being the founder of the company, he takes care of business development activities and handles the execution of the projects. He is Enthusiastic about producing quality content on challenging technical subjects.

1 comment

  1. author_image
    Mass

    hello sir thanks for this blog it helped me 🙂

    what about the login page using react in symfony ?

Leave a comment

By continuing to use this website you agree to our a Cookie Policy.

Copy link