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 -w
Last modified 2mo ago