https://github.com/autodesk-forge/viewer-react-express-headless
Headless viewer: Creates a custom Viewer GUI using react-express
https://github.com/autodesk-forge/viewer-react-express-headless
Last synced: about 1 year ago
JSON representation
Headless viewer: Creates a custom Viewer GUI using react-express
- Host: GitHub
- URL: https://github.com/autodesk-forge/viewer-react-express-headless
- Owner: Autodesk-Forge
- License: mit
- Created: 2017-02-16T16:31:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-06T13:09:08.000Z (about 2 years ago)
- Last Synced: 2025-04-08T11:01:33.503Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://viewer-rocks.autodesk.io/
- Size: 13.9 MB
- Stars: 104
- Watchers: 15
- Forks: 44
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Viewer - React - Express - Headless
[](https://nodejs.org/)
[](https://www.npmjs.com/)
[](http://opensource.org/licenses/MIT)
[](http://developer.autodesk.com/)
[](http://developer.autodesk.com/)
## 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](https://developer.autodesk.com/en/docs/viewer/v2/overview/) in a headless way with custom made extensions. The front-end will look like:
### 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](https://github.com/Autodesk-Forge/viewer-react-express-headless/blob/master/src/components/Gallery/Gallery.js#L29)
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](https://github.com/Autodesk-Forge/viewer-react-express-headless/blob/master/src/components/Viewer/Viewer-helpers.js#L156)
### Development mode
Follow these instructions to get the app running locally:
1. run `git clone` this repository
1. `cd` into the project's directory
1. create a file called `server/credentials.js` with your credentials, [follow this template](https://github.com/Autodesk-Forge/viewer-react-express-headless/blob/master/server/credentials_.js)
1. run `npm install`
1. 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`
[](https://heroku.com/deploy)
--------
## License
This sample is licensed under the terms of the [MIT License](http://opensource.org/licenses/MIT).
Please see the [LICENSE](LICENSE) file for full details.
## Written by
Jaime Rosales D.
[](https://twitter.com/AfroJme)
Forge Partner Development
Forge Developer Portal