# How to properly set up a Vite project when using custom shaders and ShaderMaterial

**URL:** <https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193>\
**Category:** Questions\
**Tags:** shader, npm, vite, shader-material\
**Created:** [September 16, 2023, 3:02pm UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193 "2023-09-16T15:02:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![johannesugb](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johannesugb/32/33361_2.png) [@johannesugb](https://forum.babylonjs.com/u/johannesugb)\
**Post date:** [September 16, 2023, 3:02pm UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/1 "2023-09-16T15:02:35Z")

</div>

_Disclaimer:_ First of all, my whole JavaScript framework/setup/build system/etc. knowledge is very limited, so it can be very likely that I am missing something fundamental or basic.

_Question:_

I have set up a Vite-based project, where I am using Babylon.js through modules that were installed through NPM. I’m also using `BABYLON.ShaderMaterial` and custom vertex and fragment shaders. Now, `ShaderMaterial` loads custom shader files by default from `./src/Shaders`, which is not good, because Vite does not deploy them when publishing (through `vite build`).

I can put the shaders into the `/public` directory and configure `ShaderMaterial` to load them from there through:

```js
BABYLON.Engine.ShadersRepository = "/public/src/Shaders/"

```

Then the shader files get deployed… but into `/src/Shaders/` (i.e., **not** `/public/src/Shaders/`) because that’s Vite’s convention.

So, now I’m stuck. Can I use different paths during development and after build? Can I deploy the shaders in a different way? How is this meant to be done?

I’m grateful for any advice—even if the advice says to stop using Vite use something else istead.

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [September 16, 2023, 8:20pm UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/2 "2023-09-16T20:20:46Z")

</div>

just import the things you need from the installed npm folders into the scripts that use them , eg :

`import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";`

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [September 17, 2023, 1:08am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/3 "2023-09-17T01:08:00Z")

</div>

There is no need to configure BABYLON.Engine.ShadersRepository, just use relative paths when creating shaderMaterial.

For example.

```auto
new ShaderMaterial("", scene, "./shader/simple")

```

He will request `/shader/simple.xxx.fx`, which actually means he will fetch the file `/public/shader/simple.xxx.fx`.

---

<div class="post-metadata">

**Author:** ![zhangyahan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zhangyahan/32/31789_2.png) [@zhangyahan](https://forum.babylonjs.com/u/zhangyahan)\
**Post date:** [September 17, 2023, 1:13am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/4 "2023-09-17T01:13:35Z")

</div>

1. First, your public directory should be in the root directory  
| – public  
| – public/Shaders  
| – src  
| – vite.config.ts
2. Then re-use the use  
BABYLON.Engine.ShadersRepository = “/Shaders/”

However, when static resources in public are updated, hot updates are not triggered. So you may need to use the configuration for rollup in vite.

> **[Vite](https://vitejs.dev/config/build-options.html#build-rollupoptions)**
>
> Next Generation Frontend Tooling

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/5/b537d4e3e9a17f381b89d9a2ed3ccfbfd3635435.png)  
This gives you the flexibility to configure shader file build paths and then use them.

Hope this helps you

---

<div class="post-metadata">

**Author:** ![johannesugb](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johannesugb/32/33361_2.png) [@johannesugb](https://forum.babylonjs.com/u/johannesugb)\
**Post date:** [September 17, 2023, 7:47am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/5 "2023-09-17T07:47:54Z")

</div>

I think that’s not related to my question?!

---

<div class="post-metadata">

**Author:** ![johannesugb](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johannesugb/32/33361_2.png) [@johannesugb](https://forum.babylonjs.com/u/johannesugb)\
**Post date:** [September 17, 2023, 7:58am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/6 "2023-09-17T07:58:18Z")

</div>

That’s great advice. Thank you!  
However, I still have to problem when creating a distribution-build through `vite build`, because it doesn’t deploy the shaders under `"./shader/simple"` to the distribution directory… unless I put everything into `/public/`?

My directory structure is as follows:

```auto
subpage/
├─ index.html
├─ babylonscene.js
├─ src/Shaders/
│ ├─ simple.vertex.fx
│ ├─ simple.fragment.fx
public/
index.html

```

I don’t really understand, how that setup would work with `subpage/src/Shaders/` vs `public/`.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [September 17, 2023, 8:23am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/7 "2023-09-17T08:23:20Z")

</div>

vite does not package files under src, unless you import it.

```javascript
import shader from "./shader/simple.xxx.fx"

```

My suggestion is to put the shader folder in the public folder.

---

<div class="post-metadata">

**Author:** ![johannesugb](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johannesugb/32/33361_2.png) [@johannesugb](https://forum.babylonjs.com/u/johannesugb)\
**Post date:** [September 17, 2023, 8:24am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/8 "2023-09-17T08:24:22Z")

</div>

Thank you, your post helped.  
I thought I had to refer to resources like `/public/src/Shaders/` during development and then `/src/Shaders/` for the distribution build, but `/src/Shaders/` works just fine during development as well due to the Vite server handling public paths automagically under the hood.

I just don’t quite understand what

```auto
output: {
  sourcemap: false,
  entryFileNames: 'assets/js/[name].[hash].js',
  chunkFileNames: 'assets/js/[name].[hash].js',
  assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
}

```

does in the `vite.config.js`. Would you mind explaining?

---

<div class="post-metadata">

**Author:** ![zhangyahan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zhangyahan/32/31789_2.png) [@zhangyahan](https://forum.babylonjs.com/u/zhangyahan)\
**Post date:** [September 17, 2023, 8:45am UTC](https://forum.babylonjs.com/t/how-to-properly-set-up-a-vite-project-when-using-custom-shaders-and-shadermaterial/44193/9 "2023-09-17T08:45:46Z")

</div>

This configuration is resource file output configuration, vite due to the internal is rollup, so the details of the document here: [Configuration Options | Rollup](https://rollupjs.org/configuration-options/#output-assetfilenames)

Also, if you want to trigger the shader to compile in vite, you must reference it, just as you would with a static resource file. Otherwise, you are advised to put the shader file in the public directory.

Alternatively, you can place the shader folder correctly into the dist output directory after build (there are some vite plugins to do this for you).