Upgrade to Remix Vite

[jacobparis]

Hey, revisiting this now that the ecosystem has improved a bunch

• the bug in Remix that was breaking navigation as server deps were discovered, which required rewriting trigger core to not have barrel files has been fixed https://github.com/remix-run/remix/pull/9921
• the bug where optimize deps issues wouldn't occur until navigation has been fixed with the unstable_optimizeDeps future flag
• the Vite plugin vite-plugin-cjs-interop solves a bunch of the changes to package imports like switching to default exports and vice versa that were required before. I couldn't get this working last time, but was possibly just blocked by unrelated bugs that caused me to write this solution off

What we're left with is a much nicer and much more promising PR

• updates to latest Remix 2.15.0 in one swoop
• the server.ts has been split into two files: one server.js file that does NOT import anything from the app (and does not get bundled), and a server/app.ts file that return express middleware and can import anything from the app. This latter file will be processed by Vite

Outstanding concerns

• I don't think you want to keep my dotenv solution here, but I couldn't get infisical working so you can feel free to remove it if it works in your environment
• unclear what Node version this app is meant to run on. Package.json#engines says 16 and up but the node typings were set to 18 and I've bumped them to 20 because I was getting some mismatches where some things used node 20 types and some used 18
• I think I've hit parity with the feature flag guards in the server.ts but since it's sliced a bit differently I'm not 100% sure. If you run different environments using these you'll want to double check that
• could consider merging vite and vitest config

✅ Checklist

• [ ] I have followed every step in the contributing guide
• [ ] The PR title follows the convention.
• [ ] I ran and tested the code works

---

Testing

[Describe the steps you took to test this change]

---

Changelog

[Short description of what has changed]

---

Screenshots

[Screenshots]

💯

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a new cookie for managing redirection after GitHub authentication.
  • Added a function for parsing environment variable strings into an object format.

• Improvements

  • Updated the import method for Tailwind CSS to include a URL reference.
  • Enhanced error handling during authentication by preserving redirect information in cookies.
  • Improved event handling and tracking within the event repository.
  • Established a new Express.js server setup for handling HTTP requests and WebSocket connections.
  • Updated various dependencies to their latest versions, including significant upgrades to the Remix framework and Vite.

• Bug Fixes

  • Resolved a ReferenceError by adjusting the order of variable declarations in the WebSocket handling.

• Configuration Updates

  • Transitioned to using ECMAScript modules and removed obsolete configuration files that impacted type definitions and server settings.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3cfc94967196b7dd0eabb0aba91ee4e812432aad

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai[bot]]

Walkthrough

The pull request introduces several modifications across multiple files in the web application. Key changes include updates to import statements for various modules, the introduction of a new function for parsing environment variables, and adjustments to the handling of cookies for authentication. The loader function in root.tsx has been enhanced to return additional user-related data. Additionally, the project configuration files have been updated to support ECMAScript modules and the latest versions of dependencies, including the addition of a new Vite configuration file.

Changes

File	Change Summary
apps/webapp/app/entry.server.tsx	Import statement updated for PassThrough from stream to node:stream.
apps/webapp/app/root.tsx	Import statement for Tailwind CSS updated to include ?url. The loader function now returns additional properties including user data and session messages.
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx	New function parseEnv(src: string) added for parsing environment variables, replacing dotenv.parse in handlePaste.
apps/webapp/app/routes/auth.github.callback.tsx	Import path for redirectCookie updated from ./auth.github to ./auth.github.server.
apps/webapp/app/routes/auth.github.server.ts	New cookie redirectCookie created with a max age of one hour, enhancing redirection logic after authentication.
apps/webapp/app/routes/auth.github.ts	Removed createCookie and updated error handling in the action function to use redirectCookie for storing redirect information on errors.
apps/webapp/app/v3/eventRepository.server.ts	Import statement for EventEmitter changed from node:stream to node:events. Refined methods for managing events with enhanced error handling and logging.
apps/webapp/app/v3/handleWebsockets.server.ts	Moved declaration of authenticatedConnections before export of wss to avoid ReferenceError.
apps/webapp/package.json	Added "type": "module" and updated several dependencies to version 2.15.0, including Remix-related packages. New dependencies dotenv-cli and dotenv-expand added.
apps/webapp/postcss.config.js	Export syntax changed from CommonJS (module.exports) to ES Module (export default).
apps/webapp/remix.config.js	Deleted file containing Remix application configuration settings.
apps/webapp/remix.env.d.ts	Deleted TypeScript reference directives for Remix types.
apps/webapp/server.js	New file introducing an Express.js server setup with middleware configurations and routing logic, including health checks and error handling.
apps/webapp/server.ts	Deleted file containing the previous implementation of the Express.js server.
apps/webapp/server/app.ts	New file that sets up an Express server with HTTP request and WebSocket handling, including middleware for request IDs and rate limiting.
apps/webapp/tsconfig.json	Updated compilerOptions to include new types and removed remix.env.d.ts from include.
apps/webapp/vite.config.ts	New Vite configuration file to set up the build environment, integrating various plugins and features for development and SSR.
package.json	Updated vite dependency version from ^4.1.1 to ^5.4.11.

Possibly related PRs

• #1315: Addresses issues related to the absence of a tsconfig.json file, relevant due to modifications in import statements.
• #1436: Includes changes to error handling and logging, potentially impacting overall stability and error management in the application.
• #1484: The upgrade of the zod library may indirectly relate to the changes in the main PR, affecting types and imports across the codebase.

🐰 In the meadow, changes bloom,
With imports fresh, we make some room.
Cookies now hold our redirect dreams,
A server's heart beats in new streams.
From Vite to Tailwind, all is bright,
Our code hops forward, a joyful sight! 🌼

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint (1.23.1)

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/webapp/server.js

(node:17322) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files (Use node --trace-warnings ... to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 9.15.0

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js. If you are using a .eslintrc.* file, please follow the migration guide to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by https://eslint.org/chat/help to chat with the team.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.