vite-plugin-list-directory-contents
v1.4.5
Published
A Vite plugin for listing the directory contents when working with the dev server
Downloads
725
Readme
vite-plugin-list-directory-contents
A small vite plugin to list your directory contents.
Why? In development mode, vite will allow you to have as many inputs as you want, simply run vite .
and the current folder will be served up. Clicking any .html
files will be compiled by vite (vited?). So, rather than manually type in the paths to all your inputs, this will list all your files so you can click them with ease. Like the good 'ol Index Of /
days.
How to use:
npm i vite vite-plugin-list-directory-contents
- create a
vite.config.ts
(or .js) like this:
import { defineConfig } from "vite";
import { directoryPlugin } from "vite-plugin-list-directory-contents";
export default defineConfig({
plugins: [directoryPlugin({ baseDir: __dirname })],
});
The first time it's run, the plugin will create an
index.html
for you in yourbaseDir
. You can put anything in this file, and it will be processed by vite, but the important part is the{%DIRECTORY%}
template tag that will be replaced with the directory listing.go ahead and run
vite
from your cli, or set a"dev": "vite"
in your `package.json scripts"
Config
directoryPlugin has two arguments:
baseDir
- where do you want to serve the files up from? __dirname is a good choice, but you can set to a subfolder.filterList
- an array of files to filter out. Defaults to['.DS_Store', 'package.json', 'package-lock.json', 'node_modules', '.parcelrc', '.parcel-cache', 'dist', 'packages', '.git', '.eslintrc', '.gitignore', '.npmrc', 'tsconfig.json', 'vite.config.ts', '.env', 'development.env', 'production.env']
Builds
This plugin is only meant to run in "serve" mode (development). It will be ignored on build.
Security
You should note that anytime you create a local server listing directory files on your computer, anyone on your local network could find the port and visit your application. This is great, because you can visit your apps from your phone.
This plugin doesn't allow any access to files that vite doesn't already do, but it does list your files, so don't run it on any folders you don't want opened up to your local network.
Vite does already deny common files like .env
: https://vitejs.dev/config/server-options.html#server-fs-deny
Contributing
Edit plugin.ts
, then run npm run build
to build a copy. Edits welcome :)
You can run npm run demo
to test things out with some code in the /demo
dir.