[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Feedback](/c/feedback/8) # Customize static files showed in a project 257 views · 0 likes · 6 posts Ejgutierrez74 (@ejgutierrez74) · 2024-12-10 If i have a project with rootproject/docs....i wanna somehow in a vercel.json file tell Vercel to serve or show the files inside root/docs instead of root/public/docs. Also would be nice to update documentation where explaining whic files are shown are which not, and some example of structure project. My project is based on html5 boilerplate and viete. So Vercel should automatically recognize the structure and make settins accordly. Thanks Pauline P. Narvas (@pawlean) · 2024-12-10 Hi, @ejgutierrez74! How's it going? :smile: [quote="Ejgutierrez74, post:1, topic:2998, username:ejgutierrez74"] If i have a project with rootproject/docs…i wanna somehow in a vercel.json file tell Vercel to serve or show the files inside root/docs instead of root/public/docs. [/quote] To serve files from `rootproject/docs` instead of `root/public/docs` on Vercel: 1. Create a `vercel.json` file in your project root with this content: ```json file="vercel.json" { "outputDirectory": "docs" } ``` This configuration tells Vercel to serve files from the `docs` directory . For a Vite project, update your `vite.config.js`: ```javascript file="vite.config.js" import { defineConfig } from 'vite' export default defineConfig({ build: { outDir: '../docs' } }) ``` This ensures Vite builds your project into the `docs` directory. Project structure example: ```plaintext rootproject/ ├── docs/ # Served by Vercel │ ├── index.html │ ├── css/ │ ├── js/ │ └── images/ ├── src/ # Source files ├── vite.config.js └── vercel.json ``` Key points: - Vercel will only serve files from the specified `outputDirectory` (in this case, `docs`) . - The `public` directory will be ignored unless explicitly included in the build output. - Vercel has built-in support for Vite projects, but the `vercel.json` configuration takes precedence . This setup should work with your HTML5 Boilerplate and Vite-based project, serving files from `rootproject/docs` as requested. Let us know how you get on! Ejgutierrez74 (@ejgutierrez74) · 2024-12-10 Hi sorry my bad english..but this is my project structure right now:  Is there any way to maintein that structure ? my vite.config.js file: ``` import { defineConfig } from "vite"; export default defineConfig({ root: "./", build: { outDir: "dist", }, // base: "https://ejgutierrez.github.io/Pacman2024Windows", // <= agrega la llave base }); ``` I dont have any vercel.json, i execute ***vercel*** in local to deploy Ive been working all the weekend because the index.html was working, but not the docs....till in one discord channel of js developers told me that i had to use a new folder called public As mentioned above i think you have to document this somewhere in the documentation, as i didnt found that information ( i still dont know how this community mate learned that all files should be in public directory). Also if vite dont need to put all in a public folder, vercel should behave the same way. ( just my opinion) Pauline P. Narvas (@pawlean) · 2024-12-10 No worries! Hoping this helps. [quote="Ejgutierrez74, post:3, topic:2998, username:ejgutierrez74"] I dont have any vercel.json, i execute ***vercel*** in local to deploy [/quote] When you run the `vercel` command locally, it uses default settings if no `vercel.json` is present. By adding the `vercel.json` file as described above, you're explicitly telling Vercel how to handle your project. [quote="Ejgutierrez74, post:3, topic:2998, username:ejgutierrez74"] that i had to use a new folder called public [/quote] The confusion about the 'public' directory is understandable. Here's a clarification: - In Vite: The 'public' directory is for static assets that don't need processing. These are copied to the root of your `dist` directory during build. - In Vercel: By default, Vercel serves from a 'public' directory if no other configuration is provided. You don't need to move your files to a 'public' directory. Your current structure is fine; we just need to tell Vercel where to look. Does this help? Ejgutierrez74 (@ejgutierrez74) · 2024-12-11 Thanks for your help .... Id try in next days...by now i have some troubles in local deployment..... One more thing: in index.html in my structure i need a static js library called p5.js, so i call using `< script src="/js/sketch.js"></scirpt>` But this doesnt work in vercel. Wo work in Vercel ive to add type="module" ( it isnt a module as i dont import/export anything) `< script type="module" src="/js/sketch.js"></scirpt>` So i guess is related to my question, perhaps Vercel cant reach /js/sketch.js if not mentioned as module. Perhaps adding these directories to vercel.json would solve the problem ? Also if i add /js would Vercel access all the folders inside recursevely ? i have for example /js/libraries/p5.min.js Thanks Ejgutierrez74 (@ejgutierrez74) · 2024-12-12 @pawlean can you help me please ? With vite works fine, but in vercel i got an error: ``` Uncaught ReferenceError: p5 is not defined Nn https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776 An https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1 <anonymous> https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776 ``` As vite in local i want to access my index.html showing some p5.js sketches, and then if i go to myproject/docs show de index of documentation. this is the loading in hmt index in root project: ``` <script type="module" src="js/libraries/p5.min.js"></script> <!--Carreguem moduls--> <!--Carreguem sketch--> <script type="module" src="/js/sketch.mjs"></script> <script type="module" src="/js/secondsketch.mjs"></script> ``` I really need help im a teacher in vocational education
