Render content for users
In the previous module, we covered registering our Snyk App, setting up the authorization flow, and handling user authorization within our App. All of those topics are integral to the functionality of every Snyk App, but they're all what you might call "behind the scenes" topics.
In this module, we'll switch gears to focus on displaying content to the users who have authorized with our Snyk App. Specifically, we want to show unauthorized users a big button they can click to authorize and authorized users a list of their projects from Snyk.
Add a template engine to the Snyk App
While Express is perfectly capable of printing content to the screen and even rendering HTML server-side, life is much easier when using a template engine. For this tutorial we are using EJS.
First, install the node packages needed in this part of the tutorial:
Next, modify the initGlobalMiddlewares()
function we created in our last module to tell express that we want to use a view engine, EJS in this case, and let it know where we'll be storing our view templates. We'll be storing our EJS templates in ./src/views
and keeping any common files such as images and CSS in /.src/public
.
Create the new directories first.
Now we can update ./src/app.ts
:
For each route that we'll provide a template for, we'll need to modify the corresponding controller and ensure that we're using res.render("<template name>")
rather than something more simplistic like res.send()
.
Example:
That's all there is to it.
EJS templates support the concept of partial inclusion. While not strictly necessary, it makes sense to add a subdirectory to our ./src/views
to differentiate partial templates like headers and footers from route templates. For the tutorial, we'll use ./src/views/partials
to store such templates.
Basic EJS templates
The first template we'll create is a partial one, which we'll include in the other templates. This header.ejs
will be the place we link stylesheets and other information that belong in the <head>
of an HTML document.
This index.ejs
template will cover our basic /
route.
callback.ejs
will render for successful user authorizations.
These templates should be enough to get you started adding your own templates to any new routes you create. If you intend to continue using EJS, refer to the documentation for information about the features offered.
Rendering content for your Snyk App can be as simple or complex as you'd like it to be. Because we're dealing with JavaScript, the options are very flexible!
Showing users a list of projects
Now that we have some basic templates, take a look at how we can add some functionality to our Snyk App using a User's Snyk data. For this tutorial, we set up our app to allow users to view all of their projects within Snyk from within our app.
This is a basic and easily extendable feature.
We need to create:
A new route controller
A function (or functions) to pull the project data
An EJS template for showing the projects
We start with the API work, using the callSnykApi()
function we created in the previous module. Since this directly relates to a particular route, we'll store this file with its controller. Following the pattern we've used throughout these tutorial modules, we'll create both files at ./src/routes/projects/
.