APS Viewer React

A React application with an Express backend for working with Autodesk Platform Services (APS) Viewer.

Project Structure

aps-viewer-react/
├── src/                # React frontend source
├── server/             # Express backend
│   ├── index.ts       # Server entry point
│   └── README.md      # Server documentation
├── public/            # Static assets
├── .vscode/           # VS Code debug configurations
└── .env              # Environment variables

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

# Install dependencies
npm install

# Or use yarn
yarn install

Development

Quick Start

Run both the Express server and React dev server:

yarn dev

This will:

• Start the Express server on port 3000
• Start the React dev server on port 3001 (proxied through 3000)
• Automatically open your browser to http://localhost:3000

Individual Commands

# Run React dev server only (port 3001)
yarn start

# Run Express server only (port 3000)
yarn server

# Run tests
yarn test

# Build for production
yarn build

# Run production server
yarn start:prod

Architecture

• Express Server (Port 3000): Main entry point that handles API requests and proxies frontend requests
• React Dev Server (Port 3001): Development server with hot module reloading
• In development, all requests to port 3000 are handled:
  • /api/* → Express API endpoints
  • Everything else → Proxied to React dev server

API Endpoints

See server/README.md for detailed API documentation.

• GET /api/:url/token - Fetch authentication token
• GET /api/:url/urn - Fetch metadata URN
• GET /api/health - Health check endpoint

Debugging

VS Code debug configurations are available:

1. Debug Server - Debug the Express server with breakpoints
2. Debug Server with Nodemon - Debug with auto-restart on file changes

Press F5 or go to Run and Debug (⇧⌘D) to start debugging.

Port Management

If you encounter port conflicts:

# Clear ports 3000 and 3001
lsof -ti:3000 -ti:3001 | xargs kill -9

Environment Variables

Create a .env file in the root directory:

PORT=3001                    # React dev server port
BROWSER=none                 # Prevent auto-opening browser on React start

Production Deployment

# Build the React app
yarn build

# Start the production server
yarn start:prod

The Express server will serve the built React app from the build/ folder.

Technologies

• Frontend: React, TypeScript
• Backend: Express, TypeScript, ts-node
• Development: nodemon, concurrently, http-proxy-middleware
• Viewer: Autodesk Platform Services (APS) Viewer

Learn More

• Create React App documentation
• React documentation
• Express documentation
• Autodesk Platform Services

Troubleshooting

Port already in use

If you see EADDRINUSE errors, clear the ports:

lsof -ti:3000 -ti:3001 | xargs kill -9

TypeScript errors in server

Make sure all dependencies are installed:

yarn install

Server exits immediately when debugging

1. Check for port conflicts
2. Verify .env file exists with PORT=3001
3. Check server logs in the Debug Console