Nuxtstop

For all things nuxt.js

How to deploy Vue Storefront 2 to Heroku 🚀

#vue #heroku #nuxt #javascript
How to deploy Vue Storefront 2 to Heroku 🚀
13 0

In this article, I will guide you through the process of deploying Vue Storefront 2 application with Shopify integration to Heroku in 5 minutes!

What is Vue Storefront?

Vue Storefront is Lightning-Fast Frontend Platform for Headless Commerce. Boost your site performance, shape the customer journey and free your developer's creativity with Vue Storefront, the last frontend you will ever need.

VSF Architecture

Code

First thing we would need to do in order to generate a new Vue Storefront 2 project is to run the CLI with a following command:

npx @vue-storefront/cli init
Enter fullscreen mode Exit fullscreen mode

The CLI will ask you about the name of your project and your desired integration.

Vue Storefront CLI

For this tutorial, I have selected Shopify as indicated by the following screenshot:

Vue Storefront CLI Result

The project structure should look more or less like the following:

Vue Storefront Folder Structure

Now, let's install all the required depedencies by running:

yarn
Enter fullscreen mode Exit fullscreen mode

And run the project in development mode to see if it works as expected:

yarn dev
Enter fullscreen mode Exit fullscreen mode

Vue Storefront dev

When you open a browser tab with http://localhost:3001 you should see following result:

Browser Result of Vue Storefront

The last thing that we need to change in order for our application to work is to replace the environment variable from APP_PORT to PORT in nuxt.config.ts:

  server: {
    port: process.env.PORT || 3001, // Previously process.env.APP_PORT
    host: '0.0.0.0'
  },
Enter fullscreen mode Exit fullscreen mode

This will allow Heroku to build the project correctly and serve it on appriopriate port.

Heroku

In order to deploy Vue Storefront to Heroku, we would need to install heroku CLI that is described here

In the meantime, we could setup required environment variables for our Heroku instance:

Heroku environment variables

I will copy them below for easier testing:

BASE_URL=vsf-heroku.herokuapp.com
HOST=0.0.0.0
SHOPIFY_DOMAIN=vsf-next-pwa.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=03f21475b97c18fa05c0ab452c368af4
Enter fullscreen mode Exit fullscreen mode

Next, we need to login from our Vue Storefront project with the following command:

heroku login
Enter fullscreen mode Exit fullscreen mode

Let's add a remote git for heroku with the name that we like:

heroku git:remote -a vsf-heroku
Enter fullscreen mode Exit fullscreen mode

Finally if we are ready, we can push new code to the heroku branch:

git push heroku main
Enter fullscreen mode Exit fullscreen mode

Heroku CLI result

If everything went as expected, we should see the following result when visiting the https://vsf-heroku.herokuapp.com/:

Vue Storefront 2 on Heroku

Summary

Well done! You have just deployed and hosted a Vue Storefront 2 Application on Heroku! Right now, I recommend you to check out the Vue Storefront docs to see how you can extend your application with integrations and modules.

Add comment