How to setup backend with Magento

Introduction

The Boolfly Grocery Store Demo is a mobile application designed to showcase the integration of Magento 2’s GraphQL API in an eCommerce environment. This demo serves as a comprehensive training tool for internship students, focusing on the core aspects of modern mobile app development and eCommerce integration. Additionally, a Node.js microservice powers the search feature, ensuring fast and relevant product search results.

Key features include:

• Product Details Page: Fetches detailed product information, including images, descriptions, pricing, and availability directly from Magento’s GraphQL API.
• Category Pages: Displays product categories dynamically, allowing users to browse and filter products with ease.
• User Authentication: Implements login and registration functionality, allowing users to create accounts, sign in, and manage their sessions securely.
• Shopping Cart: Users can add products to their shopping cart, view item details, and proceed to checkout.
• Checkout Flow: Facilitates the checkout process, including order summary, shipping information, and payment options.

This demo app will provide a hands-on learning experience for interns, helping them understand the integration of GraphQL with mobile platforms, along with key eCommerce functionalities such as product management, user accounts, and transactions.

By interacting with the demo, interns will gain practical knowledge of how a mobile application communicates with an eCommerce backend, making it an essential learning tool for modern mobile development in the context of Magento-based stores.

Installation

Prerequisites

• Docker Desktop for Mac (2.2.0.0 or later) or Docker for Linux or Docker for Windows (if you’re using WSL2)
• docker-compose version 2 or later is required
• Git
• Homebrew

Setup Backend

Install Warden

Warden may be installed via Homebrew on both macOS and Linux hosts:

brew install wardenenv/warden/warden
warden

DNS Resolution

Linux / Windows (WSL2)

Add the following line to /etc/hosts:

127.0.0.1 app.grocery-store.test

Note: If you’re using Windows with WSL2, you also need to add to C:\Windows\System32\drivers\etc\hosts

Setup Magento 2

1. Clone repository:

git clone https://github.com/quythanh/grocery-store-backend
cd grocery-store-backend

2. Sign an SSL certificate:

warden sign-certificate grocery-store.test

3. Start the project environment:

warden env up

4. Drop into a shell within the project environment:

warden shell

5. Create an access key and configure global Magento Marketplace credentials:

composer global config http-basic.repo.magento.com <username> <password>

6. Install libraries:

composer install

7. Install the application:

## Install Application
bin/magento setup:install \
  --backend-frontname=backend \
  --amqp-host=rabbitmq \
  --amqp-port=5672 \
  --amqp-user=guest \
  --amqp-password=guest \
  --db-host=db \
  --db-name=magento \
  --db-user=magento \
  --db-password=magento \
  --search-engine=opensearch \
  --opensearch-host=opensearch \
  --opensearch-port=9200 \
  --opensearch-index-prefix=magento2 \
  --opensearch-enable-auth=0 \
  --opensearch-timeout=15 \
  --http-cache-hosts=varnish:80 \
  --session-save=redis \
  --session-save-redis-host=redis \
  --session-save-redis-port=6379 \
  --session-save-redis-db=2 \
  --session-save-redis-max-concurrency=20 \
  --cache-backend=redis \
  --cache-backend-redis-server=redis \
  --cache-backend-redis-db=0 \
  --cache-backend-redis-port=6379 \
  --page-cache=redis \
  --page-cache-redis-server=redis \
  --page-cache-redis-db=1 \
  --page-cache-redis-port=6379

## Configure Application
bin/magento config:set --lock-env web/unsecure/base_url \
  "https://${TRAEFIK_SUBDOMAIN}.${TRAEFIK_DOMAIN}/"

bin/magento config:set --lock-env web/secure/base_url \
  "https://${TRAEFIK_SUBDOMAIN}.${TRAEFIK_DOMAIN}/"

bin/magento config:set --lock-env web/secure/offloader_header X-Forwarded-Proto

bin/magento config:set --lock-env web/secure/use_in_frontend 1
bin/magento config:set --lock-env web/secure/use_in_adminhtml 1
bin/magento config:set --lock-env web/seo/use_rewrites 1

bin/magento config:set --lock-env system/full_page_cache/caching_application 2
bin/magento config:set --lock-env system/full_page_cache/ttl 604800

bin/magento config:set --lock-env catalog/search/enable_eav_indexer 1

bin/magento config:set --lock-env dev/static/sign 0

bin/magento deploy:mode:set -s developer
bin/magento cache:disable block_html full_page

bin/magento indexer:reindex
bin/magento cache:flush

8. Generate an admin user:

ADMIN_PASS="$(pwgen -n1 16)"
ADMIN_USER=localadmin

bin/magento admin:user:create \
  --admin-password="${ADMIN_PASS}" \
  --admin-user="${ADMIN_USER}" \
  --admin-firstname="Local" \
  --admin-lastname="Admin" \
  --admin-email="${ADMIN_USER}@example.com"
printf "u: %s\np: %s\n" "${ADMIN_USER}" "${ADMIN_PASS}"

9. Disable 2FA:

bin/magento module:disable -f Magento_TwoFactorAuth Magento_AdminAdobeImsTwoFactorAuth

10. Launch the application in your browser:

• https://app.grocery-store.test/
• https://app.grocery-store.test/backend/

Setup React Native

1. Clone Repository:

git clone https://github.com/quy1003/grocery_store_fe.git
cd grocery_store_fe

2. Install dependencies:

npm install

3. Create .env file:

EXPO_PUBLIC_API_URL="YOUR_API_URL"

4. Start project:

npm start

5. Use your phone to scan the QR code shown on the terminal.

Configuration

Automatic DNS Resolution

MacOS

On Mac OS, DNS resolution is configured automatically for *.test domains using a feature Mac OS inherits from BSD. When warden install is run (or warden svc up for the first time) the following contents are placed in the /etc/resolver/test file. This has the effect of having zero impact on DNS queries except for those under the .test TLD.

nameserver 127.0.0.1

Linux (systemd-resolved)

This approach works on most modern (systemd based) operating systems. systemd-resolved can be configured to forward the requests of .test TLD to another DNS server. The configuration file is typically located at /etc/systemd/resolved.conf and /etc/systemd/resolved.conf.d/*.conf. Run the following commands to configure systemd-resolved:

sudo mkdir -p /etc/systemd/resolved.conf.d
echo -e "[Resolve]\nDNS=127.0.0.1\nDomains=~test\n" \
| sudo tee /etc/systemd/resolved.conf.d/warden.conf > /dev/null
sudo systemctl restart systemd-resolved

Trusted CA Root Certificate

In order to sign SSL certificates that may be trusted by a developer workstation, Warden uses a CA root certificate with CN equal to Warden Proxy Local CA <hostname> where <hostname> is the hostname of the machine the certificate was generated on at the time Warden was first installed. The CA root can be found at ~/.warden/ssl/rootca/certs/ca.cert.pem.

On MacOS this root CA certificate is automatically added to a users trust settings as can be seen by searching for ‘Warden Proxy Local CA’ in the Keychain application. This should result in the certificates signed by Warden being trusted by Safari and Chrome automatically. If you use Firefox, you will need to add this CA root to trust settings specific to the Firefox browser per the below.

On Ubuntu/Debian this CA root is copied into /usr/local/share/ca-certificates and on Fedora/CentOS (Enterprise Linux) it is copied into /etc/pki/ca-trust/source/anchors and then the trust bundle is updated appropriately. For new systems, this typically is all that is needed for the CA root to be trusted on the default Firefox browser, but it may not be trusted by Chrome or Firefox automatically should the browsers have already been launched prior to the installation of Warden (browsers on Linux may and do cache CA bundles).

Database

Database Connection

Common Settings

MySQL Workbench

Database Dump

Import Database

pv grocery-store.sql.gz | gunzip -c | warden db import

Tip: If you don’t have pv installed, use cat instead:

cat grocery-store.sql.gz | gunzip -c | warden db import

Export Database

1. Connect to Database host in Docker:

docker exec -it grocery-store-db-1 bash

2. Export data and compress it to .gz:

mysqldump -u magento -p magento | gzip > grocery-store.sql.gz

3. Exit Docker Container:

exit

4. Copy data file from Docker Container to Host:

docker cp grocery-store-db-1:/grocery-store.sql.gz .

Conclusion

You’ve successfully set up a complete Magento 2 backend with Docker and Warden, integrated with a React Native mobile application. This setup provides a robust development environment for building modern eCommerce applications with GraphQL APIs.

For more information and troubleshooting, refer to the official Warden documentation and Magento 2 documentation.