🦉 SDK Installation Overview

Integrate Sourcemaps (If exist) 🗺️
Install Hud SDK package 📦
Run your service with Hud 🎉
Install the IDE extension to see production data 📈

🗺️ Integrate Sourcemaps (if exists)

When using Webpack, the source code is translated into differently shaped distribution code, usually bundled into a few single files. Hud makes the use of source-maps to translate the running code into it’s original form in the source code.

If you’re using Webpack - Use Hud Bundlers Plugin

a. Install hud bundlers plugin package

npm install --save-dev @code-hud/hud-javascript-bundlers-plugins

yarn add --dev @code-hud/hud-javascript-bundlers-plugins

pnpm add --save-dev @code-hud/hud-javascript-bundlers-plugins

b. Add the creation of sourcemaps to your Webpack configuration

// Add to webpack.config.js

module.exports = {  
	devtool: 'source-map',  
}

// Add to next.config.js

module.exports = {  
	  webpack: (config, {isServer}) => {
    if (isServer) {
        config.devtool = 'source-map'
    }
    return config
  }, 
}

// Add to webpack.config.js

new NxWebpackPlugin({  
	sourceMap: true,  
}

c. Integrate Hud’s Webpack plugin by adding the following to your Webpack configuration

// Add to webpack.config.js

const hud = require('@code-hud/hud-javascript-bundlers-plugins/webpack');

plugins:[  
	...  
	hud.hudWebpackPlugin({ accessToken:'XXX'}),  
]

// Add to next.config.js


module.exports = {  
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) =>  
  {  
    config.plugins.push(hud.hudWebpackPlugin({ accessToken:'XXX'}));  
    return config;  
  },  
}

// Add to webpack.config.js

const hud = require('@code-hud/hud-javascript-bundlers-plugins/webpack');

plugins:[  
	...  
	hud.hudWebpackPlugin({ accessToken:'XXX'}),  
]

If you’re not using Webpack - Use Hud’s CLI

a. Install hud-cli package

npm install --save-dev @code-hud/hud-cli

yarn add --dev @code-hud/hud-cli

pnpm add --save-dev @code-hud/hud-cli

b. Verify sourcemap generation

Add sourcemap creation configuration to your build tool.

npx babel ... --source-maps

// Add to babel.config.json:

{
  ...
  "sourceMaps": true  
}

// Add to tsconfig.js:

{
  "compilerOptions": {  
		"sourceMap": true  
	}
}

c. Run hud-cli

After successful build, run hud-cli with the CLI sourcemap key, and point it to the dist folder

npx hud-cli sourcemap <path_to_dist_folder> --access-key <sourcemap_key>

📦 Install SDK package

npm install @code-hud/hud-node-sdk

yarn add @code-hud/hud-node-sdk

pnpm add @code-hud/hud-node-sdk

🎉 Run service with Hud

a. Set environment variables

The auto init makes use of the following environment variables.

HUD_ENABLE=true //Hud’s SDK will not be loaded without this being set to true  
HUD_KEY=xxx //The API key provided to you, treat it as a secret  
HUD_SERVICE=xxx //The service name which will identify this service

b. Initialize service

Commonjs

Hud’s auto init uses --require to be loaded before any other module, this makes sure we can instrument any forthcoming module’s functions.

node --require @code-hud/hud-node-sdk/init <ENTRY>.js

nest start --exec "node --require @code-hud/hud-node-sdk/init"

NODE_OPTIONS='--require=@code-hud/hud-node-sdk/init' next start

NODE_OPTIONS='--require=@code-hud/hud-node-sdk/init'  npm run start

"targets": {  
	"serve": {  
		"executor": "@nx/js:node",  
		"options": {  
			"runtimeArgs": ["--require", "@code-hud/hud-node-sdk/init"]  
	}  
}

ESM

In order to support ESM instrumentation, hud's auto init uses --import to be loaded before any other module, this makes sure we can instrument any forthcoming module's functions. Please notice we use a different entry point register.

node --import @code-hud/hud-node-sdk/register <ENTRY>.js

NODE_OPTIONS='--import=@code-hud/hud-node-sdk/register'  npm run start

📈 Install the IDE extension

To see Hud information for your service, install Hud VSCode Extension from the Marketplace.

You’re all set! 🎉