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.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Build a Symfony ecommerce application using React and Cloudinary

Updated on  29th September

15 Min Read
symfony ecommerce app
Reading Time: 15 minutes

The availability of modern web technology tools has made it extremely easy to build highly scalable web applications. With the access to frontend library like React, you can easily craft a dynamic and reasonable user interface irrespective of the complexity, architecture and scale of your product.

In an earlier article on getting started with React in Symfony using Webpack Encore, we discussed how to easily integrate React into an existing or a new Symfony application. Feel free to go through the article for comprehensive details.

This time, we’ll explore the stunning combination of Symfony and React further by building a product listing or Symfony ecommerce application.

What We Will Build?

The demo is a product listing application. Adding more features, will make it like a mini Symfony ecommerce store. For now, we will reduce the complexity and once done, will have a working application as shown below:

Here, in this demo, you can specify the name, description, price, and an image of your product. Once you click on the Add Product button, the React frontend application will make an HTTP call to the backend API developed in Symfony.

Furthermore, to properly manage image assets, we will employ the service of Cloudinary. Let’s start.

Prerequisites

This tutorial requires the knowledge of React, Object Oriented Programming with PHP and MVC web API patterns. To make the tutorial less difficult for newbies, we will endeavor to break down any complex implementation or logic. You will also need a Cloudinary account, kindly click here to create a free account.

Do ensure that you have Node.js and Yarn package manager installed on your system.

Structure of the Application

This application will have a backend API with a React frontend. The frontend will break into separate, reusable and independent UI components. For the backend, we will use Symfony to accept and process HTTP requests sent in by React.

Now that you have a clear picture of what we want to develop, let’s start by installing Symfony in order to set up the backend API.

Installing and Setting up Symfony for the Backend

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 the tutorial to set up a Symfony 4 project in just a few minutes.

To create a new standard Symfony project named product-listing-app and install all its dependencies, run the following command:

composer create-project symfony/website-skeleton product-listing-app

Running the Application

Start the application using the development server:

php bin/console server:run

Navigate to http://localhost:8000/ to see the welcome page:

Building the Symfony API

We will manually develop our own API from scratch. To begin with, we will generate doctrine entity and controller for the application.

Product Entity

Generate a  Product entity by running the command below:

$ php bin/console make:entity

If you are quite conversant with Symfony MakerBundle, you can optionally follow the prompt. Otherwise, locate Product.php within ./src/Entity folder and update it with the below-mentioned content:

Nothing strange here, we have only specified the required fields for our database.

Setup Product Controller

In the terminal, run the command mentioned below to create the ProductController

Open the newly created file and replace the index() method with the content below:

Create new product endpoint

Next, to the index() method, add a function to create products:

The method above will receive a POST HTTP request from the frontend and will save the details of the newly created products.

Points to note:

You must have noticed the usage of few custom functions like uploadImageToCloudinary(), and updateDatabase(). Let’s try to understand their purpose:

  • uploadImageToCloudinary(): It is meant to easily upload product’s images directly to Cloudinary. It was made and abstracted into a separate class as a service. We will brief this later in this tutorial.
  • updateDatabase(): a function to persist and flush data

JSON Response to List all Products

Next, we will create a function to fetch and return the list of all added products. Add the function below to the ProductController for that purpose:

The function above will return a JSON response that we will loop through by using React and will display it appropriately for all the users.

Ensure that the top of your controller has all the required declared class as shown below:

Within the ProductController we have been referring to a repository named ProductRepository. We will create it later in the tutorial. For now, just before the index(), include the following private properties and add a constructor method:

Create Favorite Count Endpoint

Similar to what is obtainable on most product listing or e-commerce websites, we will add a favorite button to the frontend part of our application. While in order to save the number of likes any of our listed products receive, we will create an API for that by adding the method below to the ProductController after the CreateProducts() method:

What we have done here is to find a particular product using the id, increase the favoriteCount by one (1) and finally persist with the numberOfCount for the selected product.

Add other important functions within this controller:

In case you missed any of the steps, find the complete ProductController() file here on GitHub

Creating the Service to Upload Images to Cloudinary

Set up Cloudinary Account

Cloudinary will manage the image assets of our application. Cloudinary is a media management platform for images and videos. In case you haven’t created an account yet, click here to start:

Once you are done, log in into your dashboard to obtain your account details:

Proceed to your Cloudinary dashboard and take note of your Cloud name, API Key and API Secret:

Create ImageUploader Service

To upload files, Cloudinary provides a PHP-SDK to facilitate the process within any PHP application. We will install this SDK via composer by running the command mentioned below:

Once the installation process is complete, create a new folder within the src folder and name it Service. Within this newly created folder, create a file named imageUploader.php. This will be a PHP class where the process of uploading images to Cloudinary will be configured. Open  the newly created file and update the content with:

To avoid unnecessary exposure of our Cloudinary credentials we will save in the default .env file.

Update .env file with your Cloudinary credentials

Open ./env and add the details mentioned below to the bottom

Don’t forget to replace the YUOR_CLOUD_NAME, YOUR_API_KEY and YOUR_API_SECRET with the appropriate details as obtained from the Cloudinary dashboard.

Create Product Repository

Now, we will create the product repository that we included earlier within our ProductController. One of the major benefits of using repository in any Symfony application is to isolate complex queries from our application controller. It is the best practice because it allows you to separate and abstract business logic into a different file entirely.

If you actually generated your controller using the makerBundle as we have done earlier, it would have created the ProductRepository.php file for you. You can find it in ./src/Repository folder. Open it and use the content below:

 

Set up and Configure Database

Open up the .env file within your project root directory. You should see something familiar to the following:

Update the values with the credentials of your MySQL database by replacing:

  1. db_user with your database username
  2. db_password with your database password
  3. db_name with your preferred database name. I have named mine product-listing

Once configured properly, you can use the command below to create your database:

Run Migration

Create a migration with:

And finally:

Building the React Frontend

We have now completed the implementation of logic for the backend API of our application, now let’s proceed with the frontend.

Install React and other Dependencies

We will use Webpack Encore to set up React. Run the commands below sequentially:

In addition, install the dependencies below as well:

Configure Symfony Encore

Here, we navigate to ./webpack.config.js to configure Webpack Encore and enable React in our application. Edit the file as shown below:

Finally in this section, create a subdirectory named js within the assets folder and then add an app.js file inside of it.

Creating the Application Components

We will create a folder to house all the components for our application. To start, create a subdirectory named components within the ./assets/js/ folder.

Add Product

Create the a component named ProductForm.js within the components folder and add the following content within:

This file is an example of a typical React component. What we have done here, is to import the required module from react and reactstrap. ReactStrap is a Stateless React component for Bootstrap 4. We also imported axios to make API HTTP calls within our component and a custom utility class that contains the BASE_URL for our app.

Next, we set the initial state for our form variables and declare two important methods which are:

  • fileChangeHandler(): We will use it to set the state of the image file for each product
  • submitForm(): will handle the form submission and pass the submitted data to the server.

Finally, we used React render() method to display the product form.

Upload Form Data to the Server

Let’s upload the form to the server. Within the submitForm(), add the method given below just before the closing curly bracket:

Next, add the _uploadToServer() method below and place it before the render() method of our ProductForm component:

Display the list of Products

To display the list of products to users, create another component file within the components folder and name it Products.js. Paste in the content below:

This component will not only display the list of products, but will also house both the ProductForm component and a favorite button component.

We created three different methods named addProduct(), favoriteIncrease() and getProducts() to bind the details of the product added, increase the count of favorite for each product and to fetch all products on component mount respectively.

Creating the Increase Component to Select Product as Favorite

Next, is the Favorite.js component. This component has already been rendered within the Product component. To set it up, create a new file inside components folder and use the content below:

Once clicking the favorite button, we will send a POST HTTP request to the server and increase the favorite count for the particular product.

Create Navigation Bar

We will keep things simple and create a file named Navbar.js as the Navigation bar component. Once you are done, add the following content:

Lastly create a file named util.js within the ./assets/js folder. This will house the endpoint of BASE_URL, CREATE_PRODUCT_URL, and PRODUCTS_URL of our application respectively. With this in place, we will have a central location for managing all the existing URLs and adding new ones if required.  Open the newly created file and add the following code:

Bringing it all Together by Updating the Main Component

Update the App component within the js folder as shown here :

We imported both the Navbar and Products component and attached it to render within an HTML element with an id named root. We will create this in a bit and use it to mount our React application.

Render the Main Component within Twig

To render the main component, open product homepage and paste the code below in it:

This template file was automatically generated when we ran a command to create the ProductController earlier. It is found inside ./template/product/index.html

Update the Base Template

Finally update the base template file by including a link to the CDN file for Bootstrap. Also add the compiled JavaScript file by Webpack Encore as shown below:

Try the Application

It’s time to test the application. If you had started the server earlier, the application should work fine for you. But if otherwise, open your terminal within the project directory and run the command below to start the development server:

Once the process mentioned above is complete, open another terminal and compile the React application using Webpack Encore by running:

Now, navigate to http://localhost:8000/ from your favorite browser and start by adding products.

Conclusion

This article serves as a guide to build an awesome application using Symfony as a backend and React to power the frontend logic. Obviously, more features, like authentication, add to cart feature, and others can be added to the demo – that we have built in this post – in order to make it a full blown mini Symfony ecommerce website.

In addition, for a commercial application, you might want to use API platform instead of crafting your own API from scratch, as it can be daunting and time consuming.

We hope that you will find this product listing application helpful and can easily implement the logic learnt on your existing or new applications. Feel free to download the complete source here on GitHub and add more features as you deem fit.

And lastly, you can share your thoughts and other issues in the comment section below.

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.