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.
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',
}
}
})
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 |
