/ vite.config.js
vite.config.js
  1  import preact from '@preact/preset-vite';
  2  import { execSync } from 'child_process';
  3  import fs from 'fs';
  4  import { resolve } from 'path';
  5  import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
  6  import generateFile from 'vite-plugin-generate-file';
  7  import htmlPlugin from 'vite-plugin-html-config';
  8  import { VitePWA } from 'vite-plugin-pwa';
  9  import removeConsole from 'vite-plugin-remove-console';
 10  
 11  const { NODE_ENV } = process.env;
 12  const {
 13    VITE_CLIENT_NAME: CLIENT_NAME,
 14    VITE_CLIENT_ID: CLIENT_ID,
 15    VITE_APP_ERROR_LOGGING: ERROR_LOGGING,
 16  } = loadEnv('production', process.cwd());
 17  
 18  const now = new Date();
 19  const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
 20  
 21  const rollbarCode = fs.readFileSync(
 22    resolve(__dirname, './rollbar.js'),
 23    'utf-8',
 24  );
 25  
 26  // https://vitejs.dev/config/
 27  export default defineConfig({
 28    base: './',
 29    mode: NODE_ENV,
 30    define: {
 31      __BUILD_TIME__: JSON.stringify(now),
 32      __COMMIT_HASH__: JSON.stringify(commitHash),
 33    },
 34    server: {
 35      host: true,
 36    },
 37    plugins: [
 38      preact(),
 39      splitVendorChunkPlugin(),
 40      removeConsole({
 41        includes: ['log', 'debug', 'info', 'warn', 'error'],
 42      }),
 43      htmlPlugin({
 44        headScripts: ERROR_LOGGING ? [rollbarCode] : [],
 45      }),
 46      generateFile([
 47        {
 48          type: 'json',
 49          output: './version.json',
 50          data: {
 51            buildTime: now,
 52            commitHash,
 53          },
 54        },
 55      ]),
 56      VitePWA({
 57        manifest: {
 58          id: CLIENT_ID,
 59          name: CLIENT_NAME,
 60          short_name: CLIENT_NAME,
 61          description: 'Follow your interests across social networks!',
 62          theme_color: '#ffffff',
 63          icons: [
 64            {
 65              src: 'logo-192.png',
 66              sizes: '192x192',
 67              type: 'image/png',
 68            },
 69            {
 70              src: 'logo-512.png',
 71              sizes: '512x512',
 72              type: 'image/png',
 73            },
 74            {
 75              src: 'logo-maskable-512.png',
 76              sizes: '512x512',
 77              type: 'image/png',
 78              purpose: 'maskable',
 79            },
 80          ],
 81          screenshots : [
 82            {
 83              'src': 'agora-social-desktop-1.png',
 84              'sizes': '1280x720',
 85              'type': 'image/webp',
 86              'form_factor': 'wide',
 87              'label': ''
 88            },
 89            {
 90              'src': 'agora-social-desktop-2.png',
 91              'sizes': '1280x720',
 92              'type': 'image/webp',
 93              'form_factor': 'wide',
 94              'label': ''
 95            },
 96            {
 97              'src': 'agora-social-desktop-3.png',
 98              'sizes': '1280x720',
 99              'type': 'image/webp',
100              'form_factor': 'wide',
101              'label': ''
102            },
103            {
104              'src': 'agora-social-mobile-1.png',
105              'sizes': '1280x720',
106              'type': 'image/webp',
107              'form_factor': 'narrow',
108              'label': ''
109            },
110            {
111              'src': 'agora-social-mobile-2.png',
112              'sizes': '1280x720',
113              'type': 'image/webp',
114              'form_factor': 'narrow',
115              'label': ''
116            },
117            {
118              'src': 'agora-social-mobile-3.png',
119              'sizes': '1280x720',
120              'type': 'image/webp',
121              'form_factor': 'narrow',
122              'label': ''
123            },
124          ],
125        },
126        strategies: 'injectManifest',
127        injectRegister: 'inline',
128        injectManifest: {
129          // Prevent "Unable to find a place to inject the manifest" error
130          injectionPoint: undefined,
131        },
132        devOptions: {
133          enabled: NODE_ENV === 'development',
134          type: 'module',
135        },
136      }),
137    ],
138    build: {
139      sourcemap: true,
140      rollupOptions: {
141        treeshake: false,
142        input: {
143          main: resolve(__dirname, 'index.html'),
144          compose: resolve(__dirname, 'compose/index.html'),
145        },
146        output: {
147          chunkFileNames: (chunkInfo) => {
148            const { facadeModuleId } = chunkInfo;
149            if (facadeModuleId && facadeModuleId.includes('icon')) {
150              return 'assets/icons/[name]-[hash].js';
151            }
152            return 'assets/[name]-[hash].js';
153          },
154        },
155      },
156    },
157  });