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).

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

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

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

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

and the frontend development server with:

$ npm start

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

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

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!!!