Vite Integration

ByteHide Shield provides a dedicated Vite plugin that allows you to seamlessly protect your JavaScript code during the build process. This guide explains how to install and configure the Shield Vite plugin.

Installation

Install the ByteHide Shield Vite plugin from npm:

npm install --save-dev @bytehide/vite-shield

Or with yarn:

yarn add --dev @bytehide/vite-shield

Basic Setup

Add the Shield plugin to your Vite configuration:

// vite.config.js
import { defineConfig } from 'vite';
import ByteHideShieldPlugin from '@bytehide/vite-shield';

export default defineConfig({
  plugins: [
    ByteHideShieldPlugin({
      projectToken: 'your-project-token', // Required: Get this from your ByteHide account
    })
  ]
});

With this minimal configuration, Shield will apply default protections to your bundled code.

Configuration Options

The Vite plugin accepts the following options:

Advanced Configuration

For more advanced use cases, you can provide additional Shield protection options:

// vite.config.js
import { defineConfig } from 'vite';
import ByteHideShieldPlugin from '@bytehide/vite-shield';

export default defineConfig({
  plugins: [
    ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      distDir: 'dist',
      replace: true,
      obfuscatedExtension: '.obf',
      exclude: ['vendor.js', 'polyfills.js'],
      config: {
        controlFlowFlattening: true,
        debugProtection: true,
        devtoolsBlocking: true,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        selfDefending: true,
        identifierNamesGenerator: 'hexadecimal'
      }
    })
  ]
});

Environment-Specific Configuration

You can apply different protection settings based on the environment:

// vite.config.js
import { defineConfig } from 'vite';
import ByteHideShieldPlugin from '@bytehide/vite-shield';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';
  
  return {
    plugins: [
      // Only apply Shield in production builds
      isProd && ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
        replace: true,
        config: {
          // More aggressive settings for production
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true
        }
      })
    ].filter(Boolean) // Filter out falsy plugins
  };
});

File Exclusions

You can exclude specific files from obfuscation using the exclude option:

// vite.config.js
import { defineConfig } from 'vite';
import ByteHideShieldPlugin from '@bytehide/vite-shield';

export default defineConfig({
  plugins: [
    ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      exclude: [
        'node_modules/**/*.js', // Exclude all node_modules
        'src/vendor/**/*.js',    // Exclude vendor files
        'src/polyfills.js'       // Exclude specific file
      ]
    })
  ]
});

Features

The Vite plugin for ByteHide Shield provides the following features:

• JavaScript file obfuscation: Protect your code from reverse engineering
• Watermarking for protected files: Add watermarks to identify protected code
• Build-time obfuscation: Integrate protection directly into your build process

Complete Example

Here's a complete example of a production Vite configuration with Shield:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ByteHideShieldPlugin from '@bytehide/vite-shield';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';
  
  return {
    plugins: [
      react(),
      isProd && ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
        replace: true,
        exclude: ['vendor/**/*.js'],
        config: {
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true,
          stringArray: true,
          stringArrayEncoding: ['base64'],
          selfDefending: true,
          identifierNamesGenerator: 'hexadecimal',
          reservedNames: [
            '^React$', '^useState$', '^useEffect$',
            '^render$', '^Component$'
          ]
        }
      })
    ].filter(Boolean),
    build: {
      outDir: 'dist',
      minify: isProd ? 'terser' : false,
      sourcemap: !isProd
    }
  };
});

Troubleshooting

Common Issues

Network Error

If you encounter network errors during the build process:

• Ensure you have an active internet connection as the plugin uses a remote service for code obfuscation
• Check if your network firewall is blocking requests to the ByteHide service

Invalid Token

If you see an error about an invalid token:

• Verify that your project token is valid and correctly typed
• Make sure the token has permissions for JavaScript projects

Next Steps

• Get your project token
• Learn about protection options
• Configure exclusions and reserved items