DEV Community: Simone van Buuren

Part 2: The Vite Chronicals

Simone van Buuren — Fri, 02 May 2025 13:07:21 +0000

If you haven't done so yet - read Part 1: The Vite Chronicals where I go into my woes when it comes to bundling and hosting a PDF file using Vite. Partially because js can be a pain but mostly because I was a dingus.

What about `.json` files?

You might be laughing a bit here. Of course .json and js goes hand in hand. Since the beginning of time we have used .json files to throw in config, mock data or see how many levels of data-indentation we can reach before we go crazy.

Well, what I want to do is have a data.json file where I "mock" all the data I want/need for a page so:
a. I can move away from hardcoding things into my components.
b. I have a quick and dirty way to get up and running.
c. Mock the response from an API call.

In practise this means I can simply import my file, and since I am not crazy and love using TypeScript, I can also type my data:

import rawData from "./assets/data.json";

const myData: UserAboutMe = rawData as UserAboutMe;

Again, as our PDF issue this works perfectly locally. No damage, all fun. but the moment you build or deploy the app, you'll notice 2 things.

1. There is no `data.json` in your assets folder

Yup that is right. No file, also we're importing it like an asset so don't come at me about embedding it into the .js file.

2. The page doesn't load and you get a console error

Failed to load module script: expected a javascript module script but the server responded with a mime type of "application/octet-stream". strict mime type checking is enforced for module scripts per html spec.

Yeah. A big. Fat. Middle finger. 💩

The solution!

So if you recall last time, our config looked like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    base: "/",
    build: {
        rollupOptions: {
            input: {
                main: "index.html"
            },
            output: {
                assetFileNames: assetInfo => {
                    if (assetInfo?.name?.endsWith(".pdf")) {
                        return "[name][extname]";
                    }
                    return "assets/[name]-[hash][extname]";
                }
            }
        }
    }
});

What we need to do however is copy any .json assets over to our distribution folder. We need static content! Luckily, there is a plugin that does the job called viteStaticCopy. It is as simple as:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteStaticCopy } from "vite-plugin-static-copy";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        viteStaticCopy({
            targets: [
                {
                    src: "src/assets/*.json",
                    dest: "assets"
                }
            ]
        })
    ],
    base: "/",
    build: {
        rollupOptions: {
            input: {
                main: "index.html"
            },
            output: {
                assetFileNames: assetInfo => {
                    if (assetInfo?.name?.endsWith(".pdf")) {
                        return "[name][extname]";
                    }
                    return "assets/[name]-[hash][extname]";
                }
            }
        }
    }
});

One merge, deploy and refresh later and our problems are solved! You could also double check that it works as expected by ensuring that the file is present in your dist folder locally.

The next enhancement I think I could make is rather move the data.json file itself to a data folder (since it isn't just an asset), what do you think?

Versions Used

node:  18.14.0
vite:  6.3.3
react: 18.3.1

Part 1: The Vite Chronicals

Simone van Buuren — Fri, 02 May 2025 09:11:15 +0000

I think we have all been there. You have an idea for a new little side project and the stars finally align:

You have a day free.
Your IDE is up to date and you have a clear vision.
You've setup your repository on GitHub.
And if you're like me, you've just rolled a new React project using Vite for the first time.

Look. I know that create-react-app was given the boot a loooong time ago but, and it was easy enough to get the ball rolling and setup typescript and everything else I wanted.

BUT. And here comes the but. I was busy working on my online resume. You know. That typical engineer-with-a-github-profile-thing where you use your Github page to host a small about you with some links.

Like most of you; I had the genius idea to throw my CV/Resume/Collection of my Professional Bones™ in a repo with my little cute React App and call it a day.

onClick: () => {
    window.open("../../assets/resume.pdf", "_blank");
}

Locally, this works like a charm, however the moment my deploy pipeline wraps up its thing I realize with horror that I get a lovely 404 page.

Not to stress! This is pretty simple. Since I'm used a Webpack setup professionally (with a lot of customizations), I hadn't worked with Vite as a bundler before. In short, I just had to use Vite's way of handling assets and import my PDF document and use the import itself in my function:

import ResumeFile from "../../assets/resume.pdf";

onClick: () => {
    window.open(ResumeFile , "_blank");
}

Now you're probably wondering why is this called the "Vite Chronicals" if all I had to do was change my import and all is good? Becuase I am not satisfied! That's why! When I click on my shiny new resume button, the actual resume is opened on this URL: https://svbygoibear.github.io/assets/resume.pdf. What I want is it to open on https://svbygoibear.github.io/resume.pdf. I know I can just move the PDF itself to my root/public folder but I want to keep it under assets but when I bundle and host it I want it at the root.

Which bings me back to the bundler... For this I added some extra configuration on build. This is my before:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    base: "/"
});

And this is my after:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    base: "/",
    build: {
        rollupOptions: {
            input: {
                main: "index.html"
            },
            output: {
                assetFileNames: assetInfo => {
                    if (assetInfo?.name?.endsWith(".pdf")) {
                        return "[name][extname]";
                    }
                    return "assets/[name]-[hash][extname]";
                }
            }
        }
    }
});

The important part here is the output. Here I check if a file ends with PDF and I simply return it without the assets root. Does this work though?

Now for my next challenge. I want to (very temporarily mind you) use a JSON file with a sample "payload" of my resume and read the file, parse it to typed instance and pass that around my relevant components instead of hardcoding it. But I just know will have more fun with Vite.

Until next time!

All I want to say with this article is that even after 10 years of working as a Software Engineer, you will still make silly mistakes. Make them! This is how you learn.

Versions Used

node:  18.14.0
vite:  6.3.3
react: 18.3.1

DEV Community: Simone van Buuren

Part 2: The Vite Chronicals

What about .json files?

1. There is no data.json in your assets folder

2. The page doesn't load and you get a console error

The solution!

Versions Used

Part 1: The Vite Chronicals

Versions Used

What about `.json` files?

1. There is no `data.json` in your assets folder