https://github.com/autodesk-forge/forge-digital-catalog
A responsive web application demonstrating how to build a product catalog with interactive instructions using the Autodesk Forge and Fusion platforms
https://github.com/autodesk-forge/forge-digital-catalog
Last synced: about 1 year ago
JSON representation
A responsive web application demonstrating how to build a product catalog with interactive instructions using the Autodesk Forge and Fusion platforms
- Host: GitHub
- URL: https://github.com/autodesk-forge/forge-digital-catalog
- Owner: Autodesk-Forge
- License: mit
- Created: 2019-07-23T16:58:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-01T03:49:06.000Z (over 3 years ago)
- Last Synced: 2025-04-12T08:53:47.985Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://forge-digital-catalog.herokuapp.com
- Size: 13.5 MB
- Stars: 13
- Watchers: 8
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Forge Digital Catalog App
[](http://developer.autodesk.com/)
[](http://autodesk-forge.github.io)
[](http://autodesk-forge.github.io)
[](http://autodesk-forge.github.io)
[](https://github.com/koajs/koa)
[](https://github.com/vuetifyjs/vuetify)
[](https://github.com/jaredhanson/passport-oauth)
## Table of Contents
* [Description](#description)
* [Site](#site)
* [Prerequisites](#prerequisites)
* [Getting Started](#getting-started)
* [Build and Test](#build-and-test)
* [Deployment](#deployment)
* [Documentation](#documentation)
* [Sample Data](#sample-data)
* [License](#license)
* [Written By](#written-by)
## Description
The digital catalog project is a Forge-powered responsive web application that enables companies to publish key models (Inventor, Fusion360) from Fusion Team or BIM360 Docs
to their proprietary catalog. Companies can create the catalog structure they need as well as retire products, which have reached end-of-life, from the catalog.
External users can search the catalog and view a 3D representation of each catalog item using the Forge Viewer.
This digital catalog solution also delivers interactive instructions workflow (assembly / disassembly instructions) by supporting animations authored in Fusion 360 in the Forge Viewer.
This web application can act as a foundation for more advanced workflows, such as digital twin initiatives.
## Site
### Landing Page
### Administration Console
### Publisher Console
### Interactive Instructions
### AR/VR Toolkit
The AR/VR Toolkit feature enables translation of SVF to [glTF](https://www.khronos.org/gltf/) file format.
To learn how to author augmented reality machine instructions, please go to: [Augmented Virtual Reality](arvr)
### Live Demo
[Digital Catalog](https://forge-digital-catalog.herokuapp.com)
## Prerequisites
- Node.js v10+
- [Forge](https://forge.autodesk.com) application credentials
- MongoDB database
- for example, use the free tier of [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)
- or run it locally:
## Getting Started
This section will guide you through getting the code up and running on your own system.
1. Installation process
```git clone https://github.com/Autodesk-Forge/forge-digital-catalog digital-catalog```\
```cd digital-catalog``` \
```npm install```
2. Software dependencies
Please check `dependencies` in [package.json](package.json).
## Build and Test
Because our frontend app (./src/client) is developed separately from our backend (./src/server) - i.e. our backend exposes an
API for our frontend to talk to, then our frontend is essentially a purely static app. We can deploy
the built content in the ```www``` directory to any static file server, but we need to make sure to set the correct
publicPath.
You can review how the frontend app will be built by reading the configuration in the ```./vue.config.js``` file.
To build the frontend app: ```npm run build```
This will create a new directory ```./www``` with the static files.
### Development build
1. Set environment variables
```FORGE_CALLBACK_URL=http://localhost:3000/api/forge/callback/oauth``` \
```FORGE_CLIENT_ID=``` \
```FORGE_CLIENT_SECRET=``` \
```MONGODB_URI=``` \
```NODE_ENV=development``` \
```USE_LOAD_BALANCER=false```
2. Compile TypeScript
```npm run tsbuild```
3. Start Vue.js front-end app
```npm run serve```
4. Start Koa.js back-end app
On first run (only once): \
```npm run init```\
```npm run setadmin init```
Any time you start the server: \
```npm run dev``` (on mac) \
```npm run windev``` (on windows)
If you run into an error connecting to MongoDB, make sure you specify the database name in your connection string.
`mongoose.connect('mongodb://username:password@host:port/database?options...', {useNewUrlParser: true});`
To learn how to configure the WebHooks locally, please follow this link: [Local WebHooks Instructions](webhooks)
### Test build
1. Set environment variables
```FORGE_CALLBACK_URL=http://localhost:3000/api/forge/callback/oauth``` \
```FORGE_CLIENT_ID=``` \
```FORGE_CLIENT_SECRET=``` \
```MONGODB_URI=``` \
```NODE_ENV=test``` \
```USE_LOAD_BALANCER=false```
2. Compile TypeScript
```npm run tsbuild```
3. Run the tests
On first run (only once): \
```npm run init``` \
```npm run setadmin add ``` \
```npm run tsbuild:test```
Any time you run the tests: \
```npm test``` (on mac) \
```npm run wintest``` (on windows)
### Production build
1. Set environment variables
```FORGE_CALLBACK_URL=https:///api/forge/callback/oauth``` \
```FORGE_CLIENT_ID=``` \
```FORGE_CLIENT_SECRET=``` \
```MONGODB_URI=``` \
```NODE_ENV=production``` \
```USE_LOAD_BALANCER=false``` \
```VUE_APP_KOA_HOST=``` \
```VUE_HOST=```
2. Compile TypeScript
```npm run tsbuild```
3. Build Vue.js front-end app
```npm run build```
4. Start Koa.js back-end app
On first run (only once): \
```npm run init```\
```npm run setadmin add ```
Any time you start the server: \
```npm start``` (on mac) \
```npm start``` (on windows)
## Deployment
To learn how to deploy this Forge application, please follow this link: [Deployment Instructions](deployment)
## Documentation
The online help for this application can be served through docsify.
To install docsify, please navigate to
The documentation markup files for this application are located under the ```./docs``` folder.
To preview the online help, simply run the command ```docsify serve ./docs``` to start the local server.
You can then preview your online help site in your browser on ```http://localhost:3000```.
## Sample Data
The models used in the live demo can be obtained from \
## License
> You can check out the full license [here](LICENSE)
This project is licensed under the terms of the **MIT** license.
## Written By
Bastien Mazeran ([@BastienMazeran](https://twitter.com/BastienMazeran)), Tony Mandatori, Autodesk Customer Success Org