Add support for Remix Vite #22613
Replies: 10 comments 25 replies
-
|
This is on our roadmap 🙂 It'll be addressed in due course |
Beta Was this translation helpful? Give feedback.
-
|
@Coly010 , Can I (+my team) help you with that? |
Beta Was this translation helpful? Give feedback.
-
|
has there been any traction on this yet? has anyone successfully migrated a fresh remix app according to the remix docs using a freshly scaffolded remix app from the nx plugin to the vite build one? ive spent too much time already wrestling with nx's architecture... |
Beta Was this translation helpful? Give feedback.
-
|
There is a PR to Nx: #22757 |
Beta Was this translation helpful? Give feedback.
-
|
Is there any way to make this happen? Even manually? I've setup a vite app and added remix plugin but I get all sorts of weird errors from remix complaining about a missing package.json to some internal nx issues with nx-devkit and things. |
Beta Was this translation helpful? Give feedback.
-
|
You can try this fork https://github.com/unrealsolver/nx-remix-vite. Works for my project. But I had hard time accepting it to main repo. And I didn't updated it to the latest nx version |
Beta Was this translation helpful? Give feedback.
-
|
Oh awesome! Do you have an example of what files I'd need to change and what my vite.config should look like? I have a vite.config.ts setup with the nx-vite-plugin and remix-plugin currently but getting all sorts of errors. After I installed I got Now I'm getting |
Beta Was this translation helpful? Give feedback.
-
|
Basically, just create a normal nx/remix app and follow this guide: https://remix.run/docs/en/main/start/v2 /// <reference types='vitest' />
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
export default defineConfig({
root: __dirname,
cacheDir: '../../node_modules/.vite/packages/webapp',
server: {
port: 4200,
host: '0.0.0.0',
},
preview: {
port: 8080,
host: '0.0.0.0',
},
plugins: [
remix({
ignoredRouteFiles: ['**/*.css'],
}),
nxViteTsPaths(),
],
// Uncomment this if you are using workers.
// worker: {
// plugins: [ nxViteTsPaths() ],
// },
build: {
outDir: '../../dist/packages/webapp',
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
},
});And import { createWatchPaths } from '@nx/remix';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
/**
* @type {import('@remix-run/dev').AppConfig}
*/
export default {
ignoredRouteFiles: ['**/.*'],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",
// publicPath: "/build/",
//serverModuleFormat: "cjs",
serverDependenciesToBundle: [
/^lodash.*/,
/^winston.*/,
/^logform.*/,
/^@colors*/,
/^util.*/,
],
postcss: true,
watchPaths: () => createWatchPaths(__dirname),
}; |
Beta Was this translation helpful? Give feedback.
-
|
An feasible solution is this repo: https://github.com/jaysoo/nx-remix-vite-example |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't look like it's workings solution, I tried to add |
Beta Was this translation helpful? Give feedback.
-
|
Support seems to be present now :) As per this PR: #27884 (and all the other PRs it links to at the bottom). Example: https://github.com/itxch/nx-remix-vite The steps I followed:
|
Beta Was this translation helpful? Give feedback.
-
|
I don't know why but i can't reproduce this even after i do your guide step by step. can you kindly make it a repo so i can peek? |
Beta Was this translation helpful? Give feedback.
-
|
Here ya go https://github.com/itxch/nx-remix-vite |
Beta Was this translation helpful? Give feedback.
-
|
@itxch OMG. I want to kiss you so hard. Remix Vite and a Monorepo structure have been very, very, very painful. I've wasted an ungodly number of days trying to get something to work. I wanted to support Cloudflare Workers/Pages (which I ditched). Not having a build step would allow me to have the remix app pull the Cloudflare-specific dependencies, and then I'd have another nodejs-based app with the NodeJS-specific dependencies. This became very tricky. NX didn't have proper support, so I had to wire in tsx with Vite and ppm workspaces to make it work. After several weeks of failed attempts, I finally solved it. I had remix running in Vite, with a monorepo setup. The problem? Yesterday, I hit another wall when I tried importing a class from another package. I wanted to cry. I've been working on an MVP in which I've taken an ungodly amount of work to have a simple setup, and I was this close to throw the towel and bring everything together. But your solution has given me hope. I've cloned your repo, installed https://github.com/kiliman/remix-express-vite-plugin, and made a small proof of concept. It's working I will take time today to migrate the repository to nx. Thank you 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
@superjose Awesome, really glad its working for you and that its helped |
Beta Was this translation helpful? Give feedback.
-
|
Hey @itxch Do you know how to execute the start command ? I was trying to build and run it like that for production, and I'm encountering this issue |
Beta Was this translation helpful? Give feedback.
-
|
@Coly010 are there any plans to update the generator/docs for the Remix plugin to use/explain the |
Beta Was this translation helpful? Give feedback.
-
|
I'm curious the current status of this vs the endgame, because I'm very interested in using nx with contemporary Remix,. Is this a fair summary from what I've read here?: Currently it's only kind-of supported, you need to use the standard nx instructions to generate a Remix project, but after that you need to manually edit multiple configuration files, and then manually migrate the project from classic Remix, and even then there are issues with some imports. So, out-of-the-box it's not working, but that will be coming, eventually. |
Beta Was this translation helpful? Give feedback.
-
|
It's being worked on currently: #28555 |
Beta Was this translation helpful? Give feedback.
-
|
This is included now with 20.0.7 release, and it seems to mostly be OK out-of-the-box, but there are some problems:
But what I am most interested in is how to use a custom I have a minimal pre-made monorepo project here if it's of any interest, but it stops short of having the custom vite config for Remix that I need: |
Beta Was this translation helpful? Give feedback.
-
|
Running the e2e build locally with verbose I get a little more on the error. I must still be missing something from my custom nx affected -t e2e --verboseChanging module types in |
Beta Was this translation helpful? Give feedback.
-
|
Is it what we are waiting for? ) |
Beta Was this translation helpful? Give feedback.
-
|
No, that PR has already been merged and is available in the current release, and it's what I used entirely in this sub-thread I posted. With the latest release it does mostly work, but in summary what doesn't work out-of-the-box (for me at least) is this:
|
Beta Was this translation helpful? Give feedback.
-
|
The 20.0.8 release with #28738 fixes the original e2e build failure, i.e. installing Playwright --with-deps. I think my only remaining issue is being unable to have it all working with a
Is anyone using a custom |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, I just now upgraded nx to latest, including an updated Remix plugin, at version 20.1.0. The nx migration deleted my vite.config.ts, but putting it back in there it actually seems to all work now. I guess I just needed to wait :-) |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Is there any support to a Remix spa mode app with Nx ? |
Beta Was this translation helpful? Give feedback.
-
|
Well, all SPA mode needs is to configure the Remix plugin in the |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I referred to the remix documentation at https://remix.run/docs/en/main/guides/spa-mode, and it worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
So, can I ask, you have your own vite.config.ts in the Remix application folder, you enabled SPA mode in that config file, and your entire nx project builds, deploys, and runs successfully, including the e2e project with the Playwright tests? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, but I haven’t configured the E2E yet. I will let you know when it’s done. Is there a problem with your E2E? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, everything seems to be fixed with the latest version of nx/remix-plugin. I documented my entire experience in this discussion thread :-) |
Beta Was this translation helpful? Give feedback.
-
Description
Adding support for Remix with Vite in the @nx/remix plugin.
Motivation
I believe using Remix with Vite allows for a better developer experience.
Suggested Implementation
Just like for @nx/react, when you generate a @nx/remix plugin you should be able to specify
--bundler=viteAlternate Implementations
Beta Was this translation helpful? Give feedback.
All reactions