Step-by-Step Guide: How to create a Shopware app using AppServer

Shopware has emerged as the popular integrated tool for creating online stores and apps. The simplicity of Shopware makes it accessible to users without a technical background, allowing them to easily use and master the platform, further enhancing its list of benefits. In this post, we’ll look at how to use Symfony and the Shopware App Bundle to build a simple Shopware app and set up an app server. We’ll go over the procedures for developing a Shopware app.

You can create and integrate your own app with Shopware by following these steps:

Step 1: Creating a Basic Shopware App

Create a Shopware App Directory: Let us begin with creating a new directory for your app inside the custom/apps directory of your Shopware installation. Choose a suitable name for your app, such as “MyExampleApp”.

Example directory structure:

 

└── custom

   └── apps

      └── MyExampleApp

         └── manifest.xml

 

Define the manifest.xml File: The manifest.xml file serves as the core of your app, defining the interface between your app and the Shopware instance. It contains important information about your app. Open the manifest.xml file and add the following code:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/Framework/App/Manifest/Schema/manifest-2.0.xsd">
    <meta>
        <name>MyExampleApp</name>
        <label>Label</label>
        <label lang="de-DE">Name</label>
        <description>A description</description>
        <description lang="de-DE">Eine Beschreibung</description>
        <author>Your Company Ltd.</author>
        <copyright>(c) by Your Company Ltd.</copyright>
        <version>1.0.0</version>
        <icon>Resources/config/plugin.png</icon>
        <license>MIT</license>
    </meta>
</manifest>

Add Your App Logo: Create a new folder named Resources/config inside the MyExampleApp folder. Copy your app logo file (e.g., plugin.png) into the Resources/config folder.

Install and Activate the App: Utilize the Shopware CLI to install and activate your app. From the root directory of your Shopware installation, run the following command.

bin/console app:install –activate MyExampleApp

Step 2: Creating an App Server using Symfony and the Shopware App Bundle

Create a New Symfony Project: Start by creating a new Symfony project using the following command:

composer create-project symfony/skeleton:”6.2.*” my-app

Install the App Bundle: Navigate to the project directory and install the Shopware App Bundle using Composer:

cd my-app

composer require shopware/app-bundle

• Update the Database Details: Open the .env file in your Symfony project and update the DATABASE_URL parameter with your actual database connection details.
• Generate Migration Files: Install the necessary packages to generate migration files:

composer require symfony/maker-bundle –dev

composer require migrations

Generate the migration files using the following commands:

php bin/console make: migration

php bin/console doctrine:migrations: migrate

• Run the App Server: You can start the Symfony app server using the following command:

symfony server:start

This will run your app server at http://127.0.0.1:8000 by default.

Step 3: Connecting Shopware and the App Server

Open the Shopware manifest.xml file: Locate the manifest.xml file in your Shopware app project and add the following code inside the <setup> section:

<setup>

    <registrationUrl>http://127.0.0.1:8000/app/lifecycle/register</registrationUrl>

    <secret>TestSecretCode</secret>

</setup>

Update the App Server Environment File: Open the environment file (usually .env) of your app server (Symfony project). Update the following lines:

###> shopware/app-bundle ###

SHOPWARE_APP_NAME=MyExampleApp

SHOPWARE_APP_SECRET=TestSecretCode

###< shopware/app-bundle ###

• Reinstall the Shopware App or Clear Cache: After making the changes, reinstall your Shopware app or clear the cache to apply the updates.
• Check the Shop Table in the App Server Database: After reinstalling the app, you can verify that the Shopware app’s details are inserted into the shop table of your app server’s database

By following these steps, you will have successfully set up the app server and connected Shopware with your app server. You can now start developing and integrating your app with Shopware.

Step 4: Creating a Custom Page in App Server (Symfony) and Connecting it to Shopware 

Create a Controller: Generate a new controller file by running the following command in your terminal:

symfony console make:controller HomeController

Define a Custom Function in the Controller: Open the HomeController file and add a custom function. For example, let’s add a function named home:

• <?php
  
  namespace App\Controller;
  
  use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
  
  use Symfony\Component\HttpFoundation\Response;
  
  use Symfony\Component\Routing\Annotation\Route;
  
  
  
  class HomeController extends AbstractController
  
  {
  
      #[Route('/home', name: 'home_app')]
  
      public function home(): Response
  
      {
  
          $data = 'Hello, this is my custom page!';
  
          return new Response($data);
  
      }
  
  }<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

  Access the Custom Page: Open your browser and visit {BASEURL}/home, where {BASEURL} is the base URL of your app server (e.g., http://127.0.0.1:8000). You should see the output of your custom page.

Creating a Twig File: Install the Twig bundle by running the following command

composer require symfony/twig-bundle

This will install the necessary dependencies and configure Twig for your Symfony project.

Create the Twig template: Inside the templates folder (located in the src directory), create a new Twig template file named index.twig.html. Customize the content of the template according to your requirements. For example:

<!DOCTYPE html>

<html>

<body>

    <h3>My new page</h3>

</body>

</html>

Update your HomeController: Open the HomeController file and update the home function to render the Twig template we created earlier. Here’s an example:

public function home(): Response

{

    return $this->render(‘index.html.twig’);

}

Step 5: Connect the Interface to Shopware

Open the manifest.xml file of your Shopware app (MyExampleApp).

Inside the <admin> section, add the following code:

<admin>

    <module name="MyExampleApp" source="http://127.0.0.1:8000/home" parent="sw-marketing" position="50">

        <label>New Menu</label>

        <label lang="de-DE">Neues Menü</label>

    </module>

</admin>

• Clear the Cache or Reinstall Your App: To ensure that the changes in the manifest.xml file take effect, clear the cache or reinstall your app.
• Verify the Interface Integration: After clearing the cache or reinstalling your app, a new menu item should appear in the admin sidebar under the specified parent menu. It should be labeled as “New Menu” (or the corresponding label in the specified language.

If the iframe template does not load, make sure the following script tag is present in your app server’s index file (usually src/templates/index.html.twig):

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20window.onload%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20window.parent.postMessage(%22sw-app-loaded%22%2C%20%22*%22)%3B%0A%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

Now you can create a custom page in your app server (Symfony) and easily connect it to your Shopware, enabling integration and functionality within the Shopware administration interface.