Webpack

This is our webpack plugin which is used for uploading source maps when bundling with webpack.

To get started we need to install the plugin in your project. Run

npm install @byteboost/webpack-plugin --save-dev

In your webpack config add this to your plugin array

new ByteboostSourcemaps({
  token: '<your api token>', // Required - Your api token.
  domain: '<your domain>', // Required - The domain of your organization.
  organization: '<your organization>', // Required - The name of your organization.
  cleanupSourceMaps: true, // Optional - This will default to true.
  version: '1.0.0', // Optional - This or versionFromPackageJSON is required. The version of your application.
  versionFromPackageJSON: false, // Optional - This or version is required. If true, the version will be read from package.json.
});

it is as simple as that

here is an example of what your webpack config could look like

webpack.config.mjs
import { ByteboostSourcemaps } from '@byteboost/webpack-sourcemap-plugin';
import path from 'path';
import url from 'url';

const __dirname = url.fileURLToPath(new URL('.', import.meta.url));

const config = {
  mode: 'production',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    publicPath: '/',
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new ByteboostSourcemaps({
      token: '<your api token>',
      domain: '<your domain>',
      organization: '<your organization>',
      cleanupSourceMaps: true,
      version: '1.0.0',
      versionFromPackageJSON: false,
    }),
  ],
};

export default config;

NextJS

If you are running NextJS your setup should look like this:

next.config.mjs
/** @type {import('next').NextConfig} */
import { ByteboostSourcemaps } from '@byteboost/webpack-sourcemap-plugin';

const nextConfig = {
  experimental: {
    webpackBuildWorker: true,
  },
  webpack: (config, {}) => {
    if (config.mode === 'production') {
      config.devtool = 'source-map';

      config.plugins.push(
        new ByteboostSourcemaps({
          token: '<your api token>', // Required - Your api token.
          domain: '<your domain>', // Required - The domain of your organization.
          organization: '<your organization>', // Required - The name of your organization.
          cleanupSourceMaps: true, // Optional - This will default to true.
          version: '1.0.0', // Optional - This or versionFromPackageJSON is required. The version of your application.
          versionFromPackageJSON: false, // Optional - This or version is required. If true, the version will be read from package.json.
        }),
      );
    }

    return config;
  },
};

export default nextConfig;

NextJS​

NextJS