This sample demonstrates how to use typescript to create the basic Autodesk Forge Viewer. The front-end will look like:
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.
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/www/scripts/app.ts:
replace var urn = '...' by the urn 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>>
gulp
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>>
gulp
npm run dev
Open the browser: http://localhost:3000/node/typeview.
Important: do not use npm start locally, this is intended for PRODUCTION only with HTTPS (SSL) secure cookies.
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.
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.
After any modification to a .ts file in the project, you need to run command "gulp" to generate new result.
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"
This sample is licensed under the terms of the MIT License. Please see the LICENSE file for full details.
Jan Liska & Philippe Leefsma
Last updated by Zhong Wu, November 8, 2016 (Forge Partner Development)
http://forge.autodesk.com