Skip to main content

Deploy Vue 3 and Vite App with Storyblok to AWS Amplify

Contents
    Try Storyblok

    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.

    Resource Link
    Vue.js Documentation Vue.js Docs
    Add a headless CMS to Vue.js in 5 minutes Add Headless CMS to Vue.js
    Amplify and Vue Deployment Guide Deployment Guide
    Deployed Storyblok and Vue 3 App Deployed Amplify App