feat: support remote storage in production (#17)

* feat: support remote storage in production

* chore: remove console.log

Author: atinux

docs/content/docs/1.getting-started/2.installation.md

@@ -1,6 +1,6 @@
 ---
 title: Installation
-description: Add NuxtHub to your Nuxt project.
+description: Learn how to create a NuxtHub project or add it to your current Nuxt project.
 ---
 
 ## Quickstart

docs/content/docs/1.getting-started/3.deploy.md

@@ -28,33 +28,6 @@ The command will:
 Install the [NuxtHub CLI](https://github.com/nuxt-hub/cli) globally with: `npm i -g nuxthub`.
 ::
 
-### Remote Storage
-
-Once your project is deployed, you can use the remote storage in your local project.
-
-Start your Nuxt project with:
-
-```bash [Terminal]
-npx nuxt dev --remote
-```
-
-Your development project will now use the remote storage from your deployed project.
-
-To always use the remote storage in your local project, update your `nuxt.config.ts`:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  hub: {
-    // Always use remote storage in development
-    remote: true
-  }
-})
-```
-
-::note
-Nuxt will use the remote storage from your deployed project **as long as you are logged in with the [NuxtHub CLI](https://github.com/nuxt-hub/cli) and the local project is linked to a NuxtHub project**.
-::
-
 ## Self-hosted
 
 You can deploy your project on your own Cloudflare account without using the NuxtHub Console.
@@ -80,25 +53,3 @@ Once your project is created, open the `Settings -> Functions` tab and set:
 Go back to the `Deployment` tab and retry the last deployment by clicing on `...` then `Retry deployment`.
 
 Once the deployment is done, NuxtHub should be ready to use in your deployed project.
-
-### Remote Storage
-
-To enable remote storage in your self-hosted project, you need to create a secret key.
-
-1. Set the `NUXT_HUB_PROJECT_SECRET_KEY` environment variable in your Cloudflare Pages project settings and retry the last deployment to apply the changes (you can generate a random secret on https://www.uuidgenerator.net/version4)
-2. Set the same `NUXT_HUB_PROJECT_SECRET_KEY` and `NUXT_HUB_PROJECT_URL` environment variables in your local project
-
-```bash [.env]
-NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env
-NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
-```
-
-Then, start your Nuxt project with:
-
-```bash [Terminal]
-npx nuxt dev --remote
-```
-
-::warning
-NuxtHub will use the remote data from your deployed project as long as the `NUXT_HUB_PROJECT_SECRET_KEY` matches the one in your Cloudflare Pages project settings.
-::

docs/content/docs/1.getting-started/4.remote-storage.md

@@ -0,0 +1,112 @@
+---
+title: Remote Storage
+description: Access your remote storage locally or from other Nuxt projects with our secured proxy.
+---
+
+One of the main features of NuxtHub is the ability to access your remote storage from your local environment or from other Nuxt projects. This is made possible by our secured proxy system.
+
+::note
+You need to have [deployed your project](/docs/getting-started/deploy) in order to use this feature.
+::
+
+There are two ways to use the remote storage:
+- **Local development**: Access your remote storage from your local environment.
+- **Other Nuxt projects**: Access your remote storage from other Nuxt projects, useful if your frontend is deployed on another hosting platform.
+
+## Local Development
+
+Once your project is deployed, you can use the remote storage in your local project.
+
+Start your Nuxt project with:
+
+```bash [Terminal]
+npx nuxt dev --remote
+```
+
+The development project will now use the remote storage from your deployed project and these logs should happen in your terminal:
+
+```bash
+ℹ Using remote features from https://my-project.nuxt.dev
+ℹ Remote storage available: database, kv, blob
+```
+
+::tip{icon="i-ph-rocket-launch-duotone"}
+That's it! Your local project is now using the remote storage from your deployed project.
+::
+
+To always use the remote storage in your local project, you can add `NUXT_HUB_REMOTE=true` in your `.env` file:
+
+```bash [.env]
+NUXT_HUB_REMOTE=true
+```
+
+::note
+NuxtHub will use the remote storage from your deployed project **as long as you are logged in with the [NuxtHub CLI](https://github.com/nuxt-hub/cli) and the local project is linked to a NuxtHub project** with `nuxthub link` or `nuxthub deploy`.
+::
+
+### Self-hosted
+
+If you are not using the [NuxtHub Console](https://console.hub.nuxt.com) to manage your project, you can still use the remote storage in your local development environment.
+
+1. Set the `NUXT_HUB_PROJECT_SECRET_KEY` environment variable in your Cloudflare Pages project settings and retry the last deployment to apply the changes (you can generate a random secret on https://www.uuidgenerator.net/version4)
+2. Set the same `NUXT_HUB_PROJECT_SECRET_KEY` and `NUXT_HUB_PROJECT_URL` environment variables in your local project
+    ```bash [.env]
+    NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env
+    NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
+    ```
+
+Then, start your Nuxt project with:
+
+```bash [Terminal]
+npx nuxt dev --remote
+```
+::note
+NuxtHub will use the remote data from your deployed project as long as the `NUXT_HUB_PROJECT_SECRET_KEY` matches the one in your Cloudflare Pages project settings.
+::
+
+## Other Nuxt Projects
+
+It is possible to use the remote storage from another Nuxt project. This can be useful if your frontend is deployed on another hosting platform and you want to use your NuxtHub as your backend.
+
+To access your remote storage from another Nuxt project:
+
+1. Install `@nuxthub/core` to your project:
+
+::code-group
+```bash [pnpm]
+pnpm add @nuxthub/core
+```
+```bash [yarn]
+yarn add @nuxthub/core
+```
+```bash [npm]
+npm install @nuxthub/core
+```
+```bash [bun]
+bun add @nuxthub/core
+```
+::
+
+2. Add it to the `extends` section in your `nuxt.config` and set the `remote` option to `true`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  extends: ['@nuxthub/core'],
+  hub: {
+    remote: true
+  }
+})
+```
+
+3. Add the `NUXT_HUB_PROJECT_URL` and `NUXT_HUB_PROJECT_SECRET_KEY` environment variables to your project:
+
+```bash [.env]
+NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
+NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env
+```
+
+If you haven't, set the `NUXT_HUB_PROJECT_SECRET_KEY` environment variable in your NuxtHub deployed project and make sure to redeploy.
+
+::tip{icon="i-ph-rocket-launch-duotone"}
+You can now use the remote storage from your NuxtHub project in your other Nuxt project (both locally and in production).
+::

docs/content/index.yml

@@ -61,7 +61,7 @@ features:
       icon: 'i-ph-shapes-duotone'
       to: '/docs/storage/blob'
     - title: 'Remote Storage'
-      description: 'Access your remote storage locally with our secured proxy, work with your data as if they were local.'
+      description: 'Access your remote storage locally or from other Nuxt projects with our secured proxy, work with your data as if they were local.'
       icon: 'i-ph-plugs-connected-duotone'
       to: '/docs/getting-started/deploy#remote-storage'
       target: '_blank'

package.json

@@ -27,7 +27,7 @@
     "dev:prepare": "nuxi prepare playground",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "docs": "nuxi dev docs",
+    "docs": "PORT=4000 nuxi dev docs",
     "docs:build": "nuxi generate docs",
     "release": "npm run lint && npm run test && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
@@ -66,4 +66,4 @@
     "vitest": "^1.3.1",
     "wrangler": "^3.31.0"
   }
-}
+}

playground/.gitignore

@@ -0,0 +1 @@
+.vercel

playground/nuxt.config.ts

@@ -3,6 +3,9 @@ export default defineNuxtConfig({
   extends: [
     '../'
   ],
+  hub: {
+    remote: true
+  },
   modules: [
     '@nuxt/ui',
     '@kgierke/nuxt-basic-auth'