New React + Node.js boilerplate for Forge APIs

Forge Community Blog

Information. Insights. Code. Connections.

Blog
New React + Node.js boilerplate for Forge APIs

New React + Node.js boilerplate for Forge APIs

March 7, 2017

I am releasing a new boilerplate project that is designed to help developers quickly start from scratch a new web application using the Autodesk Forge Platform Web Services in a modern React + Node.js Web Application. For info the base project front-end is initially derived from the React Redux Starter Kit.

Main components of the Frontend:

React + Redux

On the Backend:

Node.js + Express

Build System:

NPM scripts + Webpack 2 + Babel

To me there is no doubt that, at the moment, React is the most powerful and elegant solution to build an advanced single page web application (SPA). However choosing the right set of libraries and the architecture of the App might be intimidating at first. Using this project should make it a breeze and will let you focus on what is more important: adding custom features on top of a scalable solution. 

I tried to keep the complexity of the project to a minimum, however this is a bit more than a basic "hello world!" that displays a text message. It is fully equipped to use the Forge Web APIs in a convenient and secured way. Take a look at this post for more details about securely loading your data  with the viewer: Securing your Forge Viewer token behind a proxy

On the server side, the Forge endpoints are disabled by default, only the lmv-proxy is exposed, which is enough for viewing. If your client app requires to communicate with Forge APIs, this can be done indirectly by exposing some of those routes or modify them to expose to your client the strict minimum of what is needed:

/////////////////////////////////////////////////////////////////////
// App initialization
//
/////////////////////////////////////////////////////////////////////
const app = express()

app.use('/resources', express.static(__dirname + '/../../resources'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.set('trust proxy', 1)
app.use(cookieParser())
app.use(helmet())

/////////////////////////////////////////////////////////////////////
// API Routes setup - Disabled except socket by default
//
/////////////////////////////////////////////////////////////////////
//app.use('/api/derivatives', DerivativesAPI())
app.use('/api/socket', SocketAPI())
//app.use('/api/forge', ForgeAPI())
//app.use('/api/oss', OssAPI())

The Forge endpoints are implemented using access to micro-services inside the server application, ensuring some internal flexibility and code reuse for the app. Those services are relying on the official node.js Forge SDK: forge-api-nodejs-client

Finally the build system is composed by the powerful combination of the Babel 6 transpiler to ensure the latest cutting edge features of JavaScript ES2015 + JSX are supported and the unrivalled Webpack2 module bundler. Below you will find the commented version of my webpack production config file, which will allow you to compile and bundle your application using best pratices and common optimizations.

To top that up I strived to provide a fairly well documented and detailed readme along with the github repository from where you can easily deploy the sample on Heroku

With that you are truly one click away to deploy your own Forge web application! 

Philippe Leefsma
Cloud Fellow

I write JavaScript for the future 3D World Wide Web, A.K.A Forge Platform