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:
To run those samples, you need your own Forge API credentials:
-
Visit the Forge Developer Portal, sign up for an account
-
For this new App, you can use http://localhost:3000/api/forge/callback/oauth as Callback URL.
-
Take note of the Client ID and Client Secret, those are your API keys that must remain hidden
-
Install the latest release of NodeJS
-
Clone this or download this project. It's recommended to install a git client such as GitHub desktop or SourceTree
-
To clone it via command line, use the following (Terminal on MacOSX/Linux, Git Shell on Windows):
git clone https://github.com/Autodesk-Forge/forge-boilers.nodejs
Below are instructions to setup and run locally each boiler project, they may vary based on which project you want to run.
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:
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:
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.
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
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
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):
- Make sure the callback url for your DEV Forge API Keys is set to http://localhost:3000/api/forge/callback/oauth
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
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
- Specify HOST_URL env variable based on the name of your Heroku App: ex You used "MyApp" -> HOST_URL=https://MyApp.herokuapp.com
- Your Forge App callback must be set to https://MyApp.herokuapp.com/api/forge/callback/oauth
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
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.
Written by Philippe Leefsma
Forge Partner Development - http://forge.autodesk.com