Documentation
supastarter for Nuxtsupastarter for NuxtDeployment

Standalone API

Learn how to deploy your supastarter API separately from the frontend as a dedicated service.

This guide will show you how to deploy your supastarter API as a dedicated service. This can be useful if you want to run your API and frontend on different platforms or if you want your API to be a "long-running" service instead of a serverless deployment. You probably want to use this if you have tasks in your backend that have a long execution duration (that would exceed the timeout limit of a serverless deployment for example).

Create a dedicated app for your API

First you want to create a dedicated app inside your monorepo. This will be the app that will run the API as a node.js server.

Create the following files inside your monorepo:

apps/api/package.json
{
	"dependencies": {
		"@hono/node-server": "^1.13.7",
		"@repo/api": "workspace:*",
		"@repo/logs": "workspace:*"
	},
	"devDependencies": {
		"@repo/tsconfig": "workspace:*",
		"@types/node": "22.10.3",
		"esbuild": "^0.24.2",
		"tsx": "^4.19.2",
		"typescript": "5.7.2"
	},
	"name": "@repo/api-app",
	"private": true,
	"scripts": {
		"build": "esbuild ./src/index.ts --bundle --platform=node --outfile=dist/index.js",
		"dev": "tsx --env-file=../../.env.local src/index.ts --watch",
		"start": "node dist/index.js",
		"type-check": "tsc --noEmit"
	},
	"version": "0.0.0"
}
apps/api/src/index.ts
import { serve } from "@hono/node-server";
import { app } from "@repo/api";
import { logger } from "@repo/logs";

const port = Number.parseInt(process.env.PORT || "3001");

serve(
	{
		fetch: app.fetch,
		port,
	},
	() => {
		logger.info(`Server is running on port ${port}`);
	},
);

Add proxy configuration to the Nuxt app

The API will be running on a different URL than the app. To not have to handle cross-origin requests, you can proxy the API requests through the Nuxt app using the routeRules in your Nuxt config:

apps/saas/nuxt.config.ts
export default defineNuxtConfig({
  // ...
  routeRules: {
    '/api/**': {
      proxy: `${process.env.API_URL ?? 'http://localhost:3001'}/api/**`,
    },
  },
});

Now you should be able to run the API service locally, by running the known pnpm dev command inside your monorepo. It will start both apps in development mode.

Deploy API service

How to deploy the API service depends on where you want to run it. You can either use a platform like Render which allows to deploy a Node.js server, or you wrap the API service in a docker container and deploy it on a platform like Fly.io.

Deploy as Node.js server

To run the API service as a Node.js server, all you need to do is to connect your repository, build the API service and start the server.

# Build the API service
corepack enable; pnpm install --frozen-lockfile; pnpm --filter @repo/api-app build

# Start the API service
pnpm --filter @repo/api-app start

Set the API url in the Nuxt app

Finally, you need to provide the API url to the Nuxt app. You can do so by defining the API_URL environment variable in the deployment environment of the Nuxt app.