15
Start a SPA and it's API in one click
I've been using start or jump scripts for a long time to start up my API and SPA at the same time. With project TYE on the horizon, I thought I would share more about my more simplistic, "poor man", implementation.
It is important to note, a lot of configuration information is specified ahead of time in different files to make this work. For ASP.Net, the ports are configured in the launch.json and for node, proxy information is set up in a proxy.config.json file. Below is a simple example of the proxy config I use most often to route api requests to the ASP.Net port. It is also good to remember both apps are running locally under localhost.
// proxy config
{
"/api": {
"target": "http://localhost:5000",
"secure": false,
"logLevel": "debug",
"changeOrigin": false
}
}it's also important to declare the script you want node to run in scripts section of your package.json. Typically I use:
"start": "ng serve --proxy-config proxy.config.json"For my first attempt at makin my start script, I created a batch file that started two scripts. One new Powershell window for
dotnet watch run and another for npm run start. This had some hiccups initially. The windows would close if the Powershell stopped running, which was problematic for collecting errors. Also the command prompt window would linger. After a few iterations, I was able to solve those problems and landed on this:cd ./src/api
start powershell.exe -NoExit dotnet watch run
cd ../spa
start powershell.exe -NoExit npm run start
This script worked well from ASP.Net Core 1.3 and Angular 2, all the way through today with .Net 5 and Angular 12. Recently though, I started to dabble in Powershell Core and Windows Terminal which led me to a more efficient approach to starting and managing my scripts.
wt --title "dotnet watch run" -d "./src/api" powershell -noExit "dotnet watch run"; --title "npm run start" -d "./src/spa/" powershell -noExit "npm run start"With this one line, I can start a Windows Terminal with both scripts running in tabs. This allows me to keep both together and but also manage the window as one unit. The commands are similar, but the tabs are labeled, so I can quickly jump where I need to look. Also, this is far more expandable if I needed to run other startup scripts together in the future.
Originally posted to https://patrickmoore.dev/autostart-api-spa-app/