React/Azure Functions - Running Multiple Development Stacks

I work as a freelancer with various small clients on an ongoing bases and in a single day might need to switch between clients to make a quick change or do some investigation. Generally my client projects are React for the Frond-End, Azure Function for the Back-End API and SQL Server for the database.

The problem I run into is by default React's development server runs on port 3000 and the Azure Functions run on port 7071, which means I need to stop both running to release the ports before I can start working on another project.

My solution to this is for each new project I start I change the default ports and I do this as I create the projects. Saves me having to remember how to do it when I'm just quickly looking at something or have limited time.

In React it's a simple change to the scripts section in package.json:

  "scripts": {
    "start": "react-scripts start",

Becomes:

  "scripts": {
    "start": "set PORT=3008 && react-scripts start",

In Azure Functions it's project properties change. If you right click on the project in Visual Studio and pick Properties, then go to the Debug pane, set the 'Application arguments': Azure Functions Port Change.png

Due to being a bit OCD, I like to keep the numbers in line, so 3008 for React and 7078 for Azure Functions works well for me.

The only other change is if you're using a proxy in React to get to the Azure Functions, then the proxy setting in package.json also needs setting to the Azure Functions new URL:

{
  "name": "project-eight",
  "version": "0.1.0",
  "proxy": "http://localhost:7078/api/",

And that's it, nice and simple, and definitely worth doing as you initial create the projects.

Command Palette

Comments (2)