React and Node.js boilerplate examples collection: Provides a boilerplate project for using the Forge APIs in a modern React + Node.js web application
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode update webpack 3.x Jan 21, 2018
bin Dynamic extension demo Aug 6, 2017
config update viewer v 3.3 Dec 7, 2017
resources img update Dec 7, 2017
src update webpack 3.x Jan 21, 2018
webpack update viewer v 3.3 Dec 7, 2017
.editorconfig Initial commit Mar 1, 2017
.eslintignore Initial commit Mar 1, 2017
.eslintrc Initial commit Mar 1, 2017
.gitignore Dynamic extension demo Aug 6, 2017
LICENSE Babel-runtime update Mar 2, 2017
README.md readme update Dec 7, 2017
app.json app.json update Aug 7, 2017
package.json package update Jan 21, 2018

README.md

OAuth2 Data-Management Model-Derivative Viewer

About Forge React Boiler

A boilerplate project to quickly get started using Autodesk Forge Platform Web Services in a modern React + Node.js Web Application. The base project is initially derived from the React Redux Starter Kit.

Thumbnail

thumbnail

  • Main components of the Frontend:

React + Redux

  • On the Backend:

Node.js + Express

  • Build System:

NPM scripts + Webpack 2 + Babel

React Support

React >= 0.13.x

Browser Support

Forge React Boiler is responsive, mobile friendly and has been tested on the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Edge

Running the sample

Configuration is controlled by NODE_ENV environment variable, make sure to set it properly to development or production, based on the configuration type you want to run.

In development, the client is dynamically built by the webpack-dev-middleware, so just run:

  • npm install (downloads project dependencies locally)

  • set NODE_ENV=development

  • set HOT_RELOADING=true

  • npm start (builds client on the fly and runs server)

  • open http://localhost:3000 in your favorite browser

In production, the client requires a build step, so run:

  • npm install (not required if you already run at previous step)

  • set NODE_ENV=production

  • npm run build-server (builds server in /bin/server)

  • npm run build-prod (builds client in /dist)

  • npm start (runs server)

  • open http://localhost:3000 in your favorite browser

Loading custom models in the Forge Viewer

The project contains a default model located in /resources/models/seat that can be loaded with no further setup and will also work offline.

If you want to load a model from Autodesk Cloud, you first need to generate a viewable URN as documented in the Prepare a File for the Viewer tutorial.

Using the same Forge ClientId & ClientSecret used to upload the model, populate environment variables used by the config files (in /config):

  • development:

    FORGE_DEV_CLIENT_ID

    FORGE_DEV_CLIENT_SECRET

  • production:

    FORGE_CLIENT_ID

    FORGE_CLIENT_SECRET

Restart the server, you can then directly load your model by specifying design URN as query parameter in the url of the viewer page:

http://localhost:3000/viewer?urn=YOUR_URN_HERE

Deploy to Heroku

Use your Forge ClientId & ClientSecret obtained while Creating a new Forge App

And Press Deploy button below:

Deploy

Wait for a while once the Heroku App has been deployed as the client needs to be built after the first run

More about Autodesk Forge Platform and Web Applications of the future?

Check it out at developer.autodesk.com.

Look at our Quickstarts Guide to find the Forge SDK's for the programming language of your choice.

About the Author

https://twitter.com/F3lipek

Web Applications using Forge React Boiler

forge-rcdb

(Feel free to add your own by submitting a pull request...)