# Using Ghost(Pro) with a subdirectory - NuxtJS

**URL:** <https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171>\
**Category:** Developer help\
**Created:** [September 13, 2023, 11:41am UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171 "2023-09-13T11:41:59Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [September 13, 2023, 11:41am UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/1 "2023-09-13T11:41:59Z")

</div>

Hi y’all,

I’m seeking guidance on how to effectively implement this rewrite using Nuxt. Any assistance would be greatly appreciated. Thank you in advance.

- **What’s your URL**? [https://blog.flecto.io/](https://blog.flecto.io/)
- **What version of Ghost are you using?** It’s hosted by Ghost

And

- How was Ghost installed and configured? Hosted
- What Node version, database, OS & browser are you using? Node 18.x
- What errors or information do you see in the console? Failed to resolve DNS path for this host
- What steps could someone else take to reproduce the issue you’re having?

We’re currently using Nuxt ^2.6.x, and I recently came across [this helpful article](https://ghost.org/help/run-ghost-from-a-subdirectory/) that outlines the process of rewrite routes from `https://flecto.io/blog to https://blog.flecto.io`

We’re hosted on Vercel ( Only website, not the Ghost blog )

In our `nuxt.config.js` file, I’ve incorporated a ProxyMiddleware:

```javascript
import { createProxyMiddleware } from 'http-proxy-middleware'

const rewriteRules = [
    createProxyMiddleware('/blog', {
        target: 'https://blog.flecto.io',
        changeOrigin: true,
        pathRewrite: {
            '^/blog': '/'
        }
    })
]

export default async () => {
    // ...
    serverMiddleware: rewriteRules,
    // ...
}

```

While the page functions as intended, I’ve encountered an issue with images and some CSS not loading properly. They attempt to download from localhost:3000/content/images… or localhost:3000/public/…

Furthermore, I’ve observed that when I include X-Forwarded-Host, the functionality breaks:

```auto
const rewriteRules = [
    createProxyMiddleware('/blog', {
        target: 'https://blog.flecto.io',
        changeOrigin: true,
        headers: {
            'X-Forwarded-Host': BLOG_URL,
        },
        pathRewrite: {
            '^/blog': '/'
        }
    })
]

```

Resulting in:

# Domain error

## Failed to resolve DNS path for this host

---

<div class="post-metadata">

**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\
**Post date:** [September 13, 2023, 12:20pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/2 "2023-09-13T12:20:37Z")

</div>

To make sure I understand:

Is the example code you are providing to be run on Vercel, where it will redirect content there to Ghost?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [September 13, 2023, 12:29pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/3 "2023-09-13T12:29:01Z")

</div>

What url does Ghost ‘think’ it’s at? You’ll need Ghost to believe it’s URL is [flecto.io/blog](http://flecto.io/blog) (even if it only gets those requests by reverse proxy), if you want it to reliably create links to itself that work.

---

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [September 13, 2023, 12:41pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/4 "2023-09-13T12:41:08Z")

</div>

Not redirect, but rewrite. Both URL will keep working, but the /blog will rewrite the route.

Example: [next.config.js Options: rewrites | Next.js](https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites)

---

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [September 13, 2023, 12:43pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/5 "2023-09-13T12:43:14Z")

</div>

Yeah, as i said, this is working, but i think i need the X-Forwarded-Host to make ghost “think” that it is ghost URL. So i got Failed to resolve DNS path for this host.

---

<div class="post-metadata">

**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\
**Post date:** [September 13, 2023, 12:47pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/6 "2023-09-13T12:47:16Z")

</div>

Do rewrites issue HTTP redirects or only solve issues when the destination is also served by the same Next.js app?

---

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [September 13, 2023, 1:12pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/7 "2023-09-13T13:12:45Z")

</div>

The error happen when i added: X-Forwarded-Host in headers.

To be more clear, i added this configuration in our Next App Staging Enviroment:

```auto
trailingSlash: true,
  async headers() {
    return [
      {
        source: '/blog',
        headers: [
          {
            key: 'x-forwarded-host',
            value: 'https://market.staging.flecto.io/blog',
          },
        ],
      },
      {
        source: '/blog/:path*',
        headers: [
          {
            key: 'x-forwarded-host',
            value: 'https://market.staging.flecto.io/blog',
          },
        ],
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/blog',
        destination: 'https://blog.flecto.io',
      },
      {
        source: '/blog/:path*/',
        destination: 'https://blog.flecto.io/:path*/',
      },
    ]
  },

```

When i access the following link: [Domain error](https://market.staging.flecto.io/blog)

I got: Failed to resolve DNS path for this host

Fixing this enviroment, i can try the same approach in Nuxt App.

---

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [September 15, 2023, 10:39am UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/8 "2023-09-15T10:39:55Z")

</div>

I have updated the next.config.js with

```auto
const ghostRules = [
  // https://ghost.org/help/run-ghost-from-a-subdirectory
  // Have an X-Forwarded-Host header that matches the custom domain in Ghost(Pro) > Domains
  // x-forwarded-host must match your base custom domain set within Ghost Admin - if you're configuring example.com/blog/ then this would be example.com
  {
    key: 'x-forwarded-host',
    value: 'https://market.staging.flecto.io',
  },
  // Include the X-Forwarded-Proto header set to https not http.
  {
    key: 'x-forwarded-proto',
    value: 'https',
  },
  // Provide a certificate & serve HTTPS traffic.
  {
    key: 'x-forwarded-port',
    value: '443',
  },
  // Include the X-Forwarded-For header, populated with the remote IP of the original request.
  {
    key: 'x-forwarded-for',
    value: 'https://market.staging.flecto.io/blog',
  },
]

...
trailingSlash: true,
  async headers() {
    return [
      {
        source: '/blog',
        headers: ghostRules,
      },
      {
        source: '/blog/:path*',
        headers: ghostRules,
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/blog',
        destination: 'https://blog.flecto.io',
      },
      {
        source: '/blog/:path*/',
        destination: 'https://blog.flecto.io/:path*/',
      },
    ]
  },
....

```

But the error with DNS keep the same, do i need to add `https://market.staging.flecto.io/blog` in the Ghost panel ?

---

<div class="post-metadata">

**Author:** ![ColinMcDermottWhop](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/colinmcdermottwhop/32/25479_2.png) [@ColinMcDermottWhop](https://forum.ghost.org/u/ColinMcDermottWhop)\
**Post date:** [October 28, 2023, 9:15am UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/9 "2023-10-28T09:15:02Z")

</div>

We have Ghost Pro working on a sub-directory on Vercel but so far I believe caching isn’t working [Whop | Blog](https://whop.com/blog/)

---

<div class="post-metadata">

**Author:** ![alexcastrodev](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/alexcastrodev/32/26330_2.png) [@alexcastrodev](https://forum.ghost.org/u/alexcastrodev)\
**Post date:** [October 28, 2023, 9:30am UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/10 "2023-10-28T09:30:28Z")

</div>

That’s what i want to do. could you provide an example of your config ?

I receive an email saying that i need to upgrade do enterprise or pay a addon to do that :(

---

<div class="post-metadata">

**Author:** ![ColinMcDermottWhop](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/colinmcdermottwhop/32/25479_2.png) [@ColinMcDermottWhop](https://forum.ghost.org/u/ColinMcDermottWhop)\
**Post date:** [November 6, 2023, 5:48pm UTC](https://forum.ghost.org/t/using-ghost-pro-with-a-subdirectory-nuxtjs/41171/11 "2023-11-06T17:48:25Z")

</div>

it is possible we may be paying for enterprise, our bill is pretty high! sorry I don’t have access to the config