import { Loader, Action, useAction, useLoader } from "nestjs-remix";
@Injectable()
export class IndexBackend {
constructor(private readonly appService: AppService) {}
@Loader()
loader(@Req() req: Request, @Query("name") name?: string) {
return this.appService.getHello();
}
@Action()
action(@Body() body: LoginDto) {
return {};
}
@Action.Patch()
patch() {
return "[patch]: returned by server side";
}
@Action.Delete()
delete() {
return "[delete]: returned by server side";
}
}
export const useIndexLoader = (args: LoaderFunctionArgs) =>
useLoader(IndexBackend)(args);
export const useIndexAction = (args: ActionFunctionArgs) =>
useAction(IndexBackend)(args);
import {
type IndexBackend,
useIndexLoader,
useIndexAction,
} from './server/index.server';
import {
useActionData,
useLoaderData,
} from 'nestjs-remix/client';
export const loader: LoaderFunction = (...args) => {
return useIndexLoader(...args);
};
export const action: ActionFunction = (...args) => {
return useIndexAction(...args);
};
export default function Index() {
const data = useLoaderData<IndexBackend>();
const actionData = useActionData<IndexBackend>();
return <div>{data.message}</div>
}
For more detailed usage, please refer to Example
git clone https://github.com/JinYuSha0/nestjs-remix-template.git
yarn install
yarn run start:dev
yarn add nestjs-remix
import { RemixModule } from "nestjs-remix";
@RemixModule({
publicDir: path.join(process.cwd(), "public"),
browserBuildDir: path.join(process.cwd(), "build"),
imports: [],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Property | Description | Type | Required |
---|---|---|---|
publicDir | Remix frontend build output directory | string | true |
browserBuildDir | Remix entry build output directory | string | true |
remixServerDir | Remix backend build output directory | string | true |
staticDirs | Multiple static file directory configurations | ServeStaticModuleOptions[] | false |
useCoustomController | Use a custom root path controller | boolean | false |
isStaticAsset | Determine whether it is a static file | (request: Request) => boolean | false |
Except for these new properties, it is no different from the Nestjs module.
import { startNestRemix } from "nestjs-remix";
async function bootstrap() {
// ...
await app.listen(3000);
// Must be after the listen method
startNestRemix(app);
}
bootstrap();
"scripts": {
"build": "concurrently \"npm run build:nest\" \"npm run build:remix\" -n \"NEST,REMIX\"",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "concurrently \"npm run start:dev:nest\" \"npm run start:dev:remix\" -n \"NEST,REMIX\"",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"build:nest": "rimraf dist && nest build -p tsconfig.nest.json",
"build:remix": "rimraf build && remix build",
"start:dev:nest": "rimraf dist && nest start --watch -p tsconfig.nest.json",
"start:dev:remix": "rimraf build && concurrently \"remix watch\""
}