Skip to content

Commit

Permalink
docs: add documentation about built-in providers (#3115)
Browse files Browse the repository at this point in the history
  • Loading branch information
farnabaz authored Feb 11, 2025
1 parent 6ff4bec commit 7f116e5
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 0 deletions.
8 changes: 8 additions & 0 deletions docs/content/docs/6.deploy/2.serverless.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ Serverless hosting lets you run code and applications without managing servers d

## Deploy with Serverless

The module have built-in support for couple of famous serverless platforms. You can deploy your project to them with ease. Checkout the guides for each platform:

- [NuxtHub](/docs/deploy/nuxthub)
- [Cloudflare Pages](/docs/deploy/cloudflare-pages)
- [Vercel](/docs/deploy/vercel)

If you like to deploy to other platforms, you can follow below steps to deploy your project.

### 1. Select a database service

Before deploying your project, you need to select a database service:
Expand Down
41 changes: 41 additions & 0 deletions docs/content/docs/6.deploy/3.nuxthub.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: NuxtHub
description: Deploy your Content app to NuxtHub
---

::card
Quick Setup

1. Install the `@nuxthub/core` module `nuxi module add hub`
2. Use `npx nuxthub deploy` to deploy your content to NuxtHub
::

:hr

Nuxt Content module has a built-in integration with [NuxtHub](https://hub.nuxt.com) to deploy your content.

To enable NuxtHub integration, you need to install the `@nuxthub/core` module and register it in your `nuxt.config.ts`. More efficiently, you can use `nuxi module` command to do both at once.

```bash
npx nuxi module add hub
```

That's it :tada:

Now you can use the `npx nuxthub deploy` command to deploy your content to NuxtHub.

```bash
npx nuxthub deploy
```


::note
Nuxt Content module automatically enables NuxtHub database. And update database configuration to use Cloudflare D1 with `DB` binding name. (This is default configuration for NuxtHub database.)

:br

You can override the database configuration by providing your own database configuration in `nuxt.config.ts`.
::


Checkout the [NuxtHub documentation](https://hub.nuxt.com/docs/getting-started/deploy) for more information.
41 changes: 41 additions & 0 deletions docs/content/docs/6.deploy/4.cloudflare-pages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: Cloudflare Pages
description: Deploy your Content app to Cloudflare Pages
---

::card
Quick Setup

1. Use `nuxi build --preset=cloudflare_pages` to build your app
2. Create D1 database and connect to your project in Cloudflare Dashboard under `DB` binding name
3. Deploy/Redeploy your app
::

:hr

Nuxt Content module has a built-in integration with [Cloudflare Pages](https://pages.cloudflare.com) to deploy your content.

Module will automatically detects the build target and prepare the necessary configuration for Cloudflare Pages. Content module currently only support [`cloudflare-pages` presets](https://nuxt.com/deploy/cloudflare).

You can either use `--preset=cloudflare_pages` option on `nuxi build` command or use `nuxt.config.ts` to configure the preset.

```ts
export default defineNuxtConfig({
nitro: {
preset: 'cloudflare_pages',
},
});
```

The module requires a D1 database to be connected to the app in order to work. By default it will use the `DB` binding name. You can override the database configuration by providing your own database configuration in `nuxt.config.ts`.

After creating a new Cloudflare Pages project, you need to create a new D1 database and connect it to the project. Make sure to use the same binding name as the module is using. (default is `DB`)


That's it :tada:

Checkout:

- [Nuxt Deploy documentation](https://nuxt.com/deploy/cloudflare)
- [Cloudflare D1 documentation](https://developers.cloudflare.com/d1/)
- [Cloudflare Pages documentation](https://developers.cloudflare.com/pages/)
29 changes: 29 additions & 0 deletions docs/content/docs/6.deploy/5.vercel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: Vercel
description: Deploy your Content app to Vercel
---

::card
Quick Setup

- Execeute `npx vercel deploy` command or go to Vercel dashboard and create a new project using git repository.
::

:hr

Nuxt Content projects can be deployed to Vercel with zero configuration. The module will automatically detects Vercel environment and prepare the necessary configuration for Vercel.

All you need to do is to execute `npx vercel deploy` command or go to Vercel dashboard and create a new project using git repository.

That's it :tada:

::note
By default module will use SQlite database in Vercel located at `/tmp` directory. You can override the database configuration by providing your own database configuration.
:br
There are a couple of database providers that are supported by Vercel. You can use any of them by providing the correct connection string in `nuxt.config.ts`.
::

Checkout:

- [Nuxt Deploy documentation](https://nuxt.com/deploy/vercel)
- [Vercel documentation](https://vercel.com/docs/deployments/deployment-methods)
79 changes: 79 additions & 0 deletions docs/content/docs/6.deploy/6.docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
title: Docker
description: Deploy your Content app with Docker
---

Docker is a popular containerization platform that allows you to package your application with all its dependencies into a single container. This makes it easy to deploy your Content app on any platform that supports Docker.

## With Node.js image

Using Docker's Node.js image, you can deploy your Content app. All you need is to create a Dockerfile and build the image. Here is an example Dockerfile:

```docker [Dockerfile]
# Build Stage 1
FROM node:22-alpine AS build
WORKDIR /app
RUN corepack enable
# Copy package.json and your lockfile, here we add pnpm-lock.yaml for illustration
COPY package.json pnpm-lock.yaml .npmrc ./
# Install dependencies
RUN pnpm i
# Copy the entire project
COPY . ./
# Build the project
RUN pnpm run build
# Build Stage 2
FROM node:22-alpine
WORKDIR /app
# Only `.output` folder is needed from the build stage
COPY --from=build /app/.output/ ./
# Change the port and host
ENV PORT 80
ENV HOST 0.0.0.0
EXPOSE 80
CMD ["node", "/app/server/index.mjs"]
```

## With Bun image

If you like to use Bun, you can use the official Bun image. Here is an example Dockerfile:

```docker [Dockerfile]
# use the official Bun image
# see all versions at https://hub.docker.com/r/oven/bun/tags
FROM oven/bun:1 AS build
WORKDIR /app
COPY package.json bun.lockb ./
# use ignore-scripts to avoid builting node modules like better-sqlite3
RUN bun install --frozen-lockfile --ignore-scripts
# Copy the entire project
COPY . .
RUN bun --bun run build
# copy production dependencies and source code into final image
FROM oven/bun:1 AS production
WORKDIR /app
# Only `.output` folder is needed from the build stage
COPY --from=build /app/.output /app
# run the app
EXPOSE 3000/tcp
ENTRYPOINT [ "bun", "--bun", "run", "/app/server/index.mjs" ]
```
File renamed without changes.
3 changes: 3 additions & 0 deletions docs/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export default defineNuxtConfig({
depth: 4,
searchDepth: 4,
},
highlight: {
langs: ['docker'],
},
},
},
database: {
Expand Down

0 comments on commit 7f116e5

Please sign in to comment.