Add support for Remix Vite #22613
Replies: 9 comments 15 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.
-
I found a template file for vite config in the remix plugin repo: This appears to work, with the imports being resolved correctly, I added the port explicitly since it picked a random port without this: import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
declare module '@remix-run/node' {
interface Future {
v3_singleFetch: true;
}
}
export default defineConfig({
root: __dirname,
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),
nxViteTsPaths(),
],
server: {
port: 3000
}
});It's not quite 100% though as there are console warnings during startup. |
Beta Was this translation helpful? Give feedback.
-
To resolve the console warnings during startup, and restore the default server port for Remix applications, I needed to update server: {
port: 3000,
fs: {
allow: ['..']
},
},I am not sure if the |
Beta Was this translation helpful? Give feedback.
-
|
Here is my full latest
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
declare module '@remix-run/node' {
interface Future {
v3_singleFetch: true;
}
}
export default defineConfig({
root: __dirname,
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),
nxViteTsPaths(),
],
server: {
port: 3000,
fs: {
allow: ['..']
},
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
So it all seems to work except the failing e2e action on GitHub. Using a fresh project, immediately after generation via the nx CLI, and not adding a After I added the vite config file, it fails earlier I guess: I don't know how to proceed from here. |
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