{"id":20382658,"url":"https://github.com/autodesk-forge/viewer-react-express-headless","last_synced_at":"2025-06-18T13:33:50.012Z","repository":{"id":17541977,"uuid":"82201563","full_name":"Autodesk-Forge/viewer-react-express-headless","owner":"Autodesk-Forge","description":"Headless viewer: Creates a custom Viewer GUI using react-express","archived":false,"fork":false,"pushed_at":"2024-05-06T13:09:08.000Z","size":14529,"stargazers_count":104,"open_issues_count":28,"forks_count":44,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-08T11:01:33.503Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://viewer-rocks.autodesk.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Autodesk-Forge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-16T16:31:19.000Z","updated_at":"2025-03-13T16:51:53.000Z","dependencies_parsed_at":"2024-05-05T15:28:16.536Z","dependency_job_id":"bc8010ec-8d8d-4326-b191-f6f50271e225","html_url":"https://github.com/Autodesk-Forge/viewer-react-express-headless","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Autodesk-Forge/viewer-react-express-headless","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Fviewer-react-express-headless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Fviewer-react-express-headless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Fviewer-react-express-headless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Fviewer-react-express-headless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Autodesk-Forge","download_url":"https://codeload.github.com/Autodesk-Forge/viewer-react-express-headless/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Fviewer-react-express-headless/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260561947,"owners_count":23028301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T02:18:31.059Z","updated_at":"2025-06-18T13:33:44.995Z","avatar_url":"https://github.com/Autodesk-Forge.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Viewer - React - Express - Headless\n\n[![Node.js](https://img.shields.io/badge/Node.js-6.7.0-blue.svg)](https://nodejs.org/)\n[![npm](https://img.shields.io/badge/npm-3.10.7-green.svg)](https://www.npmjs.com/)\n![Platforms](https://img.shields.io/badge/platform-windows%20%7C%20osx%20%7C%20linux-lightgray.svg)\n[![License](http://img.shields.io/:license-mit-blue.svg)](http://opensource.org/licenses/MIT)\n\n[![oAuth2](https://img.shields.io/badge/oAuth2-v1-green.svg)](http://developer.autodesk.com/)\n[![Viewer](https://img.shields.io/badge/Viewer-v3.3-green.svg)](http://developer.autodesk.com/) \n\n## Description\n\nUsing 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. \nI 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. \n\nThe available Extensions once in Full Screen mode are.\n- Properties (Categories are display with the option to expand to see all metadata available from the model)\n- Explode Slider\n- Explode Animation\n- Rotate Animation\n- Restate of the model to original form\n\nThis 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:\n\n### Thumbnail\n\n![thumbnail](/thumbnail.png) \n\n## Setup\n\nThe 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. \n[URN Gallery JSON](https://github.com/Autodesk-Forge/viewer-react-express-headless/blob/master/src/components/Gallery/Gallery.js#L29)\n\nFeel free to use your own models in the Gallery. \n\n### Note Restore State\n\nThe 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 \n[Restore State JSON](https://github.com/Autodesk-Forge/viewer-react-express-headless/blob/master/src/components/Viewer/Viewer-helpers.js#L156) \n\n### Development mode\n\nFollow these instructions to get the app running locally:\n\n1. run `git clone` this repository\n1. `cd` into the project's directory\n1. 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)\n1. run `npm install`\n1. run `npm run watch`\n\nThis will get a server running locally, open `http://localhost:3000` on your browser to see the app running.\n\n### Production mode\n\nTo run this app in production mode, run `npm run build` and then `npm start` in a production environment.\n\nIf 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.\n\n## Heroku Deployment\n\nTo deploy this project to Heroku, be sure to set your environment variables in the dashboard:\n\n- `FORGE_CLIENT_ID`\n- `FORGE_CLIENT_SECRET`\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n\n--------\n\n## License\n\nThis sample is licensed under the terms of the [MIT License](http://opensource.org/licenses/MIT).\nPlease see the [LICENSE](LICENSE) file for full details.\n\n\n## Written by\n\nJaime Rosales D. \u003cbr /\u003e \n[![Twitter Follow](https://img.shields.io/twitter/follow/afrojme.svg?style=social\u0026label=Follow)](https://twitter.com/AfroJme) \u003cbr /\u003eForge Partner Development \u003cbr /\u003e\n\u003ca href=\"http://developer.autodesk.com/\"\u003eForge Developer Portal\u003c/a\u003e \u003cbr /\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk-forge%2Fviewer-react-express-headless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautodesk-forge%2Fviewer-react-express-headless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk-forge%2Fviewer-react-express-headless/lists"}