xhomu / remix-v2-server

Use the following commands to quickly start a Remix v2 app with a basic Express server:

• CommonJS + server.js: npx create-remix --template https://github.com/xHomu/remix-v2-server/tree/cjs-server.js
• CommonJS + server.ts: npx create-remix --template https://github.com/xHomu/remix-v2-server/tree/cjs-server.ts
• ES Modules + server.js: npx create-remix --template https://github.com/xHomu/remix-v2-server/tree/esm-server.js
• ES Modules + server.ts: npx create-remix --template https://github.com/xHomu/remix-v2-server/tree/cjs-server.ts

---

If updating from a v1 Remix app, the following files probably needs to be adjusted:

• package.json
• remix.config.js
• tsconfig.json
• server.ts or server.js

What changes will depend on whether your repo is ESM/CJS, and whether you're using a typescript or javascript server:

• CommonJS + server.js
• CommonJS + server.ts
• ES Modules + server.js
• ES Modules + server.ts

For more on Remix v2 dev server, check these talks by @pcattori Pedro Cattori!

• Remix v2 Dev Server Docs
• Migrating your project to v2_dev
• Next gen HMR in Remix

---

Welcome to Remix!

• Remix Docs

Development

Start the Remix development asset server and the Express server by running:

npm run dev

This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying express applications you should be right at home just make sure to deploy the output of remix build

• server.js
• build/
• public/build/

Using a Template

When you ran npx create-remix@latest there were a few choices for hosting. You can run that again to create a new project, then copy over your app/ folder to the new project that's pre-configured for your target server.

cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app

remix-v2-server's Issues

Unable to resolve module when using path alias in environment with ESModule and TypeScript

Hello! First of all, thank you for your wonderful project. I'm having some problems using this template, so if you know where I can find a solution, could you please let me know?

In an environment using TypeScript and ESModule, importing using the path alias set on tsconfig.json gives the following error and does not work properly.

/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:757
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base));
        ^
Error: Cannot find package '~' imported from /home/yupix/works/remix-v2-server/build/index.js
    at packageResolve (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:757:9)
    at moduleResolve (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:798:18)
    at Object.defaultResolve (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
    at /home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:218:35
    at entrypointFallback (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:168:34)
    at /home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:217:14
    at addShortCircuitFlag (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:409:21)
    at resolve (/home/yupix/works/remix-v2-server/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:197:12)
    at nextResolve (node:internal/modules/esm/hooks:833:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:278:30)
Failed running './server.ts'

Projects I have tested

https://github.com/yupix/remix-v2-server/tree/esm-server.ts

Environment

OS: Ubuntu 22.04.3
Remix: v2.0.1
pnpm: v8.6.7
node: v20.8.0

missing await

broadcastDevReady is not marked as async by Remix's .d.ts files but it actually is an async and returns a Promise<void>, you need an await there (there are two calls in server.ts that need updating).

I had big issues with it not updating properly and I changed this and it works properly now, so I suspect that was an issue. Maybe it could still work without the await but it could become a race condition, not sure. But it works now.

Otherwise, great template :-)

Is it possible to import from the remix bundle?

Hi there! First of all, thanks for this awesome repo, it showed me how to get started with a server file in TS which is exactly what I needed 🙏

I need to create a loader context and fetch a few things, such as the locale and user for that context. This is simple via the getLoadContext function.

But, in order to resolve locale and user, I need functions which I have available in the bundle built by the remix build command (which end up in build/index.js). Any idea as to the best way how to go about this? When I try to import them from the server.ts file built with esbuild, they are not automatically bundled in and naturally cannot be resolved from the built file at runtime.

Cannot import external module (cjs + server.ts)

Hi,

Thank you for your marvelous examples here :)

I just have a quick question concerning the import

I have a reproductible example here : https://github.com/fchevallieratecna/remix-v2-server

you can

git clone https://github.com/fchevallieratecna/remix-v2-server
cd remix-v2-server
npm i
npm run build
npm start

and you'll see

❯ npm start

> start
> cross-env NODE_ENV=production node server.js

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module 'server/middlewares/test'
Require stack:
- /private/tmp/remix-v2-server/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/private/tmp/remix-v2-server/server.js:31:19)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/private/tmp/remix-v2-server/server.js' ]
}

Do you have an idea on how I can import *.ts file right from express server.ts files ?

esm vs cjs

Thanks for making these examples, helped me debug an import issue I was having with https://mui.com/base-ui/getting-started/quickstart/. I can't get it to install with 'esm' but I can with 'cjs' (ts). Do you happen to know why that is, so I can better reason about esm vs cjs in the future?

ESM + TS reloading node_modules

I am following the ES Modules + typescript example and it works fine for UI changes and as well for anything that is placed within serverDependenciesToBundle. But I have some other monorepo dependencies that are not bundled into the server (so coming from node_modules), included within watchPaths but that don't get updated when the server reloads.

It makes sense because I am only "cache busting" the BUILD_PATH but nothing from node_modules – any suitable approach to cache bust as well specific node_modules? Maybe by implementing a custom loader on top of ts-node?