Skip to content

Latest commit

 

History

History
75 lines (44 loc) · 2.89 KB

README.md

File metadata and controls

75 lines (44 loc) · 2.89 KB
Raw

space-plugin-nuxt-starter

This Nuxt starter is a Storyblok Space Plugin app that includes the basic authentication flow.

Tutorial Video

If you prefer video tutorials over text, this is for you:

https://www.loom.com/share/f56defc5bfcf4fa8bce8682386f8352b?sid=8820f1b2-4229-4b05-9f22-4855e6dfccc5

Getting Started

npx giget@latest gh:storyblok/space-tool-plugins/space-plugins/nuxt-starter YOUR-PROJECT-NAME

This repository is developed using pnpm. However, you can also use Yarn or NPM.

cd YOUR-PROJECT-NAME

pnpm install && pnpm dev
# or
yarn install && yarn dev
# or
npm install && npm run dev

Configuration

You need to create a Storyblok extension that will provide you with OAuth credentials. Then, you should add this information to your .env file and your hosting platform.

  1. You can find the "Extensions" menu under either the Partner Portal or the My Organization.

Storyblok Extensions

  1. Click the "New Extension" button in the top right corner and enter the necessary information.

New Extension

And then you can find the information.

OAuth information

  1. Configure the following environment variables in <ROOT-OF-YOUR-PROJECT>/.env.
  • CLIENT_ID=: Client Identifer
  • CLIENT_SECRET=: Client Secret
  • BASE_URL=: When using this starter, you should expose your local development server. To do this, we suggest using services like ngrok. Let's say your hostname is https://PUT-YOURS.ngrok.io. Set that as your BASE_URL.

Note

ngrok offers a static domain on the free plan, so you don't have to update the BASE_URL in your .env and Storyblok every time you get a new domain while using ngrok CLI.

Static domain on ngrok

  1. Configure your extension on Storyblok with the index URL and the redirection URL. The redirection URL ends with /api/connect/callback.

Configure URLs for oauth

Ensure that "Production" is the section that contains information about the production deployment, while "Preview" refers to your development environment, such as exposing localhost through ngrok.

  1. Open the "Install Link" in a new tab and install it in your space for the development and test.

Install Link

  1. Start developing by running yarn dev, and open it on Storyblok.

Open the extension

Note

If the authentication flow isn't working, please check if you have an ad blocker extension enabled in your browser and disable it.

  1. Deployment

You should configure the same environment variables on the hosting platform as well.