viewer-walkthrough-online.viewer

Code sample for the Forge Viewer API

Usage no npm install needed!

<script type="module">
  import viewerWalkthroughOnlineViewer from 'https://cdn.skypack.dev/viewer-walkthrough-online.viewer';
</script>

README

Online Viewer sample

Node.js npm Platforms License

oAuth2 Data-Management Model-Derivative Viewer

Description

This sample is part of the Online Viewer Walkthrough.

In this sample, we will be creating a simple web page that allows end users to upload some files to Forge storage service, then translate them and display them in a web browser.

  • Authenticate your developer identity
  • Create a bucket
  • Get bucket detail
  • Save a supported file to a bucket
  • Read the uploaded file from a bucket
  • Translate the file to the SVF format
  • Display the file in a web browser

Thumbnail

thumbnail

Setup

Prerequisites

  1. A Forge account: Getting Started with Forge
  2. A text editor of your choice. (For example Brackets or Visual Studio Code are good choices.)
  3. A basic knowledge of :
    • HTML and CSS
    • JavaScript ES6
    • Command-line programs
      • Node.js Command Line (for Windows users)
      • Terminal (for Mac/Linux/Unix users)

Running locally

Install NodeJS (version 8 or newer).

Clone this project or download it. It's recommended to install GitHub desktop.

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 start

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 start

Open a browser and navigate to http://localhost:3000.

Click on the Authorize me link and then click through the links on the browser to:

  • Create a bucket
  • Save a supported file to a bucket
  • Display the file in a web browser

NOTE: It may take several minutes to complete translate the file.

License

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

Support

forge.help@autodesk.com