Giter VIP home page Giter VIP logo

viewer-react-express-headless's Introduction

Viewer - React - Express - Headless

Node.js npm Platforms License

oAuth2 Viewer

Description

Using Forge Viewer, you have the option of a Headless one, the option to add your own logo and get rid of extension that interact with the viewer is possible. I created a demonstration of this scenario using React on the Front End, Redux to handle states for Properties metadata access and NodeJS (Express) together with React-Scripts to handle the authentication and access to the use of the Forge services.

The available Extensions once in Full Screen mode are.

  • Properties (Categories are display with the option to expand to see all metadata available from the model)
  • Explode Slider
  • Explode Animation
  • Rotate Animation
  • Restate of the model to original form

This sample show a simple integration of the Viewer in a headless way with custom made extensions. The front-end will look like:

Thumbnail

thumbnail

Setup

The 6 models will need to translated and hosted on your own bucket. This will change the URN values that will need to be subtitued here. URN Gallery JSON

Feel free to use your own models in the Gallery.

Note Restore State

The Restore State functionality is hardcoded for the specific models. You will need to get the State for each of your models and pass the new JSON value at this location Restore State JSON

Development mode

Follow these instructions to get the app running locally:

  1. run git clone this repository
  2. cd into the project's directory
  3. create a file called server/credentials.js with your credentials, follow this template
  4. run npm install
  5. run npm run watch

This will get a server running locally, open http://localhost:3000 on your browser to see the app running.

Production mode

To run this app in production mode, run npm run build and then npm start in a production environment.

If you try to deploy this on Heroku, we set a postinstall script that will run the build script, so there is no need to run it again, simply let Heroku run npm start (which it does automatically) and you'll be good to go.

Heroku Deployment

To deploy this project to Heroku, be sure to set your environment variables in the dashboard:

  • FORGE_CLIENT_ID
  • FORGE_CLIENT_SECRET

Deploy


License

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

Written by

Jaime Rosales D.
Twitter Follow
Forge Partner Development
Forge Developer Portal

viewer-react-express-headless's People

Contributors

augustogoncalves avatar cyrillef avatar doninpr avatar dukedhx avatar jaimerosales avatar jaylimboonkiat avatar kimekeunkyung avatar sergiocruz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.