docs(common): add troubleshooting (#89)

space-plugins/nextjs-starter/README.md

@@ -146,7 +146,7 @@ If you have trouble setting up the development environment, please review the fo
    - **Index to your page**: `{BASE_URL}`
    - **Redirection endpoint**: `{BASE_URL}/api/connect/callback`
 
-<img src="./docs/oauth.png" alt="App Bridge" width="600" />
+<img src="./docs/oauth-urls.png" alt="App Bridge" width="600" />
 
 4. Ensure that the extension settings inside Storyblok have the "Use App Bridge" option enabled.
 

space-plugins/nuxt-starter/README.md

@@ -90,3 +90,27 @@ export default defineAppConfig({
 8. Deployment
 
 You should configure the same environment variables on the hosting platform as well.
+
+## Troubleshooting
+
+If you have trouble setting up the development environment, please review the following:
+
+1. Ensure that the `.env.local` file is correctly set up with the following variables:
+
+   - `CLIENT_ID=`
+   - `CLIENT_SECRET=`
+   - `BASE_URL=`
+
+2. Ensure that the tunnel is correctly set up with the `BASE_URL`.
+
+3. Ensure that the extension settings inside Storyblok are correctly set up with the following properties:
+   - **Index to your page**: `{BASE_URL}`
+   - **Redirection endpoint**: `{BASE_URL}/api/connect/callback`
+
+<img src="./docs/oauth-urls.png" alt="App Bridge" width="600" />
+
+4. Ensure that the extension settings inside Storyblok have the "Use App Bridge" option enabled.
+
+<img src="./docs/app-bridge.png" alt="App Bridge" width="600" />
+
+5. Ensure that the ad-blocker browser extensions are disabled when developing the extension.

tool-plugins/nextjs-starter/README.md

@@ -95,3 +95,27 @@ For more detailed information on Storyblok extensions, read the following guides
 
 - [Tool Plugins](https://www.storyblok.com/docs/plugins/tool)
 - [OAuth 2.0 Authorization Flow](https://www.storyblok.com/docs/plugins/authentication-apps)
+
+## Troubleshooting
+
+If you have trouble setting up the development environment, please review the following:
+
+1. Ensure that the `.env.local` file is correctly set up with the following variables:
+
+   - `CLIENT_ID=`
+   - `CLIENT_SECRET=`
+   - `BASE_URL=`
+
+2. Ensure that the tunnel is correctly set up with the `BASE_URL`.
+
+3. Ensure that the extension settings inside Storyblok are correctly set up with the following properties:
+   - **Index to your page**: `{BASE_URL}`
+   - **Redirection endpoint**: `{BASE_URL}/api/connect/callback`
+
+<img src="./docs/oauth-urls.png" alt="App Bridge" width="600" />
+
+4. Ensure that the extension settings inside Storyblok have the "Use App Bridge" option enabled.
+
+<img src="./docs/app-bridge.png" alt="App Bridge" width="600" />
+
+5. Ensure that the ad-blocker browser extensions are disabled when developing the extension.

tool-plugins/nuxt-starter/README.md

@@ -82,3 +82,27 @@ export default defineAppConfig({
 8. Deployment
 
 You should configure the same environment variables on the hosting platform as well.
+
+## Troubleshooting
+
+If you have trouble setting up the development environment, please review the following:
+
+1. Ensure that the `.env.local` file is correctly set up with the following variables:
+
+   - `CLIENT_ID=`
+   - `CLIENT_SECRET=`
+   - `BASE_URL=`
+
+2. Ensure that the tunnel is correctly set up with the `BASE_URL`.
+
+3. Ensure that the extension settings inside Storyblok are correctly set up with the following properties:
+   - **Index to your page**: `{BASE_URL}`
+   - **Redirection endpoint**: `{BASE_URL}/api/connect/callback`
+
+<img src="./docs/oauth-urls.png" alt="App Bridge" width="600" />
+
+4. Ensure that the extension settings inside Storyblok have the "Use App Bridge" option enabled.
+
+<img src="./docs/app-bridge.png" alt="App Bridge" width="600" />
+
+5. Ensure that the ad-blocker browser extensions are disabled when developing the extension.