This is a preview of the Storyblok Website with Draft Content

Skip to main content

Deploy Vue 3 and Vite App with Storyblok to AWS Amplify

Storyblok is the first headless CMS that works for developers & marketers alike.

This guide describes how to configure & deploy your single page application (SPA) built with Vue.js, Vite, and Storyblok to Amplify.

There are several different guides we can reference during this process if you get stuck along the way, however, neither are completely comprehensive and specific to the tech stack using the latest version of Vue 3, Vite, Storyblok and Amplify.

Setup Storyblok space

If you don't already have a Vue 3, Vite, or Storyblok application, you can start by following the steps in the Add a headless CMS to Vue.js in 5 minutes from Storyblok where you will learn how to create a new space as Storyblok creates sample content for us so we don’t need to create any new stories and we can get them up and running.

When setting up the deployment process with Amplify, you can also reference the Deploy and host app section in the Amplify documentation .

IMPORTANT:

Don’t forget to change the access token to one of your newly created Storyblok spaces, as described in Creating the Storyblok Client.

But before proceeding further, check to see if the latest version of Vue is installed by running the following: 

        
      npm install vue@next

And run the below command and follow the prompts it provides:

        
      npm init vue@latest

Once you have setup the Vue 3 and Vite app with Storyblok it's time to move on to deploying with Amplify.

Setup Amplify

AWS Amplify is an all-in-one platform to develop and deploy full-stack web and mobile applications. Let’s get right onto the steps to deploy with AWS and install aws-amplify.

        
      npm install aws-amplify

Since the newest version of Vue automatically is bundled with Vite there are some modifications that must be used for Amplify to properly work. You can follow that guide here .

Also follow the: Install as Global Plugin section of the attached guide and add the following to the vite.config.js file:

        
      import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      './runtimeConfig': './runtimeConfig.browser',
    }
  }
})

Add hosting

Follow the prompts to begin the deployment process:

        
      amplify init

amplify add hosting

From the root of your project, run the amplify init command, which will likely prompt you to log in to your AWS account.

You will be asked to provide a name for the project as well. Once you've typed in the project name and hit enter, you will be asked to: Initialize the project with the above configuration?

Here we should select 'no' and manually input the configuration. The following is a complete list of the required values we need to proceed:



        
      Enter a name for the environment: dev

Choose your default editor: Visual Studio Code

Choose the type of app that you're building: javascript

What javascript framework are you using: none

Source Directory Path: src

Distribution Directory Path: dist

Build Command: npm run build

Start Command: npm run dev

Using default provider: awscloudformation

Select the authentication method you want to use: AWS profile

When adding hosting with amplify, add hosting several requirements will need to be selected

Select the prompts:

  • Hosting with Amplify Console
  • Continuous deployment (Git-based deployments)

Here you will be automatically sent to the AWS Console to configure and finish the deployment process. Once logged in we can connect the project repository to a number of services. I selected Github, but of course, you are free to use whichever service you are most familiar with.

After the repository is connected, select an existing service role or create a new one so Amplify Hosting can access the resources. When you have gone through the settings within the AWS Console, you can run:

        
      amplify publish

We are done with the deployment! You should see something like this in the console:

Conclusion

In this tutorial, we learned how to integrate Storyblok CMS in a Vue.js 3 project and deploy it to AWS Amplify. Add a headless CMS to Vue in 5 minutes from Storyblok came in handy to set up the integration of StoryBlok with Vue.js.

ResourceLink
Vue.js DocumentationVue.js Docs
Add a headless CMS to Vue.js in 5 minutesAdd Headless CMS to Vue.js
Amplify and Vue Deployment GuideDeployment Guide
Deployed Storyblok and Vue 3 AppDeployed Amplify App