Skip to content

Commit

Permalink
docs: improve the getting-started
Browse files Browse the repository at this point in the history
  • Loading branch information
atinux committed Feb 23, 2024
1 parent 9d6f699 commit 0e9155d
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 88 deletions.
53 changes: 46 additions & 7 deletions docs/content/1.getting-started/1.index.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,53 @@
---
title: Introduction
description: Welcome to NuxtHub documentation.
description: NuxtHub helps you build full-stack applications on the Edge.
---

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.
NuxtHub aims to provide a complete backend experience for [Nuxt](https://nuxt.com) apps, allowing developers to build full-stack applications on the Edge.

::callout
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.
::

## Features

- Session management
- Query a SQLite database with [Database](/usage/database)
- Access key-value storage with [KV](/usage/kv)
- Store files with [Blob](/usage/blob)
- Track events with [Analytics](/usage/analytics)
NuxtHub provides a set of features to help you build full-stack applications:
- **SQL database** to store your application's data
- **Blob storage** to store static assets, such as images, video and more
- **Key-Value** to store JSON data accessible globally with low-latency

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).

::callout{icon="i-ph-plugs-connected-duotone"}
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.
::

## Modules

We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` modules.

- [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main module to provide storage features
- `@nuxthub/auth`: Authentication module for user management
- `@nuxthub/analytics`: Analytics module to track events within your applicaiton and API
- `@nuxthub/...`: You name it!

::callout
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).
::

## Console (alpha)

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.

### Features

- Link your Cloudflare account and stay in control, we never mark-up Cloudflare prices.
- Deploy your application with `nuxthub deploy` command
- Relax while it provision all the necessary resources (database, kv, blob)
- Manage your app's resources with your admin panel
- Give access to team members to manage the application without sharing your Cloudflare account
- Monitor your application with logs and analytics

::callout
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.
::
7 changes: 4 additions & 3 deletions docs/content/1.getting-started/2.installation.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
title: Installation
description: How to use NuxtHub in a project.
description: Add NuxtHub core module to your Nuxt project.
---

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.

## Setup

1. Install NuxtHub module to your project:
1. Install the NuxtHub module to your project:

::code-group

Expand Down Expand Up @@ -37,6 +36,8 @@ export default defineNuxtConfig({
})
```

That's it! You can now use the NuxtHub module in your Nuxt project.

## Options

| Key | Default | Description |
Expand Down
106 changes: 48 additions & 58 deletions docs/content/1.getting-started/3.deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,84 +3,74 @@ title: Deploy
description: How to deploy your project with NuxtHub.
---

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.
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.

Then, two options are offered to you:
## NuxtHub Console (alpha)

## Using hub.nuxt.com
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.

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.
After linking your Cloudflare account in the console, deploy your project with a single command:

### Create your team

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.

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.

Done? Now your team is connected to Cloudflare.

### Create your project

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.

Install NuxtHub CLI with any binaries manager (we recommand Volta.sh):

```bash
volta install nuxthub
```

Then you can already connect it to NuxtHub with:

```bash
nuxthub login
```bash [Terminal]
npx nuxthub deploy
```

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.
The command will:
1. Ensure your are logged in on hub.nuxt.com
2. Link your local project with a NuxtHub project (or create a new one)
3. Build your Nuxt project with the correct preset
4. Deploy it to your Cloudflare account with all the necessary resources
4. Provide you with a URL to access your project

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

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.
### Remote data

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

```bash
nuxthub link
```ts [nuxt.config.ts]
export default defineNuxtConfig({
hub: {
remote: true
}
})
```

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.
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.

#### With the CLI
## Self-hosted

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.
You can deploy your project on your own Cloudflare account without using the NuxtHub Console.

```bash
nuxthub link
```
For that, you need to create the necessary resources in your Cloudflare account and configure your project to use them.

### Deploy your project
1. Create a D1 database, KV namespace and R2 bucket in your Cloudflare account.
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

```bash
nuxthub deploy
```
Once your project is created, open the `Settings -> Functions` tab and set:
- Placement: Smart
- KV namespace bingins
- `KV` -> select your KV namespace created
- R2 bucket bindings
- `BLOB` -> select your R2 bucket created
- D1 database bindings
- `DB` -> select your D1 database created

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

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

::callout
Documentation coming soon.
::
### Remote data

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

## On your own

Even if you don't want to use NuxtHub admin, you can use the NuxtHub module.

::callout
Documentation coming soon.
::
1. Set the `NUXT_HUB_PROJECT_SECRET` environment variable in your Cloudflare Pages project settings and retry the last deployment to apply the changes.
2. Set the same `NUXT_HUB_PROJECT_SECRET` and `NUXT_HUB_PROJECT_URL` environment variables in your local project:
```bash [.env]
NUXT_HUB_PROJECT_SECRET=my-project-secret-used-in-cloudflare-env
NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
```

<!-- TODO -->
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.
16 changes: 0 additions & 16 deletions docs/content/2.usage/4.analytics.md

This file was deleted.

8 changes: 4 additions & 4 deletions docs/content/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ description: 'Build full-stack Nuxt apps, with zero configuration.'
navigation: false
hero:
title: 'Build full-stack <span class="text-primary">Nuxt apps</span>, on the edge.'
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.'
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.'
orientation: horizontal
links:
- label: Get started
Expand Down Expand Up @@ -40,15 +40,15 @@ features:
- title: 'Database'
description: 'Access to a SQLite database in your server with zero configuration.'
icon: 'i-ph-database'
to: '/usage/database'
to: '/storage/database'
- title: 'Key-Value'
description: 'Global, low-latency, key-value data storage in development and production.'
icon: 'i-ph-coin'
to: '/usage/kv'
to: '/storage/kv'
- title: 'Blob'
description: 'Large storage of unstructured data to put anything inside and serve it as you want.'
icon: 'i-ph-shapes'
to: '/usage/blob'
to: '/storage/blob'
- title: 'Nuxt 3'
description: 'Powered by Nuxt 3 for optimal performances and SEO.'
icon: 'i-simple-icons-nuxtdotjs'
Expand Down

0 comments on commit 0e9155d

Please sign in to comment.