How to configure Vite/Svelte project to run on a specific URL path?

Frontend
1

I’m working on a new Vite/Svelte project (not SvelteKit) and I’m trying to change where it’s served from. Right now, when I run the project using pnpm run, it starts up at localhost:3000/. But what I really want is for it to run at localhost:3000/frontend instead. I’ve looked through the docs but I’m not sure how to set this up. Does anyone know how to configure the project to serve from a specific path like /frontend? I’m new to Vite and Svelte, so any help would be great. Thanks!

2

hey silvia, i had the same issue! try adding 'base: ‘/frontend/’ to ur vite.config.js file. it worked for me. just remember to update any absolute paths in ur app too. good luck with ur project!

3

ooh, interesting project! have u considered using the ‘server’ option in vite.config.js? it lets u customize the dev server. maybe something like this:

server: {
  port: 3000,
  base: '/frontend/'
}

what kinda app r u building? sounds exciting! wanna share more deets?

4

To serve your Vite/Svelte project from a specific path like /frontend, you’ll need to modify your vite.config.js file. Add a base option to the configuration object. It should look something like this:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  base: '/frontend/'
})

This change will make your app serve from localhost:3000/frontend. Remember to update any absolute paths in your app to account for this new base URL. Also, when building for production, your assets will be nested under the /frontend directory.