How to create Subdomains in Development environment with VIteJS?

Question

I have the following subdomains:

• admin.myapp.dev
• buyers.myapp.dev
• sellers.myapp.dev

I tried running several servers on different ports but those didn't work.

What is the correct way to config the ViteJS to resolve those subdomains?

Answer 1

To resolve theses subdomains, use vite's server.proxy option.

server: {
    proxy: {
      // forward localhost:3000/admin -> to -> admin.myapp.dev
      '/admin': {
        target: 'admin.myapp.dev/'
      },

      '/buyers': {
        target: 'buyers.myapp.dev'
      },
      
      '/sellers': {
        target: 'sellers.myapp.dev'
      }      
    }
  }

You can also change the origin or rewrite the endpoint, even with RegEx. Please check the offical doc about this point.