forge-boiler.nodejs

by Autodesk-Forge

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

Thumbnail

thumbnail

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 NODE_ENV=development
> export FORGE_DEV_CLIENT_ID=<YOUR CLIENT ID FROM DEVELOPER PORTAL>
> export FORGE_DEV_CLIENT_SECRET=<YOUR CLIENT SECRET>
> npm start (builds the client dynamically in memory using webpack dev server)

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

> npm install
> set NODE_ENV=development
> set FORGE_DEV_CLIENT_ID=<YOUR CLIENT ID FROM DEVELOPER PORTAL>
> set FORGE_DEV_CLIENT_SECRET=<YOUR CLIENT SECRET>
> npm start (builds the client dynamically in memory using webpack dev server)

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

To run a production build you can use build command:

> npm run build

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

Live Demo

https://oss.autodesk.io

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
> npm set NODE_ENV=development
> set FORGE_DEV_CLIENT_ID=<YOUR DEV CLIENT ID FROM DEVELOPER PORTAL>
> set FORGE_DEV_CLIENT_SECRET=<YOUR DEV CLIENT SECRET>
> npm start (builds the client dynamically in memory using webpack dev server)

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
> npm set NODE_ENV=production
> set FORGE_CLIENT_ID=<YOUR CLIENT ID FROM DEVELOPER PORTAL>
> set FORGE_CLIENT_SECRET=<YOUR CLIENT SECRET>
> npm start (builds the client dynamically on disk or use npm run build before)

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

Live Demo

https://dm.autodesk.io

Project6

License

MIT License

Written by

Written by Philippe Leefsma

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