viewer-nodejs-typeview.sample

Description

This sample demonstrates how to use typescript to create the basic Autodesk Forge Viewer, with your familiar stack of jQuery, Bootstrap and Forge Node.js SDK.

The front-end will look like:

Thumbnail

Setup

For using this sample, you need an Autodesk developer credentials. Visit the Forge Developer Portal, sign up for an account, then create an app. Finally take note of the Client ID and Client Secret.

To understand this sample, there are a couple of technologies as follow you need to be prepared:

• Use Node.js and Express.js to create the web framework.
• Use npm to manage your javascript package.
• Use Gulp to automate tasks in your development workflow.
• Use gulp-typescript to handle compilation workflow of TypeScript.
• Use Forge Viewer to display the 3D Viewer in web browser.

Run locally

Install NodeJS.

Clone this project or download it. It's recommended to install GitHub desktop. To clone it via command line, use the following (Terminal on MacOSX/Linux, Git Shell on Windows):

git clone https://github.com/Developer-Autodesk/viewer-nodejs-typeview.sample.git

Install gulp globally. If you have previously installed a version of gulp globally, please run "npm rm --global gulp" to make sure your old version doesn't collide with gulp-cli. Then install it as "npm install -g gulp". If you do not have access to the install folder, please use "sudo npm install -g gulp" to gain the security priviledges of super user.

In app/config/config.ts:
replace urn with the ObjectID (no base64 encoding required) of a model you previously uploaded with the Model Derivative API

To run it, install the required packages, set the enviroment variables with your client ID & secret and finally start it. Via command line, navigate to the folder where this repository was cloned and use the following:

Mac OSX/Linux (Terminal)

npm install
export FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
export FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
npm run dev

Windows (use Node.js command line from Start menu)

npm install
set FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
set FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
npm run dev

Open the browser: http://localhost:3000/.

Important: do not use npm start locally, this is intended for PRODUCTION only with HTTPS (SSL) secure cookies.

Deploy on Heroku

To deploy this application to Heroku, the Callback URL must use your .herokuapp.com address. After clicking on the button below, at the Heroku Create New App page, set your Client ID & Secret and the correct callback URL.

Watch this video on how deploy this sample to Heroku.

Packages used

All Autodesk Forge NPM packages are included by default, see complete list of what's available at NPM website. Some other non-Autodesk packaged are used, including express (express-session). The front-end uses bootstrap and jquery.

Tips & tricks

• To use the definitions in your TypeScript (2.x or later) project (Angular/Vue/React or non-framework), install the definitions:

  npm install --save-dev @types/forge-apis @types/forge-viewer @types/three #THREE is required by Viewer

  And reference them in your tsconfig.json:

  {
    "types": [ "forge-viewer" ]
  }

• After any modification to a .ts file in the project, you need to run command "gulp" to generate new result, which however not necessary if nodemon is running when the app is started with 'npm run dev'.

Questions

Please post your questions to StackOverflow using the autodesk-viewer tag.

After installing Github desktop for Windows, on the Git Shell, if you see a error setting certificate verify locations error, use the following:

git config --global http.sslverify "false"

License

This sample is licensed under the terms of the MIT License. Please see the LICENSE file for full details.

Written by

Jan Liska
Philippe Leefsma
Zhong Wu
Bryan Huang
Forge Partner Development
http://forge.autodesk.com