Reactide Deployment & Usage Guide

1. Prerequisites

Before installing Reactide, ensure your system meets the following requirements:

• Node.js: LTS version (v12+ recommended). Includes npm.
• Git: For cloning the repository.
• Operating System: Windows, macOS, or Linux (Electron supports all three).
• Optional: If you plan to package the app for distribution, ensure you have the necessary platform-specific tools (e.g., wine for building Windows apps on Linux/macOS).

2. Installation

Follow these steps to set up Reactide from source:

1. Clone the repository:

   git clone https://github.com/reactide/reactide.git
   cd reactide
   

2. Checkout the stable release branch:

   git checkout 3.0-release
   

3. Install dependencies:

   npm install
   

4. Choose your setup method:

   A. Development Mode (for contributing or testing):

   npm run webpack-production
   npm start
   

   This launches Reactide with live reloading for development.

   B. Production Build (packaged desktop app):

   npm run webpack-production
   npm run electron-packager
   

   The packaged application will be available in the release-builds/ directory. Execute the appropriate file for your OS (e.g., Reactide.exe on Windows, Reactide.app on macOS).

3. Configuration

Reactide requires configuration to enable its simulator and component tree for your React projects.

Project-Level Configuration (reactide.config.js)

In your React project's root directory, create or modify reactide.config.js:

module.exports = {
  // Relative path to your HTML entry file (e.g., public/index.html)
  htmlPath: './public/index.html',
  // Relative path to your JavaScript entry file (e.g., src/index.js)
  reactEntry: './src/index.js',
  // Optional: Set to true if using Create React App
  CRA: false,
  // Optional: Enable hot module replacement (default: false)
  hotLoad: false,
};

Simulator Setup

1. Ensure your project has a development server (e.g., webpack-dev-server) configured.
2. In your project's package.json, add a script named reactide-server that starts the dev server with Reactide's integration. Refer to the example/ project in the Reactide repository for a working configuration.
3. Start the simulator from your project directory:

   npm run reactide-server
   

4. Build & Run

Development Workflow

1. In the Reactide repository, build the renderer process:

   npm run webpack-production
   

2. Launch Reactide:

   npm start
   

3. Open your React project in Reactide (File > Open Project) and ensure reactide.config.js is correctly set.
4. Run npm run reactide-server in your project's terminal (within Reactide's integrated terminal) to start the simulator.

Production Build

1. Build the production assets:

   npm run webpack-production
   

2. Package the Electron app:

   npm run electron-packager
   

3. The packaged app will be in release-builds/. Distribute this folder or compress it for your target platform.

5. Deployment

Reactide is a desktop application; deployment means distributing the packaged app to end-users.

Recommended Platforms

• GitHub Releases: Upload the release-builds/ contents as release assets.
• Website Download: Host the packaged apps on a project website (e.g., reactide.io).
• Package Managers (optional):
  • macOS: Distribute via Homebrew Cask or as a signed .dmg.
  • Windows: Create an installer (.exe) using electron-winstaller or distribute as a portable .zip.
  • Linux: Provide .deb, .rpm, or AppImage packages.

Auto-Updates (Advanced)

To enable auto-updates, integrate electron-updater:

1. Configure publish settings in package.json.
2. Host update files on a server or GitHub Releases.
3. In your main process code, add autoUpdater.checkForUpdates() on launch.

6. Troubleshooting

Simulator Not Loading

• Check reactide.config.js: Ensure htmlPath and reactEntry point to existing files relative to your project root.
• Dev server running: Confirm npm run reactide-server is active and serving your app.
• Port conflicts: The simulator uses port 3000 by default. Ensure no other service is blocking it.

Build Failures

• Node.js version: Use an LTS version (v12+). Check package.json for engines field if present.
• Clean install:

  rm -rf node_modules
  npm cache clean --force
  npm install
  

• Windows-specific: Run PowerShell as Administrator and install windows-build-tools if native modules fail.

Component Tree Empty

• Entry point mismatch: Verify reactEntry in reactide.config.js points to the file that renders your root React component.
• Hot reloading: Ensure hotLoad: true in reactide.config.js and that your dev server supports HMR.
• Project structure: The component tree parses your React components via the Flow parser. Ensure your components are valid JS/JSX.

Editor/ESLint Issues

• False positives: Monaco Editor's built-in