Running React.js with Nest.js Together

Introduction

This blog post teaches you how to run nest.js and react.js together side by side. It offers a detailed walkthrough on how to run these two frameworks concurrently and combine them together under one project architecture.

Preparing for the Project

1. Make a directory:

mkdir nest-react-app

2. Create package.json

npm init -y

3. Create a folder named apps in the root directory which will hold backend (nest.js) and frontend (react.js) apps.

4. Include workspaces in package.json, because we store frontend and backend in the apps folder under the same project.

Workspaces allow you to manage multiple packages (or projects) within a single top-level, root package. This is particularly useful when you have a monorepo structure, containing multiple projects or modules that share common dependencies.

"workspaces": [
  "apps/*"
]

Install Turbo Package

The Turbo package simplifies the process of concurrently running multiple applications in our case; backend and frontend. It allows for either proxying to different ports (for development) or utilizing the same port (for production).

1. Install turbo package

npm install -D turbo

2. Create a file in the root directory named: turbo.json

3. Paste the following code into the file.

The dev pipeline is a task that is run by turbo.

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    }
  }
}

Install Nest.js & React.js

Go to apps folder and create new nest.js app

cd apps
nest new backend

Inside apps folder create new react.js app using vite. Choose react and typescript.

Vite does not install npm packages directly.

npm create vite@latest

Go back to the root of the project and install packages.

workspace check the package.json files inside apps folder and install all packages.

cd ..
npm install

Using Proxy for Development

Inside package.json’s backend app add the following script.

"dev": "nest start --watch --preserveWatchOutput",

Add app.setGlobalPrefix(‘/api’); code to main.ts of backend app.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('/api');
  await app.listen(3000);
}
bootstrap();

Inside vite.config.ts of frontend app add the following script.

server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },

Add the following script inside the package.json’s root folder.

"dev": "turbo run dev",

Run the app inside the root directory.

npm run dev

Folder Architectures

Folder Architecture

Production Build (The Same Port)

Inside package.json of root directory add the following script.

build: builds the backend and frontend.

start: starts the backend with the frontend.

"build": "turbo run build",
"start": "node apps/backend/dist/main"

Inside the root directory install @‌nest/serve-static, for the backend app.

npm install --workspace backend @nestjs/serve-static

In the backend app, go to app.module.ts, and import the serve-static module.

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '../..', 'frontend', 'dist'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Conclusion

In conclusion, this blog post has provided a comprehensive guide on seamlessly running Nest.js and React.js side by side. Offering a detailed walkthrough has empowered developers to successfully integrate these two frameworks within a single project architecture.

The complete project is hosted on this GitHub repo.

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer️
• Learn how you can also write for In Plain English️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture