Vite React Build Options - Rollup.js

My recent project in React Boostraped with Vite gave me a tough time. Mostly because it was my first time using Vite, of course l used it cos it's rendering speed. l came across an issue where l had to add OneSignalSDKWorker file OneSignalWorker.js in the root folder. In development it worked but not on production. This was because during build Vite ignored any file in the src and root folder that had no attribute/linkage to the project (to reduce size of the minified bundle).

I had to find a work around it. The first attemt was to use rollup.js. There are Build options for Vite in vite.config.js that can be changed . Here's what l did with the rollup options:

build: {
    rollupOptions: {
      input: {
        app: './index.html',
        'OneSignalSDKWorker': './OneSignalSDKWorker.js',
      },
      output: {
        entryFileNames: assetInfo => {
          return assetInfo.name === 'OneSignalSDKWorker' ? '[name].js' : 'assets/js/[name].js'
        }
      },
    },
  },

In the code block above we get our inputs. the app options is for the entry point and the second one is assigning a variable to the directory with the file. During build the file be placed in the dist root folder.

Exception: This works with .js files and other es build types.

For adding general files in the root folder, create a directory in src and name it public. You can now place all of your files into that folder. On build, all files will appear in the dist root directory.

Read up more on rollup.js
Cheers!