CADViewer for frameworks (ReactJS, VueJS, Angular etc.)
1: Install CADViewer with npm i cadviewer on all framework platforms. See specifics below for each platform on how to add auxillary files and connect with the back-end CAD conversion server.
2: In your /src (Angular) or /public (NodeJS/VueJS) folder create the assets/cadviewer/ folder, then unzip and add the content from the CADViewer assets file: assets_cadviewer.zip (the folder structure will be /assets/cadviewer/app/...). The assets can also be found in the /node_modules/cadviewer/dist/assets/ folder after installation.
If using TypeScript
3: If you are using typescript, then cadviewer.d.ts is in the /node_modules/cadviewer/dist/ */ folder after installation and is referenced through package.json. The types definitions can also be pulled from DefinitelyTyped, with npm i @types/cadviewer.
Note 1: For any installation issues, please refer to CADViewer FAQ
Use Integrated Samples
To see how a CAD Canvas is set up with callback methods and initialization of CADViewer, as an alternative to 1: - 3: above, use the following samples as a template:
4C: Angular - download a CADViewer Angular implementation sample from the repositories either Github - Angular 11 (cadviewer-testapp-angular-v01) or Github - Angular 13 with TypeScript (cadviewer-testapp-angular-v02).
Install Back-End Converter
5: Install a back-end CAD Conversion server to process CAD files and communicate with CADViewer.
Download the Node JS CAD Conversion server (or alternatively the PHP, .NET or Servlet Server implementations). Go to: https://cadviewer.com/download/, register and receive email and then download from CADViewer Handler/Connector Scripts.
Note: that the preferred CAD Server with React/Vue/Angular, is the CADViewer NodeJS CAD Conversion Server which can be downloaded directly from the Github repositories cadviewer-conversion-server (windows) or cadviewer-conversion-server-linux (linux).
You can always update the back-end CAD Converter AutoXchange 2023 in the server structure: Go to: https://cadviewer.com/download/, register, receive email and then download from AutoXchange 2023 Downloads.
Note that the path book-keeping is important for proper initialization, where the ServerBackEndUrl and ServerLocation is the location and Url of the CAD Server and ServerUrl is the Url of the React/VueJS/Angular application encapulating CADViewer.
var ServerBackEndUrl = "http://localhost:3000/"; var ServerUrl = "http://localhost:8000/"; // react // var ServerUrl = "http://localhost:8080/"; // vue // var ServerUrl = "http://localhost:4200/"; // angular var ServerLocation = ""; // leave blank (only use for dev purposes)
LICENSE: TMS 1.0: Use freely on localhost. Commercial use requires licensing, both using entirely or in parts. Contact Tailor Made Software, https://cadviewer.com/contact, for more information.