CODEWITHSUNDEEP
vite
birgersp
birgersp

Reputation: 4926

How can I build a vite application and host it on my website, but not in root of website?

I have a webserver running. I've made an application with vite (react) and I would like to host this application at a subdirectory of my website. E.g.

mydomain.com/myapps/myviteapp

My webserver is Apache Tomcat and usually when I have a static site I can just put in the directory I want to find it in. e.g. For this I would put it in

/var/lib/tomcat9/webapps/myapps/myviteapp

The problem with this is that vite build probably assumes that my site is hosted at root, because urls to assets are like this:

<script type="module" crossorigin src="/assets/index.27ec30df.js"></script>
<link rel="stylesheet" href="/assets/index.6d428de0.css">

So naturally that wont work, because the file index.27ec30df.js isn't really at /assets/index.27ec30df.js. It is at /myapps/myviteapp/assets/index.27ec30df.js...

How can I build a static website with vite, and put it in any "subdirectory" of my webserver?

Upvotes: 3

Views: 2566

Answers (1)

tony19
tony19

Reputation: 138436

Configure Vite's base (the base URL) to be the intended subdirectory path:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: '/myapps/myviteapp/',
})

demo

Upvotes: 3

Related Questions