3 Ways to Optimize Your Development Workflow When Working with React & Node

Find out how to optimize your development workflow when running Create React App and a Node server at the same time.

If you’ve ever worked on a project with multiple 

 files, you might know the pain of juggling multiple terminal tabs, remembering which commands start up which server, or handling CORS errors. 

Luckily, there are a few tools available to us that can alleviate some of these headaches. In this post, we’ll go over three things you can do to optimize your development workflow when working on a project with a React front end (specifically, 

 directory for a React front end powered by 

, and one is in the root of the repo for a Node back end that exposes an API that our React app uses. Our React app runs on 

The directory structure looks something like this:

.
├── client
│   ├── node_modules
│   ├── public
│   ├── src
│   ├── .gitignore
│   ├── package-lock.json
│   ├── package.json
│   └── README.md
├── node_modules
├── .gitignore
├── index.js
├── package-lock.json
└── package.json

 files, this means that to have our front end and back end up and running we need to make sure we've run 

 directory. Let’s take a look at how we can streamline this.

One improvement we can make to our development workflow is adding a build tool to run multiple npm commands at the same time to save us the hassle of running 

 in multiple terminal tabs. To do this, we can add an npm package called 

At the root of our project, we’ll install it as a dev dependency.

my-app

 directory to start up our React app, and 

 at the same time. Here’s what it should look like now when running 

2. Install front end and back end dependencies with one 

Another aspect of our workflow we can improve is dependency installation. Currently, we need to manually run 

 file we have when setting up the project. Instead of going through that hassle, we can add a 

 directory after installation has finished in the root directory.

Now, when we install our monorepo, all we need to do to get up and running is run 

 into any other directories to run other commands.

As we mentioned above, our Node back end exposes API endpoints that are used by our React app. Let’s say our Node app has a 

 endpoint. Out of the box, if we tried to send a 

. Usually, when you encounter CORS errors, it's because you are trying to access resources from another domain (i.e. 

), and the domain you're requesting resources from is not permitted.

To tell the development server to proxy any unknown requests to our API server in development, we can set up a 

 in our React app's package.json file. In 

// client/package.json
{
  "name": "client",
  "proxy": "http://localhost:8888",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

Now, if we restart the server and set up a request to our Node app's 

fetch(`/refresh_token`)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

The next time you work on a monorepo project like this, try out these three tips to streamline your development workflow!

Be sure to check out our new course being released soon, 

, where we apply these concepts to build a real-world, full stack web app!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Workflow

3 Ways to Optimize Your Development Workflow When Working with React & Node

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript