Tutorial: create a Snyk App
In this tutorial, we'll create a simple Snyk App using TypeScript to show users a list of their projects within Snyk.
- NodeJS
- A Snyk account
To begin, create a directory to house the project somewhere on your device. From within the newly created directory, we'll initialize a
package.json manifest for our application to keep track of our dependencies and ensure our project is portable:Run
npm init and follow the prompts. You can add as much or as little information as you want here. For now, the default options suffice.Now that we have a place to save dependency information, use
npm to install TypeScript as a development dependency:npm install typescript --save-dev
At this point, TypeScript has been installed, but we'll need a configuration file to provide compilation options to the
tsc binary. Create a TypeScript configuration file i called tsconfig.json n the root of the project. Use the template that follows:{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"moduleResolution": "node",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"skipLibCheck": true,
"esModuleInterop": true
},
"exclude": [
"./tests",
"./dist"
]
}
The options we've provided tell TypeScript to emit ES6 JavaScript, which type of module code to generate, and whether or not to provide a corresponding source map for the compiled files, and specify a few other handy options. For a complete overview of the possible options, visit https://aka.ms/tsconfig.json
For the purposes of this tutorial, the most noteworthy options we've set are
rootDir and outDir. These options describe where our source .ts files and our compiled .js files, respectively, live within our project. Create the directories referenced by the setting values:mkdir ./dist
mkdir ./src
Now that we have the basic parameters in place, we'll create a simple Hello World by creating the file
./src/index.ts.const world = 'world';
export function hello(world: string = world): string {
return `Hello ${world}! `;
}
Now we can confirm that everything is wired up correctly. Run
npx tsc to compile the project.If everything is successful, the project tree looks like this:
my-snyk-app/
- dist/
- index.d.ts
- index.js
- index.js.map
- src/
- index.ts
- node_modules/
- <lots of things here>
- package-lock.json
- tsconfig.json
The
tsc program compiled our source TypeScript file into ES6 JavaScript and provided a source map for debugging.The compiler can also be put into watch mode to continually poll your
.ts files for changes: npx tsc -wLast modified 2mo ago