How to setup a ViteJS project to build to an output directory
A step by step guide on creating a ReactJS, ViteJS, GLSL and ThreeJS project that outputs to a build to the public directory.
A step by step guide on creating a ReactJS, ViteJS, GLSL and ThreeJS project that outputs to a build to the public directory.
SubscribeReact, ThreeJS & GLSL ResourcesThe proposed solution can be found on the main branch of our Open Source React, Typescript & ViteJS Starter Project.
git clone git@github.com:delasign/reactjs-3js-vitejs-starter-project.gitStep One: Setup the Project
Follow the tutorial below to learn how to setup a Typescript & ViteJS project that works with a GLSL shader whose R, G, B color values can be adapted using dat.gui.
Step Two: Update the Vite Config
In the vite.config.ts file, update the defineConfig to include an outDir that matches the path of where you would like the build to be outputted to.
Step Three: Test
In Terminal, with the current directory set to that of the project, run yarn build and confirm that the build outputs to the right folder.
Looking to learn more about ReactJS, ViteJS and ThreeJS ?
Search our blog to find educational content on learning how to use ReactJS, ViteJS and ThreeJS.