Skip to main content

Application Setup

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

New 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), an Express.js middleware for handling multipart/form-data requests, and finally the various packages of the official APS SDK:

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 express-formidable
npm install --save @aps_sdk/authentication@1.0.0-beta.3
npm install --save @aps_sdk/model-derivative@1.0.0-beta.3
npm install --save @aps_sdk/oss@1.0.0-beta.2

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/model-derivative": "1.0.0-beta.3",
    "@aps_sdk/oss": "1.0.0-beta.2",
    "dotenv": "^16.4.1",
    "express": "^4.18.2",
    "express-formidable": "^1.2.0"
  },
// ...

Finally, let's create a couple more subfolders in the 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

Now, when you open your project folder in Visual Studio Code for the first time, the folder structure should look similar to this:

Folder Structure

Application config​

Our application will need a couple of configuration inputs to run properly, for example, the credentials of our APS app (client ID and secret) for communicating with Autodesk Platform Services. We will pass these parameters to our app using environment variables.

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

config.js
require('dotenv').config();

let { APS_CLIENT_ID, APS_CLIENT_SECRET, APS_BUCKET, PORT } = process.env;
if (!APS_CLIENT_ID || !APS_CLIENT_SECRET) {
    console.warn('Missing some of the environment variables.');
    process.exit(1);
}
APS_BUCKET = APS_BUCKET || `${APS_CLIENT_ID.toLowerCase()}-basic-app`;
PORT = PORT || 8080;

module.exports = {
    APS_CLIENT_ID,
    APS_CLIENT_SECRET,
    APS_BUCKET,
    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. And if no bucket name is provided for where our designs should be stored, we generate one by appending the -basic-app suffix to our application Client ID.

caution

Note that the Data Management service requires bucket names to be globally unique, and attempts to create a bucket with an already used name will fail with 409 Conflict. See the documentation for more details.

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):

APS_CLIENT_ID="<client-id>"
APS_CLIENT_SECRET="<client-secret>"
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.

Basic server​

Next we'll create 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 { PORT } = require('./config.js');

let app = express();
app.use(express.static('wwwroot'));
app.listen(PORT, function () { console.log(`Server listening on port ${PORT}...`); });

For now the server isn't doing much, just serving static assets from the wwwroot subfolder (which is currently empty), and reporting any errors to the console and back to the client.

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​

Now that we have a basic application setup, let's 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.