To deploy your application on Vue Storefront Cloud, you need to have the package consisted of the application code and the Git repository. All examples presented in this documentation are based on GitHub and GitHub Actions. What is also worth mentioning, all commands requiring npm have been replaced by using yarn.

VSF App Prerequisites

At the beginning, you need to install the vue-storefront/cli by running:

yarn global add @vue-storefront/cli@3.0.1

Now when CLI is installed, you can create the Vue Storefront application.

vsf init <project_name>

You can find more information about VSF installation process in Vue Storefront official documentation.

Create a Git repository

GitHub is a place where your repository with the code will be created. An entire process of repository setup is described in a more detailed way in GitHub official documentation. Go to the VSF application directory and run the below command, remember to replace <git_repo_url> with a valid one matching your repository.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <git_repo_url>
git push -u origin main


A docker image with a built-in application is required to be launched on VSF Cloud. To build such, a Dockerfile has to be created and located in the directory .vuestorefrontcloud/docker, example below:

FROM node:16

WORKDIR /var/www

COPY . .

RUN yarn install --network-concurrency 1 && yarn build && yarn cache clean --all

COPY .vuestorefrontcloud/docker/ /usr/local/bin/


The script in the entrypoint is a file which needs the executive privileges.

set -e

yarn start

To make this script executable, run chmod a+x .vuestorefrontcloud/docker/ command.

To deploy the VSF application, a docker image should be pushed to our Docker Registry. An image can be built and pushed manually, but establishing this in an automated way is always a better approach. GitHub Actions can be very helpful in such cases.

GitHub Actions Workflow

To execute GitHub Actions, a pipeline manifest has to be located in .github/workflows within the repository. Presented template can be used to create such a deploy-storefrontcloud.yml workflow.

name: Deploy to Vue Storefront Cloud
      - main

    runs-on: ubuntu-latest
      - name: Checkout code
        uses: actions/checkout@v1
      - name: Setup node
        uses: actions/setup-node@v1
          node-version: "16.x"
      - name: Build and publish docker image
        if: github.ref == 'refs/heads/main'
        uses: elgohr/Publish-Docker-Github-Action@master
          name: <vsfc_project_name>-storefrontcloud-io/vue-storefront:${{ github.sha }}
          username: ${{ secrets.VSFC_USER_ID }}
          password: ${{ secrets.VSFC_API_KEY }}
          dockerfile: .vuestorefrontcloud/docker/Dockerfile
          buildoptions: "--compress"

    runs-on: ubuntu-latest
    needs: build
      - uses: chrnorm/deployment-action@releases/v1
        name: Create GitHub deployment
        id: deployment
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>
          environment: production
          initial_status: in_progress
      - name: Deploy on <vsfc_project_name>.<region>
        if: github.ref == 'refs/heads/main'
        run: |
          if curl -s -H 'X-User-Id: ${{ secrets.VSFC_USER_ID }}'  -H 'X-Api-Key: ${{ secrets.VSFC_API_KEY }}' -H 'Content-Type: application/json' -X POST -d '{"code":"<vsfc_project_name>","region":"<region>.gcp","frontContainerVersion":"${{ github.sha }}"}' | grep -q '{"code":200,"result":"Instance updated!"}'; then
            echo "Instance updated"
            echo "Something went wrong during the update process..."
            exit 1
      - name: Update deployment status (success)
        if: success()
        uses: chrnorm/deployment-status@releases/v1
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>
          state: "success"
          description: Congratulations! The deploy is done.
          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
      - name: Update deployment status (failure)
        if: failure()
        uses: chrnorm/deployment-status@releases/v1
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>
          description: Unfortunately, the instance hasn't been updated.
          state: "failure"
          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

In a first place, please remember to fill out the template with a valid data:

  • <vsfc_project_name> should be replaced by your Vue Storefront Cloud instance name
  • <region> should be replaced by your instance region (it is similar with Googlce Cloud Platform regions).

Secondly, secrets VSFC_USER_ID and VSFC_API_KEY have to be created as a secret variables in a GitHub repository. Their content will be provided by VSF.

Deploy stage

Having GitHub Actions configured in a presented manner, the application is ready to be automatically deployed after a git push. Run the following commands to push the latest code changes to the GitHub repository.

git add .
git commit -am "Adding deployment configuration"
git push

Once succeeded, you should be notified by the similar information:

Run chrnorm/deployment-status@releases/v1
    token: ***
    target_url: https://<vsfc_project_name>.<region>
    state: success
    description: Congratulations! The deploy is done.
    deployment_id: 320563724