Question 216449 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Vite.config.ts dynamic data for build assetsDir

I have a React App that uses Vite.
Everything is working as expected but I would like to see if we can customize the vite configuration further.

My goal is to make sure that my React app can be deployed from different subdirectories if needed and to make sure that we can serve the assets from different locations.

With my current set-up, my Vite config has the following:

vite.config.ts

  build: {
      // Tells the app where the assets will be served from.
      assetsDir: "./apps/my-react-app",
      sourcemap: false,
    }

Everything is working as expected as long as I keep the production bundle files within "/apps/my-react-app" in production.

Is it possible for the vite.config.ts file to read a variable from, lets say the global window object?
This will enable me to declare something like window.assetsServedFrom = "./apps/another_directory_for_build_files" and then my vite config will be:

vite.config.ts

  build: {
      // Tells the app where the assets will be served from.
      assetsDir: window.assetsServedFrom,
      sourcemap: false,
    }

I tried different ways to read a window variable but haven’t been successful.

It would be really great if this is possible.

Thank you

Tags:

2

Answers


  1. 0

    The vite config file is a static module which means that it not executed within the context of the browser and so, cannot access the window object. An alternative way to achieve what you want is to use environment variables.

    You need to create a .env file in your project root and declare your variable there. For example

    VITE_ASSETS_SERVED_FROM=./apps/my-react-app

    And then in your vite config file, you can access the variable by using import.meta.env. Here’s an example;

    build: {
  assetsDir: import.meta.env.VITE_ASSETS_SERVED_FROM,
  sourcemap: false
}

    Hope this helps!

    Login or Signup to reply.
  2. 0

    You probably want to set the base path to ./

    With this setting your project will be built with relative references to your assets, instead of absolute paths.

    // vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  build: {
    assetsDir: './apps/my-react-app',
  },
  plugins: [react()],
})

    For example, here is example index.html when built with default base: '/' (absolute paths from root)

    <!doctype html>
<html lang="en">
  <head>
    <!-- ... -->
    <script type="module" crossorigin src="/apps/my-react-app/index-afa5457f.js"></script>
    <link rel="stylesheet" href="/apps/my-react-app/index-d526a0c5.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

    and here is the same index.html with base: './' (relative paths):

    <!doctype html>
<html lang="en">
  <head>
    <!-- ... -->
    <script type="module" crossorigin src="./apps/my-react-app/index-57f96858.js"></script>
    <link rel="stylesheet" href="./apps/my-react-app/index-d526a0c5.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

    With this change could deploy your built site to any public path and the project should load correctly (as long as you maintain the relative locations of the built assets to one another).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search