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.
Prerequisites
- NodeJS
- A Snyk account
Configure the basics
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:1
npm install typescript --save-dev
Copied!
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:1
{
2
"compilerOptions": {
3
"target": "es6",
4
"module": "commonjs",
5
"declaration": true,
6
"sourceMap": true,
7
"moduleResolution": "node",
8
"outDir": "./dist",
9
"rootDir": "./src",
10
"strict": true,
11
"skipLibCheck": true,
12
"esModuleInterop": true
13
},
14
"exclude": [
15
"./tests",
16
"./dist"
17
]
18
}
Copied!
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:1
mkdir ./dist
2
mkdir ./src
Copied!
Test it out
Now that we have the basic parameters in place, we'll create a simple Hello World by creating the file
./src/index.ts.1
const world = 'world';
2
​
3
export function hello(world: string = world): string {
4
return `Hello ${world}! `;
5
}
Copied!
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:
1
my-snyk-app/
2
- dist/
3
- index.d.ts
4
- index.js
5
- index.js.map
6
- src/
7
- index.ts
8
- node_modules/
9
- <lots of things here>
10
- package-lock.json
11
- tsconfig.json
Copied!
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 16d ago
Export as PDF
Copy link
Edit on GitHub