Last updated: 25 Set 2024
Framework versions tested: 4.21.0
Stencil is a library for building reusable, scalable component libraries.
For the purposes of this tutorial, we will be using the official Stencil Getting Started guide.
If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide, which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.
To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using the Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named jscrambler.json
and placed on the project's root folder. If you choose to try the following example, just make sure to fill in the missing information: accessKey
, secretKey
, and applicationId
.
{
"keys": {
"accessKey": <ACCESS_KEY_HERE>,
"secretKey": <SECRET_KEY_HERE>
},
"applicationId": <APP_ID_HERE>,
"filesSrc": [
"./.dist/**/*.js"
],
"filesDest": "./",
"params": [
{
"name": "objectPropertiesSparsing"
},
{
"name": "variableMasking"
},
{
"name": "whitespaceRemoval"
},
{
"name": "identifiersRenaming",
"options": {
"mode": "SAFEST"
}
},
{
"name": "globalVariableIndirection"
},
{
"name": "dotToBracketNotation"
},
{
"name": "stringConcealing"
},
{
"name": "functionReordering"
},
{
"options": {
"freq": 1,
"features": [
"opaqueFunctions"
]
},
"name": "functionOutlining"
},
{
"name": "propertyKeysObfuscation",
"options": {
"encoding": [
"hexadecimal"
]
}
},
{
"name": "regexObfuscation"
},
{
"name": "booleanToAnything"
}
],
"areSubscribersOrdered": false,
"useRecommendedOrder": true,
"jscramblerVersion": "stable",
"tolerateMinification": true,
"profilingDataMode": "off",
"useAppClassification": true,
"browsers": {}
}
You can integrate Jscrambler into the Stencil build process with the Jscrambler CLI.
Install the Jscrambler API Client:
npm i jscrambler --save-dev
Create a CLI hook in the scripts section of package.json
. The section should look like this:
"scripts": {
"build": "stencil build && jscrambler",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
The "build": "stencil build && jscrambler"
hook will trigger the jscrambler
command after the build process is finished.
Build the application:
npm run build
There you go. Jscrambler is now integrated into your build process and the protected production files will override the original ones on the dist/
folder.
There are no known problems integrating Jscrambler with Next.js.