Skip to main content

Application Setup

Let's start by creating a new project, installing required dependencies, and setting up a basic server application.

Create project​

Create a new folder for your project, navigate to it in the command line, and initialize a new Node.js project:

npm init -y

Next, install all the Node.js dependencies we're going to use. In this case it will be dotenv (utility for initializing environment variables from a file), Express.js (web framework), and cookie-session for handling cookie-based sessions, and finally the required APS SDK modules:

caution

As of November 2024 the APS SDK for Node.js is in beta, which means that the public interfaces can still change. To avoid any potential issues, we recommend installing the specific versions of these packages as shown below.

npm install --save dotenv express cookie-session
npm install --save @aps_sdk/authentication@1.0.0-beta.3
npm install --save @aps_sdk/data-management@1.0.0-beta.4

The "dependencies" in your package.json file should now look something like this (potentially with slightly different version numbers):

// ...
  "dependencies": {
    "@aps_sdk/authentication": "1.0.0-beta.3",
    "@aps_sdk/data-management": "1.0.0-beta.4",
    "cookie-session": "^1.4.0",
    "dotenv": "^16.3.1",
    "express": "^4.18.2"
  }
// ...

Finally, let's create a couple more subfolders in your project folder that we're going to need later:

  • wwwroot - this is where we're going to put all the client side assets (HTML, CSS, JavaScript, images, etc.)
  • routes - this is where we're going to implement all the server endpoints
  • services - here we're going to keep all the server-side logic that can be shared by different endpoints

Application config​

Our application will need a couple of configuration parameters to run properly, for example, the credentials of our APS app for communicating with Autodesk Platform Services, or the callback URL where our users will be redirected to during the 3-legged authentication workflow. We will pass these parameters to the server app using environment variables.

Create a config.js file in the root of your project folder, and add the following code:

config.js
const { Scopes } = require('@aps_sdk/authentication');
require('dotenv').config();

let { APS_CLIENT_ID, APS_CLIENT_SECRET, APS_CALLBACK_URL, SERVER_SESSION_SECRET, PORT } = process.env;
if (!APS_CLIENT_ID || !APS_CLIENT_SECRET || !APS_CALLBACK_URL || !SERVER_SESSION_SECRET) {
    console.warn('Missing some of the environment variables.');
    process.exit(1);
}
const INTERNAL_TOKEN_SCOPES = [Scopes.DataRead, Scopes.ViewablesRead];
const PUBLIC_TOKEN_SCOPES = [Scopes.ViewablesRead];
PORT = PORT || 8080;

module.exports = {
    APS_CLIENT_ID,
    APS_CLIENT_SECRET,
    APS_CALLBACK_URL,
    SERVER_SESSION_SECRET,
    INTERNAL_TOKEN_SCOPES,
    PUBLIC_TOKEN_SCOPES,
    PORT
};

The dotenv library initializes environment variables from a local .env file (if there's one). We then simply read the environment variables from process.env, and exit the application immediately if any of the required properties are missing.

Next, let's create the .env file in the project folder, and populate it with the required environment variables (replacing <client-id> and <client-secret> with your APS Client ID and Client Secret, and <secret-phrase> with an arbitrary string):

APS_CLIENT_ID="<client-id>"
APS_CLIENT_SECRET="<client-secret>"
APS_CALLBACK_URL="http://localhost:8080/api/auth/callback" # URL your users will be redirected to after logging in with their Autodesk account
SERVER_SESSION_SECRET="<secret-phrase>" # secret phrase used to encrypt/decrypt server session cookies
caution

Since the .env file contains sensitive information, make sure that it is not included in git! This can be ensured by adding the .env line to the .gitignore file.

Now, in order to be able to run and debug our application from Visual Studio Code, we need to create a launch configuration. Use Run > Add Configuration in the menu to create a new configuration, and when prompted for the specific environment, choose Node.js. This will create a new .vscode subfolder in your project with a launch.json file where you can define different launch configurations. Replace the content of the file with the following:

.vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Server",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "start"
            ],
            "skipFiles": [
                "<node_internals>/**/*.js"
            ]
        }
    ]
}

We are defining a single launch configuration called Launch Server that will simply start our application using the npm start command.

Create basic server​

Next we'll setup a basic server application.

Create a server.js file in the root of your project folder with the following code:

server.js
const express = require('express');
const session = require('cookie-session');
const { PORT, SERVER_SESSION_SECRET } = require('./config.js');

let app = express();
app.use(express.static('wwwroot'));
app.use(session({ secret: SERVER_SESSION_SECRET, maxAge: 24 * 60 * 60 * 1000 }));
app.listen(PORT, () => console.log(`Server listening on port ${PORT}...`));

For now the server isn't doing much, just serving client side assets from the wwwroot subfolder, and accessing session data stored in cookies. The cookies will be encrypted using a secret phrase that we will need to pass to the application via the environment variable SERVER_SESSION_SECRET.

Next, let's add a "start": "node server.js" script to the package.json file so that we can easily run our application later:

// ...
"scripts": {
    "start": "node server.js"
}
// ...

Try it out​

Start the application from Visual Studio Code (for example, via the Run > Start Debugging menu, or by pressing F5), and navigate to http://localhost:8080 in the browser. The server should respond with Cannot GET / because we haven't added any logic to it just yet. That's going to be the topic of the next step.