How To Develop A CRUD App with Symfony 6 & React
Technology

How To Develop A CRUD App with Symfony 6 & React

Archit Prajapati
Archit Prajapati
12 min read

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 systemEasy URI RoutingCode reusabilitySession handlingError log handlingSecurity related to cross-site requestsTwig templatingActive 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

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

To create migration, controller, react app controller and run the application with the help of this informative blog:

How To Develop A CRUD App with Symfony 6 & React

0

Discussion (0 comments)

0 comments

No comments yet. Be the first!