genetic-orange

Running build locally

Hey crew. Really enjoying start so far! I'm building a simple first site with it and want to run the build locally. When I run npm run build and then npm run start, I'm getting this error: Cannot find module '/Users/xxx/Desktop/Websites/xxx/.output/server/index.mjs' imported from /Users/xxx/Desktop/Websites/xxx/node_modules/vinxi/bin/cli.mjs I see this is also happening on the basic example in the docs when I try building and running build there: https://tanstack.com/router/latest/docs/framework/react/examples/start-basic Do I need to do something differently to run the build locally?

6 Replies

equal-aqua•12mo ago

You should set the deployment preset

export default defineConfig({
  deployment: {
    preset: 'node-server',
  },
  ...
});

export default defineConfig({
  deployment: {
    preset: 'node-server',
  },
  ...
});

I believe the presets are directly from nitro, but there's very limited documentation there as well https://nitro.unjs.io/config https://nitro.unjs.io/deploy node-server works for running from node cli

Config - Nitro

Overview - Nitro

Learn more about Nitro deploy providers.

genetic-orangeOP•12mo ago

I'll try this out in a bit. Thanks! @icanflyit

equal-aqua•12mo ago

of course! good luck

genetic-orangeOP•12mo ago

Some of it works but no css is compiled with it and stuff like the tanstack devtools don't show up its like a bare html page. Have you had luck running a build in locally?

raw-harlequin•12mo ago

Just to be sure, you want to run production locally, right? I'm currently running production successfully locally. As noted by @icanflyit you need to have node-server configured as your preset:

export default defineConfig({
  deployment: {
    preset: 'node-server',
  },
});

export default defineConfig({
  deployment: {
    preset: 'node-server',
  },
});

Then: 1. vinxi build run the build 2. vinxi start or node .output/server/index.mjs My style from MUI Joy work, I currently only struggling with the right was of adding one CSS file from @fontsource.

equal-aqua•12mo ago

I'm not sure about dev tools, but how are you importing your css? This is what works for me (and what I see in the source for the tanstack.com page https://github.com/TanStack/tanstack.com/blob/main/app/routes/__root.tsx), I'm not really sure how the ?url works but it's needed for me when importing css in the root page

// routes/__root.tsx

...

// @ts-expect-error
import styles from '@repo/ui/globals.css?url';

export const Route = createRootRoute({
  ...
  links: () => [{ rel: 'stylesheet', href: styles }],
  ...
});

...

// routes/__root.tsx

...

// @ts-expect-error
import styles from '@repo/ui/globals.css?url';

export const Route = createRootRoute({
  ...
  links: () => [{ rel: 'stylesheet', href: styles }],
  ...
});

...

And yeah I have both local prod builds and my Coolify deployment working perfectly now, it took quite a bit to figure everything out though lol

Gaming

Programming

Running build locally

Did you find this page helpful?