Redux DevTools Deployment and Usage Guide

Prerequisites

Before getting started, ensure you have the following installed:

• Node.js (version 16 or higher)
• pnpm package manager (required for this monorepo)
• Git for cloning the repository
• A modern web browser (Chrome, Edge, or Firefox) for browser extension testing

Installation

1. Clone the Repository

git clone https://github.com/reduxjs/redux-devtools.git
cd redux-devtools

2. Install Dependencies

This is a monorepo using pnpm workspaces. Install all dependencies:

pnpm install

3. Build Packages

Each package's dependencies need to be built before the package itself can be built. You can either:

Build all packages:

pnpm run build:all

Or build specific packages using workspace commands:

pnpm --filter "remotedev-redux-devtools-extension" build

Configuration

Environment Variables

The project doesn't require specific environment variables for local development. However, for production deployment, you may need to configure:

• Browser extension publishing credentials (for publishing to Chrome Web Store, Edge Add-ons, or Firefox Add-ons)
• Remote monitoring server configuration (if using remote monitoring features)

Development Configuration

For development, you can configure the extension options through:

1. Extension popup - Right-click the extension icon and select "Options"
2. URL parameters - Pass configuration options via URL parameters
3. Code configuration - Modify the configuration in the source files

Build & Run

Local Development

Browser Extension

1. Chrome/Edge:

   • Open chrome://extensions/ or edge://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the extension/build directory

2. Firefox:

   • Open about:debugging
   • Click "This Firefox"
   • Click "Load Temporary Add-on"
   • Select any file in the extension/build directory

Standalone App

To run the standalone app locally:

pnpm run dev:app

This will start the development server for the standalone app.

React Component

To use as a React component in your application:

pnpm run dev:component

Production Build

Build all packages for production:

pnpm run build

This will create optimized builds in the packages/*/dist directories.

Deployment

Browser Extension Deployment

Chrome Web Store

1. Package the extension:

   cd extension
   npm run build
   

2. Create a ZIP file of the build directory

3. Upload to the Chrome Web Store Developer Dashboard

4. Follow Google's review process

Firefox Add-ons

1. Build the extension:

   cd extension
   npm run build
   

2. Submit the build directory to Mozilla Add-ons

3. Follow Mozilla's review process

Edge Add-ons

1. Build the extension:

   cd extension
   npm run build
   

2. Submit to the Microsoft Edge Add-ons store

3. Follow Microsoft's review process

Standalone App Deployment

Deploy the standalone app to any static hosting service:

cd packages/redux-devtools-app
pnpm run build

Then deploy the build directory to services like:

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront

Remote Monitoring Server

For remote monitoring functionality, deploy the server component:

cd packages/redux-devtools-remote
pnpm run build

Deploy to Node.js hosting services like:

• Heroku
• Railway
• DigitalOcean App Platform
• AWS Lambda

Troubleshooting

Common Issues and Solutions

1. Extension Not Loading

Issue: Extension fails to load in browser Solution:

• Check browser console for errors
• Ensure build directory is properly generated
• Verify manifest.json is valid
• Check for conflicting extensions

2. Connection Issues

Issue: Cannot connect to remote monitoring server Solution:

• Verify server is running and accessible
• Check CORS settings
• Ensure correct hostname and port configuration
• Verify network connectivity

3. Build Failures

Issue: Build process fails Solution:

• Ensure all dependencies are installed with pnpm install
• Check for TypeScript compilation errors
• Verify all packages are built in the correct order
• Clear node_modules and reinstall if necessary

4. Performance Issues

Issue: Extension is slow or consumes too much memory Solution:

• Reduce the number of actions stored
• Enable action filtering
• Use the maxAge option to limit state history
• Consider using the standalone app instead of the browser extension

5. Serialization Errors

Issue: "Failed to stringify" errors in console Solution:

• Check for circular references in state
• Use custom serialization functions
• Limit the size of action payloads
• Use the serialize option for custom serialization

6. Hot Reloading Not Working

Issue: Hot reloading features don't function Solution:

• Ensure the extension has the necessary permissions
• Check for conflicts with other extensions
• Verify the Redux store is properly configured
• Check browser console for errors

Getting Help

For additional support:

• Check the official documentation
• Review the troubleshooting guide
• Search existing GitHub issues
• Create a new issue with detailed information about your problem

Development Tips

• Use pnpm run dev to start all development servers simultaneously
• Check the packages/*/src directories for source code
• Use pnpm run test to run tests for individual packages
• Use pnpm run lint to check code quality
• The project uses TypeScript, so ensure your editor has proper TypeScript support