DEV Community

Cover image for How to Bootstrap a New Project Using NestJS and React
professorjrod
professorjrod

Posted on

How to Bootstrap a New Project Using NestJS and React

NestJS is an efficient, scalable framework on Node.js for building server side applications. It is quickly growing in popularity, and currently is my favorite server side framework (Rails will always have a place in my heart though).

nestjs cat and react atom logo

Before we get started, you're going to need to install Node.js and npm. I highly recommend using a package manager like nvm if you don't have one already.


A great use for Nest is to pair it with a React frontend because your whole codebase can then be in the same language. No need to find a Ruby dev for the backend and a PHP dev for your front end. Typescript baby!

Anyways, getting started with using NestJS and React is super simple and I'll walk you through it.

Note: Nest is written in Typescript, so if you haven't already made the transition from Javascript well--here's why you should

Setting up

First, you're going to want to create seperate folders for your frontend and backend so

$ mkdir frontend && mkdir backend
Enter fullscreen mode Exit fullscreen mode

Now let's initialize a new Nest project. If you haven't already, you need to download @nestjs/cli. To do this:

$ npm i -g @nestjs/cli
$ nest new backend
Enter fullscreen mode Exit fullscreen mode

Great! Now, for the frontend we're actually going to use Create React App. It's an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

$ npx create-react-app frontend --template typescript
Enter fullscreen mode Exit fullscreen mode

Awesome! Now, we have downloaded everything for a good start.

Dev servers

You can start the development for the backend by using:

$ npm start:dev
Enter fullscreen mode Exit fullscreen mode

and the frontend development server with:

$ npm start
Enter fullscreen mode Exit fullscreen mode

Make sure you're in their respective directories, of course.

Testing

If you haven't set up testing for your app, now is the time. By default, Nest uses Jest. In order for Jest to transpile Typescript you will need to install ts-jest.

You can do so with:

$ npm i -D @nestjs/testing ts-jest @types/jest
Enter fullscreen mode Exit fullscreen mode

If you're having problems you might need to make a config file so Jest knows what files to transpile:

$ npx ts-jest config:init
Enter fullscreen mode Exit fullscreen mode

And that's it! If you have any problems, definitely check out the official documentations here:

NestJS
Create-React-App
Jest
ts-jest

And, as always, you can clone the repo if you'd like

For my next blog post I'll probably setup another interesting stack! This stuff is definitely nice to have in one source. Hope this helps and HAPPY CODING!!!

Top comments (0)