Skip to content

Commit 0e9155d

Browse files
committed
docs: improve the getting-started
1 parent 9d6f699 commit 0e9155d

File tree

8 files changed

+102
-88
lines changed

8 files changed

+102
-88
lines changed
+46-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,53 @@
11
---
22
title: Introduction
3-
description: Welcome to NuxtHub documentation.
3+
description: NuxtHub helps you build full-stack applications on the Edge.
44
---
55

6-
NuxtHub is a Nuxt Toolkit to create full-stack applications on the Edge. It is powered by Cloudflare Pages and leverages many Cloudflare features such as KV, D1, and R2, offering a complete backend experience.
6+
NuxtHub aims to provide a complete backend experience for [Nuxt](https://nuxt.com) apps, allowing developers to build full-stack applications on the Edge.
7+
8+
::callout
9+
It is **currently made to be deployed on [Cloudflare Pages](https://pages.cloudflare.com)** as it leverages many Cloudflare features such as KV, D1, and R2. We are looking to support other platforms in the future.
10+
::
711

812
## Features
913

10-
- Session management
11-
- Query a SQLite database with [Database](/usage/database)
12-
- Access key-value storage with [KV](/usage/kv)
13-
- Store files with [Blob](/usage/blob)
14-
- Track events with [Analytics](/usage/analytics)
14+
NuxtHub provides a set of features to help you build full-stack applications:
15+
- **SQL database** to store your application's data
16+
- **Blob storage** to store static assets, such as images, video and more
17+
- **Key-Value** to store JSON data accessible globally with low-latency
18+
19+
Each feature comes with its auto-imported server composable to use in your [Nuxt's server directory](https://nuxt.com/docs/guide/directory-structure/server).
20+
21+
::callout{icon="i-ph-plugs-connected-duotone"}
22+
NuxtHub comes with a powerful proxy system to connect to your project's resources from your local environment, allowing you to work with your remote data as if it was local.
23+
::
24+
25+
## Modules
26+
27+
We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` modules.
28+
29+
- [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main module to provide storage features
30+
- `@nuxthub/auth`: Authentication module for user management
31+
- `@nuxthub/analytics`: Analytics module to track events within your applicaiton and API
32+
- `@nuxthub/...`: You name it!
33+
34+
::callout
35+
We are currently in the early stages of development and are looking for feedback from the community. If you are interested in contributing, please join us on [nuxt-hub/core](https://github.com/nuxt-hub/core).
36+
::
37+
38+
## Console (alpha)
39+
40+
The [NuxtHub console](https://hub.nuxt.com) lets you deploy your NuxtHub apps with single command on your Cloudflare account while provisioning all the necessary resources for you.
41+
42+
### Features
43+
44+
- Link your Cloudflare account and stay in control, we never mark-up Cloudflare prices.
45+
- Deploy your application with `nuxthub deploy` command
46+
- Relax while it provision all the necessary resources (database, kv, blob)
47+
- Manage your app's resources with your admin panel
48+
- Give access to team members to manage the application without sharing your Cloudflare account
49+
- Monitor your application with logs and analytics
50+
51+
::callout
52+
The NuxtHub console is currently in private alpha and is not yet open to the public. We are looking for early adopters to help us shape the platform. If you are interested, please register on [hub.nuxt.com](https://hub.nuxt.com) and tell us what you plan to build with NuxtHub.
53+
::

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
---
22
title: Installation
3-
description: How to use NuxtHub in a project.
3+
description: Add NuxtHub core module to your Nuxt project.
44
---
55

6-
Begin your journey with NuxtHub using this step-by-step tutorial, designed for developers seeking an all-in-one platform to create and deploy web applications on the Edge.
76

87
## Setup
98

10-
1. Install NuxtHub module to your project:
9+
1. Install the NuxtHub module to your project:
1110

1211
::code-group
1312

@@ -37,6 +36,8 @@ export default defineNuxtConfig({
3736
})
3837
```
3938

39+
That's it! You can now use the NuxtHub module in your Nuxt project.
40+
4041
## Options
4142

4243
| Key | Default | Description |

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

+48-58
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,74 @@ title: Deploy
33
description: How to deploy your project with NuxtHub.
44
---
55

6-
To deploy your Nuxt application on the Edge, we use Cloudflare Pages. Therefore, we require you to create a [Cloudflare](https://www.cloudflare.com/){target=_blank} account.
6+
To deploy your Nuxt application on the Edge, we use Cloudflare Pages. Therefore, we require you to create a [Cloudflare](https://www.cloudflare.com/) account.
77

8-
Then, two options are offered to you:
8+
## NuxtHub Console (alpha)
99

10-
## Using hub.nuxt.com
10+
The [NuxtHub Console](https://hub.nuxt.com) is made to simplify your experience with the NuxtHub module, enabling you to effortlessly manage teams and projects, as well as deploy in seconds combined with the NuxtHub CLI.
1111

12-
The [NuxtHub admin](https://hub.nuxt.com){target=_blank} is designed to simplify your experience with the NuxtHub module, enabling you to effortlessly manage teams and projects, as well as deploy in seconds combined with the NuxtHub CLI.
12+
After linking your Cloudflare account in the console, deploy your project with a single command:
1313

14-
### Create your team
15-
16-
First, you need to connect to [NuxtHub admin](https://hub.nuxt.com){target=_blank}. A default team is automatically created for you, and you will be able to update it in the settings.
17-
18-
Next, you are invited to setup your team with Cloudflare, which involves linking it to your Cloudflare account. Follow the instructions by creating an access token on Cloudflare, and then linking it to the team in the admin.
19-
20-
Done? Now your team is connected to Cloudflare.
21-
22-
### Create your project
23-
24-
From here, you can either create your project in the admin or with the CLI. But in both cases, you will need to use the CLI to deploy your project, so let's install it together.
25-
26-
Install NuxtHub CLI with any binaries manager (we recommand Volta.sh):
27-
28-
```bash
29-
volta install nuxthub
30-
```
31-
32-
Then you can already connect it to NuxtHub with:
33-
34-
```bash
35-
nuxthub login
14+
```bash [Terminal]
15+
npx nuxthub deploy
3616
```
3717

38-
It opens a browser window to connect to your NuxtHub account. Once done, you can close the browser window. Now we can create a new project.
18+
The command will:
19+
1. Ensure your are logged in on hub.nuxt.com
20+
2. Link your local project with a NuxtHub project (or create a new one)
21+
3. Build your Nuxt project with the correct preset
22+
4. Deploy it to your Cloudflare account with all the necessary resources
23+
4. Provide you with a URL to access your project
3924

40-
#### In the Admin
25+
::callout{icon="i-ph-info-duotone"}
26+
Install the [NuxtHub CLI](https://github.com/nuxt-hub/cli) globally with: `npm i -g nuxthub`.
27+
::
4128

42-
Jump to the "Projects" section of your team, and click "New project". A project name is required. Then, NuxtHub creates a new Cloudflare Pages for you, alongside a D1 for your database, a KV for your key-values and a R2 to upload files.
29+
### Remote data
4330

44-
Then, you can link your local project with the NuxtHub project. Execute this following command from the root of your project:
31+
In order to use remote data in your local project, update your `nuxt.config.ts`:
4532

46-
```bash
47-
nuxthub link
33+
```ts [nuxt.config.ts]
34+
export default defineNuxtConfig({
35+
hub: {
36+
remote: true
37+
}
38+
})
4839
```
4940

50-
It should list your teams, select the one you want, then it lists the projects, select the one you just created. Now your local project is linked to the NuxtHub project.
41+
When restarting your local server, the module will automatically use the remote data 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.
5142

52-
#### With the CLI
43+
## Self-hosted
5344

54-
You can simply run the following command from the root of your project, which will eventually offer you to create a new project, enter the name and it will be created and linked for you.
45+
You can deploy your project on your own Cloudflare account without using the NuxtHub Console.
5546

56-
```bash
57-
nuxthub link
58-
```
47+
For that, you need to create the necessary resources in your Cloudflare account and configure your project to use them.
5948

60-
### Deploy your project
49+
1. Create a D1 database, KV namespace and R2 bucket in your Cloudflare account.
50+
2. Create a Cloudflare Pages project and link it to your GitHub or Gitlab repository and choose the Nuxt Framework preset in the build settings
6151

62-
```bash
63-
nuxthub deploy
64-
```
52+
Once your project is created, open the `Settings -> Functions` tab and set:
53+
- Placement: Smart
54+
- KV namespace bingins
55+
- `KV` -> select your KV namespace created
56+
- R2 bucket bindings
57+
- `BLOB` -> select your R2 bucket created
58+
- D1 database bindings
59+
- `DB` -> select your D1 database created
6560

66-
This command:
61+
Go back to the `Deployment` tab and retry the last deployment by clicing on `...` then `Retry deployment`.
6762

68-
1. Asks you to connect to hub.nuxt.com, if not already logged in
69-
2. Links your local project with a NuxtHub project, if not already linked
70-
3. Deploys your project to Cloudflare Pages
63+
Once the deployment is done, NuxtHub should be ready to use in your deployed project.
7164

72-
::callout
73-
Documentation coming soon.
74-
::
65+
### Remote data
7566

76-
<!-- TODO -->
67+
To enable remote data in your self-hosted project, the module requires a secret to access the remote data.
7768

78-
## On your own
79-
80-
Even if you don't want to use NuxtHub admin, you can use the NuxtHub module.
81-
82-
::callout
83-
Documentation coming soon.
84-
::
69+
1. Set the `NUXT_HUB_PROJECT_SECRET` environment variable in your Cloudflare Pages project settings and retry the last deployment to apply the changes.
70+
2. Set the same `NUXT_HUB_PROJECT_SECRET` and `NUXT_HUB_PROJECT_URL` environment variables in your local project:
71+
```bash [.env]
72+
NUXT_HUB_PROJECT_SECRET=my-project-secret-used-in-cloudflare-env
73+
NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
74+
```
8575

86-
<!-- TODO -->
76+
When restarting your local server, the module will automatically use the remote data from your deployed project as long as the `NUXT_HUB_PROJECT_SECRET` matches the one in your Cloudflare Pages project settings.
File renamed without changes.
File renamed without changes.
File renamed without changes.

docs/content/2.usage/4.analytics.md

-16
This file was deleted.

docs/content/index.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ description: 'Build full-stack Nuxt apps, with zero configuration.'
33
navigation: false
44
hero:
55
title: 'Build full-stack <span class="text-primary">Nuxt apps</span>, on the edge.'
6-
description: 'Access to a Database, Key-Value, and Blob storage with zero configuration. Deploy with confidence on your Cloudflare account and access to your data locally with a secured proxy.'
6+
description: 'Access to a Database, Key-Value, and Blob storage with zero configuration. Deploy with confidence on your Cloudflare account and access to your remote data locally with our secured proxy.'
77
orientation: horizontal
88
links:
99
- label: Get started
@@ -40,15 +40,15 @@ features:
4040
- title: 'Database'
4141
description: 'Access to a SQLite database in your server with zero configuration.'
4242
icon: 'i-ph-database'
43-
to: '/usage/database'
43+
to: '/storage/database'
4444
- title: 'Key-Value'
4545
description: 'Global, low-latency, key-value data storage in development and production.'
4646
icon: 'i-ph-coin'
47-
to: '/usage/kv'
47+
to: '/storage/kv'
4848
- title: 'Blob'
4949
description: 'Large storage of unstructured data to put anything inside and serve it as you want.'
5050
icon: 'i-ph-shapes'
51-
to: '/usage/blob'
51+
to: '/storage/blob'
5252
- title: 'Nuxt 3'
5353
description: 'Powered by Nuxt 3 for optimal performances and SEO.'
5454
icon: 'i-simple-icons-nuxtdotjs'

0 commit comments

Comments
 (0)