# 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1596099572566/QdInXrDym.png)

Due to being a bit OCD, I like to keep the numbers in line, so 300**8** for React and 707**8** 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.