# Deploying two Nuxt apps side-by-side

`@nuxtjs/vercel-builder` works out of the box for a single Nuxt app. If you're trying to deploy two Nuxt apps side-by-side, you'll need to add some extra configuration options.

The goal of this, is to run multiple Nuxt apps in one Vercel deployment, and allow them to use shared components.

To see this working altogether, check out [a deployable example of two side-by-side apps](./side-by-side-example).

## Setting up this example.

Lets walk through the setup of this side-by-side app. In our case, main app, and separate admin app.

1. vercel.json should exist at root level.
2. Each app should be in its own folder, at root level.
3. Each individual app should have their own package.json, facilitating their own Nuxt build (each app can have different dependancies)
4. If you're using shared components, they should be available in the root folder.

Your project structure should roughly look like so:

```
vercel.json

-- app/
---- app files...
---- nuxt.config.json

-- admin/
---- app files...
---- nuxt.config.json

-- shared/
---- shared mixins, components, etc
```

### Additional nuxt.config.js setup

In order to customize where each of these apps is built in our `@nuxtjs/vercel-builder`, we need to update our `nuxt.config.js`.

The goal here is to change our single app from building to `_nuxt` into two apps, building into `_nuxt/app` and `_nuxt/admin` respectively.

For this to work, we need to update:

- **srcDir** for the app, to match our Vercel builder
- **buildDir** to point to our new build folder
- **lambdaName** there is no need to set this for the main app, but secondary app needs to have a unique lambda name.
- **build.publicPath** this needs to match the route found in our `vercel.json`
- **build.extend** to include support for our shared components

#### Updating `app/nuxt.config.js`

This will build our main app to `_nuxt/app`, and serve it at `/` in our `vercel.json` routes.

```js
{
  "srcDir": __dirname,
  "buildDir": "_nuxt/app",
  "lambdaName": "index", // main app should be index, not needed here
  "build": {
    // publicPath matches our vercel.json routes
    "publicPath": "_nuxt/app",
    extend(config) {
      // Add '~/shared' as an alias.
      config.resolve.alias.shared = resolve(__dirname, "../shared");
      config.resolve.alias["~shared"] = resolve(__dirname, "../shared");
    }
  }
}
```

#### Updating `admin/nuxt.config.json`

This is our secondary app, meant to run side-by-side with our main app. This will build to `_nuxt/admin` and serve it at `/admin` in our `vercel.json` routes.

```js
{
  "srcDir": __dirname,
  "buildDir": "_nuxt/admin",
  "lambdaName": "admin", // if we don't name our secondary app, builds two index lambdas
  "router": {
    // gotta match our url routing at the app level
    "base": "/admin/"
  },
  "build": {
    // publicPath matches our vercel.json routes
    "publicPath": "_nuxt/admin",
    extend(config) {
      // Add '~/shared' as an alias.
      config.resolve.alias.shared = resolve(__dirname, "../shared");
      config.resolve.alias["~shared"] = resolve(__dirname, "../shared");
    }
  }
}
```

### Setting up `vercel.json` for the deploy

The goal here, is two set up two sets of nuxt catch all routes, and forward them to their respective apps.

We have **two builds**, one for each of our apps. These should point to the nuxt.config.js files you prepped above.

Our routes will include:

- Catch all for `/admin/_nuxt/admin/` build file lookups. This will point it to the root `_nuxt/admin` files we built.
- Catch all for `/_nuxt/` routes for main app
- admin main route, for hitting the app directly.
- catch all for admin sub routes, for hitting app pages
- generic catch all, for remaining routes, to feed to our core app.

```json
{
  "version": 2,
  "builds": [
    { "src": "app/nuxt.config.js", "use": "@nuxtjs/vercel-builder" },
    { "src": "admin/nuxt.config.js", "use": "@nuxtjs/vercel-builder" }
  ],
  "routes": [
    {
      "src": "/admin/_nuxt/(.*)",
      "dest": "/_nuxt/$1",
      "headers": {
        "Cache-Control": "max-age=31557600"
      }
    },
    {
      "src": "/_nuxt/.+",
      "headers": {
        "Cache-Control": "max-age=31557600"
      }
    },
    {
      "src": "^/admin",
      "dest": "/admin"
    },
    {
      "src": "^/admin/(.*)",
      "dest": "/admin"
    },
    {
      "src": "^/(.*)",
      "dest": "/"
    }
  ]
}
```

## Deploy the app.

With this set up, you should be able to `vc` and see your two apps live.
