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