A guide to Vue Storefront and Spree deployment

Introduction

Vue Storefront is a next generation frontend for headless e-commerce. Our team recently delivered an out-of-the-box integration between Spree and Vue Storefront, which bridges these two great open source tools.

Compared to traditional monolithic applications, deploying a headless frontend introduces a bit of infrastructure complexity.

Let's take a look at available options.

Deploying to Heroku

Heroku is the simplest way to deploy Spee + Vue Storefront for simple, less demanding needs.

To deploy, just create a new application and connect it to your repository.

Then, go to application's setting and set the following env variables:

HOST -> 0.0.0.0
NODE_ENV -> production
BACKEND_URL -><https://example.com> (put your backend address here)

After that, you will need to restart the dynos for the changes to take effect. And that's it!

Deploying to a container service (e.g. AWS ECS of GKE)

The easiest way to deploy Vue Storefront Spree integration to modern cloud providers is to create a docker image containing your frontend. To do that, you'll need to create two files:

Dockerfile

FROM node:14.15

WORKDIR /app
ADD . /app/

RUN chmod +x docker-entrypoint.sh
RUN yarn

ENV NODE_ENV production

EXPOSE 3000
CMD './docker-entrypoint.sh'

The docker file is quite standard for nuxt deployments - it copies the code to docker image, installs dependencies and runs docker-entrypoint.sh

‍

docker-entrypoint.sh‍

#!/bin/sh
yarn build
yarn start --hostname 0.0.0.0

The entrypoint file runs nuxt's build process and starts its server. yarn build can be moved to Dockerfile if you don't need dynamic env variables (Spree-VSF uses it for example to configure backend url dynamically). This way you'll speed up the process of spinning up new containers, but you'll lose the ability to reuse the same image for multiple endpoints (e.g. staging and production).

‍

After these files are in place, you can simply run:

docker build . -t vsf-app:latest
docker tag vsf-app:latest xxxx.dkr.ecr.eu-west-2.amazonaws.com:latest
docker push xxxx.dkr.ecr.eu-west-2.amazonaws.com:latest

where [xxxx.dkr.ecr.eu-west-2.amazonaws.com](<http://xxxx.dkr.ecr.eu-west-2.amazonaws.com>) is your ECR repository address.

After that, you can run the instance on ECS or GKE using the web console and connect it to load balancer. Remember to set BACKEND_URL env variable.

Deploying directly to Linux host

Alternatively, you can deploy Vue Storefront directly to e.g. EC2 instance. To do that, follow the official guidelines of Nuxt.js for production deployment here

Summary

Vue Storefront brings Spree-based stores to a whole new level. The effort to raise the complexity of the deployment will quickly pay off by enabling new customer experiences and making development more efficient.

If you're looking for support in migrating to Vue Storefront, don't hesitate to contact us!