How to Deploy Shopware Composable Frontend with Vercel?

How to Deploy Shopware Composable Frontend with Vercel
Composable Storefront, Ecommerce, Shopware, Shopware 6, Vercel

Composable Frontend is a modern approach to building fast and scalable eCommerce storefronts in Shopware. Vercel allows you to take advantage of Vercel’s efficient hosting and CI/CD capabilities when deploying Composable Frontend with it. Follow a step-by-step guide to get your Shopware Composable Frontend running on Vercel.

Prerequisites

Before you begin, make sure you have the following:

  • A Shopware 6 instance set up
  • Node.js (version 16 or later) installed
  • Git installed and configured
  • A Vercel account
  • Shopware PWA (Composable Frontend) installed locally

Step 1: Clone the Shopware Composable Frontend Repository

Make sure you installed the Composable Frontend if you haven’t done it already. You will either need to clone the official repository or follow the “Installation of Composable Storefront Locally” blog. After that, proceed to the template folder.

Step 2: Install Dependencies

Run the following command to install the required dependencies:

Step 3: Configure Environment Variables

Create a .env file in the root of your project and add your Shopware API credentials:

SHOPWARE_API_URL=https://your-shopware-instance.com
SHOPWARE_ACCESS_KEY=your-access-key

Step 4: Test Locally

Ensure everything works correctly before deploying:

Visit http://localhost:3000 to verify the frontend is running properly.

Step 5: Push Code to GitHub

Initialize a Git repository and push your code to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/composable-frontend.git
git push -u origin main

Step 6: Deploy to Vercel

  • Log in to Vercel and click New Project.
  • Import your GitHub repository.
  • Configure the environment variables in Vercel:
    SHOPWARE_API_URL
    SHOPWARE_ACCESS_KEY

Step 7: Verify Deployment

Once deployed, Vercel will provide you with a live URL. Open the URL to verify that your Shopware Composable Frontend is working correctly.

Step 8: Enable Automatic Deployments (Optional)

To enable automatic deployments for future updates:

  • Push changes to your GitHub repository, and Vercel will redeploy your project automatically.

Please contact us at manish@bay20.com or call us at +91-8800519180 / +91-9582784309 for any support related to shopware. You can also visit the Shopware development page to check the services we offer.