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

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

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

• Autodesk Forge RCDB

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