Customize static files showed in a project

Feedback
1

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

2

Hi, @ejgutierrez74! How’s it going? :smile:

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:
{
  "outputDirectory": "docs"
}

This configuration tells Vercel to serve files from the docs directory .

For a Vite project, update your 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:

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!

3

Hi sorry my bad english…but this is my project structure right now:

imagen
imagen657×856 57.7 KB

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)

4

No worries! Hoping this helps.

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.

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?

5

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

6

@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