# Front-End App: Scan & Instrument

The SeaLights Node.js agent can be used to scan and test the Front-end code as well.

{% hint style="info" %}
See '[Generating an Agent token](https://docs.sealights.io/knowledgebase/settings/token-access-and-management#token-list-and-token-creation-2)' for instructions on how to generate a token prior to executing the commands.

See [Generating a session ID](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/generating-a-session-id.md) for instructions on how to generate a session ID
{% endhint %}

## Prerequisites <a href="#prerequisites" id="prerequisites"></a>

In case your front-end Javascript application is minified and/or uglified as part of its build process, you’ll need to ensure the **Source Map files (\*.js.map) are available** to the Sealights agent inside the application folder - next to the application’s JS files -, pointing to the right source folder and including column information (also known as column-mapping). This will allow the Sealights agent to retrieve the real names of your methods from your source code and not their “obfuscated” version. Please refer to the following page for more information: [Javascript & Node.js Source Map Files](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/javascript-and-node.js-source-map-files.md).

## Scanning and Instrumentation <a href="#scanning-and-instrumentation" id="scanning-and-instrumentation"></a>

First, the front-end code must be scanned and instrumented to provide the needed information to the SeaLights server.

{% tabs %}
{% tab title="Unix/Linux" %}
{% code overflow="wrap" %}

```sh
npx slnodejs scan --tokenfile /path/to/sltoken.txt --buildsessionidfile buildSessionId [--labid <Lab ID>] --instrumentForBrowsers --workspacepath dist --outputpath sl_dist --scm git --es6Modules
```

{% endcode %}
{% endtab %}

{% tab title="Windows (CMD)" %}
{% code overflow="wrap" %}

```powershell
call npx slnodejs scan --tokenfile \path\to\sltoken.txt --buildsessionidfile buildSessionId [--labid <Lab ID>] --instrumentForBrowsers --workspacepath dist --outputpath sl_dist --scm git
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="success" %}
After a successful `scan` command execution, you should expect:

* A line in your console log showing a line similar to `NodeJS-Agent: Scanned X methods and Y branches in Z files.`
* A new entry in your Sealights' dashboard for the specific application’s version, and the coverage report to show the content of your application (source code)
* A new folder in the project directory called `sl_dist` (or the name provided as a value to the `--outputpath` parameter)
  {% endhint %}

{% hint style="danger" %}
In case your command execution does not produce the expected results, you can use the `dryRun` command to validate your configuration, see [dryRun Command: Troubleshooting & Validation](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/advanced-features/dryrun-command-troubleshooting-and-validation.md).
{% endhint %}

{% hint style="info" %}

* For React applications you should add the flag: `--babylonPlugins jsx`
* Most scans should include the following flags:
  * \--failbuild true (if scan fails, then it will throw an error that will allow the pipeline to fail, rather than fail silently)
  * \--sourceHash true (to link runtime code to source code despite if post-compilation positional differences)
  * \--autoResolveProjectRoot true (Automatically detects the **correct project root** in dynamic build environments (like Azure DevOps).)
* For "`JavaScript heap out of memory`" errors while running scan, see: [NodeJS - JavaScript heap out of memory](/knowledgebase/setup-and-configuration/troubleshooting-faq/node-javascript/nodejs-javascript-heap-out-of-memory.md)
* In order to ignore specific files or folders during the Scan operation, please refer to [Ignoring Files or Folders](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/ignoring-files-or-folders.md)
  {% endhint %}

This will generate a new folder ('sl\_dist' in the command above) with the instrumented code: a few Sealights-specific API calls will be added to your JS file to report coverage dynamically as illustrated in the picture below.\
**The content of this Sealights' generated folder needs to be deployed instead of your original code** - on the application server - for the client browser to work against during your testing stages, but not in your production environment.

<figure><img src="/files/kBYdsi8ATsgVHSna2YS7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
For distributed Test Runner & Test Listener, we recommend using the Lab ID parameter in order to link between the two.

* For Front-End instrumented code, this parameter needs to be passed already as part of the the build command.
* If the lab ID is not provided, the session ID will be used as a Lab ID
  {% endhint %}

{% hint style="info" %}
Note that if Sealights inline scripts are being blocked by CSP (Content-Security-Policy) headers then our dashboard will need to be whitelisted.\
See [Content-Security-Policy (CSP) Header Quick Reference](https://content-security-policy.com/) as a good resource to how to handle this\
In some cases, its possible to add a meta tag to do this as well, see: [Content-Security-Policy Meta http-equiv Example](https://content-security-policy.com/examples/meta/)
{% endhint %}

{% hint style="info" %}
See [Command Reference](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/command-reference.md#scanning-a-build) for full parameter details
{% endhint %}

## Front-end application as part of an Integration Build <a href="#front-end-application-as-part-of-an-integration-build" id="front-end-application-as-part-of-an-integration-build"></a>

If you are reporting a front-end application as part of an integration build, you'll need to add the `-labid <string>` parameter to your command and ensure the value used is the same across all the components.

For more details, please refer to [Integration Build](/knowledgebase/setup-and-configuration/build-and-test-execution/integration-build.md)

## Running tests <a href="#running-tests" id="running-tests"></a>

Running the tests is done the same as when running Unit or function tests; just here between the start and end steps you run your Front-end tests - See [Running Tests](/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/running-tests.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sealights.io/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/node.js-agent/front-end-application/front-end-app-scan-and-instrument.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.