How to integrate AutoCad Web or Autodesk viewer in a ReactJs web application

[muniyandi.balaganesan]

Hi,

We need to view dwg file in our web application.

Can we integrate autocad web or autodesk viewer in a ReactJs web app?

Is there any library available for this purpose?

Any other resources regarding this will be appreciated.

Thank you.

[asifmustafalahore007]

Yes, you can integrate AutoCAD Web or Autodesk Viewer into your ReactJS web application to view DWG files. Autodesk provides a powerful and flexible web-based viewer that allows you to display and interact with 2D and 3D CAD files in a browser.

To integrate AutoCAD Web or Autodesk Viewer into your ReactJS web app, you can follow these general steps:

1. Create an Autodesk Developer Account: If you don't have one already, sign up for an Autodesk Developer Account at the Autodesk Developer Portal (https://developer.autodesk.com/).

2. Create a New App: After signing in, create a new app to get an API key that you will use to access the Autodesk Viewer API.

3. Install Autodesk Forge Viewer: Autodesk Forge Viewer is the library that enables you to view CAD files in the web application. You can include it in your ReactJS project either by downloading the Forge Viewer JavaScript libraries and adding them to your project or by using a package manager like npm or yarn to install it.

4. Set up the ReactJS Application: Create a new ReactJS component or use an existing one to host the Autodesk Forge Viewer. You'll need to render the viewer within this component.

5. Integrate Autodesk Viewer API: Use the API key you obtained in step 2 to authenticate and access the Autodesk Viewer API. This allows you to load the DWG file into the viewer and control its functionalities.

6. Load the DWG File: Use the Forge Viewer API to load the DWG file into the viewer, and it should display within your ReactJS web application.

Keep in mind that integrating the Autodesk Viewer may require some knowledge of web development, APIs, and ReactJS. Additionally, the Autodesk Viewer API documentation (https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/overview/) provides detailed information on how to use the API, including code examples and sample projects.

If you prefer using a library specifically designed for integrating Autodesk Viewer with ReactJS, you can search for community-developed packages on npm. A library with React components for Autodesk Forge Viewer might simplify the integration process for you.

Remember to check the licensing and terms of use for the Autodesk Viewer API, especially if you plan to use it in a commercial project.

As this information is based on my knowledge up to September 2021, I recommend checking the latest CMS documentation and resources from Autodesk to ensure you have the most up-to-date information and tools.

[rayj96358]

To integrate AutoCAD Web or Autodesk Viewer into a ReactJS web application, you can follow these steps:

1. **Sign Up for Autodesk Developer Account:** If you don't already have one, sign up for an Autodesk Developer Account (https://developer.autodesk.com/).

2. **Create a New App:** In your Autodesk Developer Account, create a new app to obtain the necessary API keys and credentials.

3. **Install Required Libraries:** In your ReactJS project, install the Autodesk Forge Viewer library, which allows you to integrate the viewer component into your application. You can install it using npm or yarn:

```bash
npm install autodesk-forge-viewer
```

4. **Import and Initialize Viewer:** In your React component, import the Forge Viewer component and initialize it with your Autodesk API credentials. You will need to create a Viewer application on the Autodesk Developer portal and use the `FORGE_CLIENT_ID` and `FORGE_CLIENT_SECRET` obtained during app creation.

```javascript
import { AutodeskForgeViewer } from 'autodesk-forge-viewer';

const options = {
env: 'AutodeskProduction',
getAccessToken: () => yourAccessTokenFunction(),
refreshToken: () => yourRefreshTokenFunction(),
};

AutodeskForgeViewer(options, 'viewer-container');
```

5. **Render Viewer Component:** Create a container element (e.g., a `div`) in your React component where you want to embed the Autodesk Viewer. Pass the container's ID to the Viewer component.

```javascript
<div id="viewer-container"></div>
```

6. **Accessing and Viewing Files:** Use the Forge API to upload and access your AutoCAD files. You can then use the Viewer component to display and interact with these files within your React application.

7. **Handle User Interactions:** Implement event listeners and controls to allow users to interact with the Viewer component, such as zooming, panning, and rotating.

8. **Styling and Customization:** Customize the appearance and behavior of the Viewer component to match your React application's design and functionality requirements.

9. **Testing and Deployment:** Thoroughly test your React application with the integrated Autodesk Viewer, and once everything works as expected, deploy your application to your hosting platform.

10. **Documentation and Resources:** Refer to the Autodesk Forge documentation (https://forge.autodesk.com/en/docs) for detailed guides, API references, and examples to help you fine-tune your integration.

By following these steps and utilizing Autodesk Forge services, you can seamlessly integrate AutoCAD Web or Autodesk Viewer into your ReactJS web application, enabling users to view and interact with AutoCAD files directly within your application.