A collection of node.js-based boiler projects for the Autodesk Forge Web Services APIs -
Clone or download
Pull request Compare This branch is 26 commits ahead, 73 commits behind Autodesk-Forge:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
3 - viewer+server
Docs
resources
.gitignore
LICENSE
README.md
app.json
package.json

README.md

Forge Node.js Boilers

Node.js npm License

oAuth2 Data-Management OSS Model-Derivative

Description

A collection of node.js-based boiler projects for the Autodesk Forge Web Services APIs.

Those samples illustrates how to use the following Forge npm packages:

Prerequisites

To run those samples, you need your own Forge API credentials:

Boilers Setup

Below are instructions to setup and run locally each boiler project, they may vary based on which project you want to run.

Project #1 - viewer-offline

You can simply open viewer-offline.html in a browser. This project will load the local model from /v8 directoryand does not require you to run any server on the machine, although you may want to serve the .html page to get around security restrictions imposed by some browsers (such as Chrome) when reading local files.

  • In order to do that install a local http server on your machine, you can use the following:

    sudo npm install -g http-server

  • Navigate to "/1 - viewer-offline" directory and start the server:

    http-server

  • Note the local address output by the server (ex: http://127.0.0.1:8080) and type in your browser: http://127.0.0.1:8080/viewer-offline.html

  • This project does not require any internet connection or Forge API credentials and can be used for testing the viewer API locally

  • You can also run that sample the following links, which in that case requires an internet connection:

Project1

Project #2 - viewer-barebone

Samples in this project do not require you to implement a server, but they rely on hardcoded token and URN in the JavaScript code, so they are for testing purpose only.

  • You will need to generate a valid 2-legged OAuth token and upload a model to your account, which you can do using that website for now: https://models.autodesk.io

  • Once you have a token and the URN of your model, replace in the hardcoded fields in viewer.html and viewingApp.html:

    var token = '<< Place your token here >>'

    var urn = '<< Place your URN here >>'

  • You can open the files directly in browser or serve similar to project #1. The viewer.html is using the plain JavaScript viewer API, whereas viewingApp.html is using an extra layer of code from Autodesk which adds a UI to switch between viewables (for designs translated from Revit .rvt files), see screenshot below:

Multiple Views

Project #3 - viewer+server

Project #4 - viewer+server+oss

Project #5 - viewer+server+oss+derivatives

The setup is similar for those 3 projects and they have to be run independently.

Those projects are using Webpack, a module bundler and NPM packages to build and generate the frontend code, so an extra build step is required.

Navigate with a command shell or terminal to the project you want to run and type the following commands:

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 build-dev (this runs a dev build and webpack in --watch mode)
> npm run dev (runs the node server, do in another terminal if you want to keep the webpack watcher running)

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 build-dev
> npm run dev

Open your browser at: http://localhost:3000

Important: the npm start command, this is intended for PRODUCTION with HTTPS (SSL) secure cookies.

To run a production build you can use start command:

> npm start

Which will run a production build and start the server. A production build code is minified and function names are mangled which make it much smaller and impractical for debugging or reverse engineering.

Deploy Project #5 on Heroku

To deploy this project to Heroku, simply click on the button below, at the Heroku Create New App page:

  • Set your Client ID & Client Secret with your Forge API keys

Deploy

The result will look like below: a treeview of the OSS storage that lets you upload designs and perform actions from the context menu.

To load a design in the viewer:

  • Right-click the root node to create a new bucket if you do not have any
  • Upload the design file to the bucket (supports file selection dialog or drag & drop)
  • Upon successful upload, the file appears in the bucket, right-click and select Generate viewable
  • Upon successful translation of the design, double-click the file and it will get loaded in the viewer

Project5

Project #6 - viewer+server+data-mng+derivatives

Same setup than for projects #3, #4, #5 but you also need a valid callback url to achieve 3-legged oauth authentication. I recommend you create 2 sets of Forge API keys, one for DEVELOPMENT and one for PRODUCTION because each set has a different callback url.

To run the project locally (using the DEV API keys):

forge-dev

Run the following commands (mind the DEV!):

> npm install
> set FORGE_DEV_CLIENT_ID=<<YOUR DEV CLIENT ID FROM DEVELOPER PORTAL>
> set FORGE_DEV_CLIENT_SECRET=<<YOUR DEV CLIENT SECRET>
> npm run build-dev
> npm run dev

To run in production, the callback url defined in your Forge App needs to match the host url, so if you run your app from https://mydomain.com:

> npm install
> set HOST_URL=https://mydomain.com
> set FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>
> set FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>
> npm start

Deploy Project #6 on Heroku

To deploy this project to Heroku, simply click on the button below, at the Heroku Create New App page:

Deploy

The result will look like below: a treeview of your Autodesk Cloud storage that lets you upload designs and perform actions from the context menu.

To load a design in the viewer:

  • Right-click the nodes to get options from the context menu
  • Upload a design file to a folder (supports file selection dialog or drag & drop)
  • Upon successful upload, the file appears under the parent node in the tree, right-click and select Generate viewable
  • Upon successful translation of the design, double-click the file and it will get loaded in the viewer

Project6

Tips & tricks

For local development/testing, consider use nodemon package, which auto restarts your node application after any modification on your code. To install it, use:

sudo npm install -g nodemon

Then, instead of npm run dev, use the following:

npm run nodemon

Which executes nodemon bin/run.js --config nodemon.js, where the nodemon.js is the nodemon config file where you can define which directories and file types are being watched, along with other configuration options. See nodemon for more details.

License

MIT License

Written by

Written by Philippe Leefsma

Forge Partner Development - http://forge.autodesk.com