How to deploy Vue Storefront 2 to Heroku 🚀

On this article, I’ll information you thru the method of deploying Vue Storefront 2 utility with Shopify integration to Heroku in 5 minutes!



What’s Vue Storefront?

Vue Storefront is Lightning-Quick Frontend Platform for Headless Commerce. Enhance your website efficiency, form the shopper journey and free your developer’s creativity with Vue Storefront, the final frontend you’ll ever want.



Code

Very first thing we would wish to do to be able to generate a brand new Vue Storefront 2 venture 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 concerning the title of your venture and your required integration.

Vue Storefront CLI

For this tutorial, I’ve chosen Shopify as indicated by the next screenshot:

Vue Storefront CLI Result

The venture construction ought to look roughly like the next:

Vue Storefront Folder Structure

Now, let’s set up all of the required depedencies by working:

yarn
Enter fullscreen mode

Exit fullscreen mode

And run the venture in improvement mode to see if it really works as anticipated:

yarn dev
Enter fullscreen mode

Exit fullscreen mode

Vue Storefront dev

Once you open a browser tab with http://localhost:3001 you need to see following outcome:

Browser Result of Vue Storefront

The very last thing that we have to change to ensure that our utility to work is to exchange the atmosphere variable from APP_PORT to PORT in nuxt.config.ts:

  server:  3001, // Beforehand course of.env.APP_PORT
    host: '0.0.0.0'
  ,
Enter fullscreen mode

Exit fullscreen mode

This may permit Heroku to construct the venture appropriately and serve it on appriopriate port.



Heroku

As a way to deploy Vue Storefront to Heroku, we would wish to put in heroku CLI that’s described here

Within the meantime, we may setup required atmosphere variables for our Heroku occasion:

Heroku environment variables

I’ll copy them beneath for simpler 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

Subsequent, we have to login from our Vue Storefront venture with the next command:

heroku login
Enter fullscreen mode

Exit fullscreen mode

Let’s add a distant git for heroku with the title that we like:

heroku git:distant -a vsf-heroku
Enter fullscreen mode

Exit fullscreen mode

Lastly if we’re prepared, we are able to push new code to the heroku department:

git push heroku major
Enter fullscreen mode

Exit fullscreen mode

Heroku CLI result

If every part went as anticipated, we must always see the next outcome when visiting the https://vsf-heroku.herokuapp.com/:

Vue Storefront 2 on Heroku



Abstract

Effectively performed! You’ve got simply deployed and hosted a Vue Storefront 2 Utility on Heroku! Proper now, I like to recommend you to take a look at the Vue Storefront docs to see how one can lengthen your utility with integrations and modules.

Add a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Join us on Social Media

Facebook Twitter Youtube