vite.config.js

[fastify]

vite.config.js

[galvez]

Hey there @stephenjason89 thanks for trying out fastify-vite at such an early stage!

Changing root directory should be possible via the root option in the latest release.

Also for compression you need to do it on Fastify's side via fastify-compress, because in fastify-vite, we're only using Vite's built-in server middleware for development, not production.

In any case, if you provide me with a GitHub repo for your attempt, I can look at it and get it working/fixed this coming weekend. On weekdays I'm afraid I'm too swamped with my day job.

Cheers!

[galvez]

@ivanjeremic Vite's middleware is only useful for development purposes. It would be unnecessary overhead.

[galvez]

@ivanjeremic that's what fastify-vite does already — it'll use the appropriate renderer package for production.

[stephenjason89]

Thank you so much @galvez,
Tried out fastify-compress and it is working pretty good. I will use this instead of vite-compress.
However, I can't seem to make the root option to work. I'm currently using fastify-vite: 2.1.3

Here's a repo of what i'm trying to achieve.
https://github.com/stephenjason89/FastifyVite

Thank you so much for creating such a powerful tool

EDIT 1:
npm run dev
It is kinda working now but i get an error

npm run build
throws me an error about index.html not found, because it is trying to find it in package.json level. It should be inside /client

dist folder should also be changed to /client/dist

Edit 2:

FINALLY npm run dev working, in this folder structure.
The errors that were being thrown before was related to the absolute path
__dirname+'/entry/client.js

I had to make it a dynamic path

note i had to make use of ( .. ) instead of ( . ) i don't know why the single ./entry/client.js resolves to an absolute path similar to __dirname+'/entry/client.js

Now my problem is when building,
it is trying to find index.html inside the directory of package.json not inside client folder
If i place index.html in the dir of package.json then it builds successfully

but dist folder is located together with package.json and passing

vite:{
      build: {
        assetsDir: 'client/assets',
        outDir: 'client/dist',
      },
    }

Causes errors.

Also npm run serve is trying to find index.html inside /client which contradicts what npm run build wants

On my last commit, i tried to make vue-apollo to work. But not successful.
I just commented it out on main.js

[stephenjason89]

Hello, I'm sorry to bother you. But have you looked into it?

Thank you

[ivanjeremic]

Hey there @stephenjason89 thanks for trying out fastify-vite at such an early stage!

Changing root directory should be possible via the root option in the latest release.

Also for compression you need to do it on Fastify's side via fastify-compress, because in fastify-vite, we're only using Vite's built-in server middleware for development, not production.

In any case, if you provide me with a GitHub repo for your attempt, I can look at it and get it working/fixed this coming weekend. On weekdays I'm afraid I'm too swamped with my day job.

Cheers!

Any reason not to use Vite middleware for production? I was experimenting and wondering why not?

[ivanjeremic]

@ivanjeremic Vite's middleware is only useful for development purposes. It would be unnecessary overhead.

Ok so if I understand correctly if I want to build a nextjs like framework, It would make sense to use Vite built-in server only for development and fastify + vite build step for production correct?

[SuslegStyle]

Hey guys. I faced the issue as well at least for version "fastify-vite-vue": "2.2.0-beta.2".
vite-plugin-compression is not working, looks like even not being called.
fasitfy-compress is not working for me. I would prefer to have static compressed files rather than to compress it on a fly.

So, I created a compression assets script which I integrated to our CI pipeline. I just created a scripts command in my package.json file:
"compress": "node compress-assets.js",

Thus, after running npm run build you may run npm run compress to generate gzip and brotli compressed files.

The script is written on NodeJS 14.x

compress-assets.js

const {createGzip, createBrotliCompress, constants} = require('zlib');
const {pipeline: pipelineStream} = require('stream');
const {promisify} = require('util');
const {createReadStream, createWriteStream} = require('fs');
const {opendir} = require('fs/promises');
const {join, extname} = require('path');

const pipeline = promisify(pipelineStream);

function changeExtension(filepath, toExt) {
    return `${filepath}${toExt}`;
}

async function compressAssets() {
    const assetsPath = './dist/client/assets';
    const dir = await opendir(assetsPath);

    for await (const dirent of dir) {
        if (!dirent.isFile()
            || extname(dirent.name) === '.br'
            || extname(dirent.name) === '.gz') {
            continue;
        }

        console.log(`Start processing ${dirent.name}`);

        const filepath = join(assetsPath, dirent.name);
        const outputGzipFilepath = changeExtension(filepath, '.gz');
        const outputBrotliFilepath = changeExtension(filepath, '.br');

        const gzip = createGzip({
            level: constants.Z_BEST_COMPRESSION
        });
        const brotli = createBrotliCompress({
            level: constants.Z_BEST_COMPRESSION
        });

        await pipeline(
            createReadStream(filepath),
            gzip,
            createWriteStream(outputGzipFilepath)
        );

        await pipeline(
            createReadStream(filepath),
            brotli,
            createWriteStream(outputBrotliFilepath)
        );

    }
}

compressAssets()
    .then(() => console.log('Assets have been compressed'));

[galvez]

This has been fixed in the latest version. You either use vite.config.js or options.vite.

I'll add a mechanism to easily eject the bundled vite.config.js from renderer adapters, but for now know that if you manually provide vite.config.js, it'll work again.