Now that we have our solution infrastructure in place, in this module we are going to connect the two projects and set up communication between the font-end and the back-end.
Configure the Web API Project
From Solution Explorer open the FredsCarsAPI/Properties/launchSettings.json file.
Set all the values for “launchBrowser” to false. And change all the HTTP values to the fixed port 40080 and the HTTPS values to the fixed port 40443.
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:40080",
"sslPort": 40443
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": false,
"launchUrl": "swagger",
"applicationUrl": "http://localhost:40080",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": false,
"launchUrl": "swagger",
"applicationUrl": "https://localhost:40443;http://localhost:40080",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": false,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
In the above configuration file we are setting launchBrowser for all the profiles to false. Otherwise the API project would launch Swagger everytime we start up the project to test and debug. We don’t want that right now. We’ll talk more about Swagger in later modules. It’s a nice tool to automatically document and test your WebAPI Rest Services.
We also set all the HTTP and HTTPS values to fixed ports so that we can easily reach the API project from Angular no matter what profile we are running the WebAPI project with.
Configure the Startup Projects
Right click the FredsCars solution in Solution Explorer and select Properties.
Under Startup Project, select “Multiple Startup Projects”. Set the Action for both projects to Start. Select the FredsCarsAPI project and click the up arrow to move FredsCarsAPI to the first position. This will make FredsCarsAPI start first so that when the Angular project starts up the WebAPI will already be available to serve data for Angular to consume.
Configure the Angular WebAPI Requests
Open the FredsCars/src/proxy.conf.js file in the Angular project. This is the proxy file used by the Angular Development Server to communicate with the back-end WebAPI in debug mode. Make the following code change highlighted in blue.
const PROXY_CONFIG = [
{
context: [
"/weatherforecast",
],
target: "https://localhost:40443",
secure: false
}
]
module.exports = PROXY_CONFIG;
In the above code we have changed the randomly generated port to the fixed HTTPS port we assigned to the WebAPI project.
Give it a whirl
Now that we have configured and wired everything up, let’s test out what we have so far.
Click the Green Start button in the top toolbar or press the F5 key to start the project in debug mode.
If you get a popup asking if you would like to trust the self signed certificate, click yes.
You’ll see messages in the Visual Studio output window that both projects are building and then messages about the deployment process. This can take a while the first time.
Next the ASP.Net Core Kestrel Server will startup in a console window to host the WebAPI project and you will see the WebAPI project listening on the HTTP and HTTPS ports we assigned it earlier in the FredsCarsAPI launchSettings.json file.
Another console window will then open hosting the Angular Live Development Server. You’ll see a message that the Angular compilation process is “generating browser application bundles”.
When the compilation process is finally complete, you should see the message “Compiled Successfully” and that the Angular application is listening on port 4200.
Finally a browser window will open and you can see the Angular root component is calling the single existing WeatherForecast API Service in the back-end WebAPI project and it’s HTML template is displaying the results.
Launching your preferred browser
You can see in the screenshot above that Angular launched the Microsoft Edge Browser. I prefer to work with Chrome when I am developing. Let’s fix that right now.
Open up the FredsCars/.vscode/launch.json file in Solution Explorer. The .vscode folder is a hidden folder in Visual Studio, so you may need to click the “Show All Files” button in the toolbar at the top of Solution Explorer to see it.
Then simply move the Chrome configuration from the bottom to the top above Edge.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "localhost (Chrome)",
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "edge",
"request": "launch",
"name": "localhost (Edge)",
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
If you haven’t stopped debugging press the red stop button in Visual Studio, press Shift-F5 on your keyboard, or simply close the browser window in debug mode and restart the application in debug mode.
When the application starts up again Angular will now have started up the Chrome browser rather then Edge.
What’s Next
We finally have all of our infrastructure in place. We have a solution with two projects. The back-end ASP.Net Core WebAPI project, and the front-end Standalone Typescript Angular project. And they can talk to each other allowing the Angular application to make API calls to our back-end and display results. In the next few modules we will get a better idea of how this is all working and start to build out our beloved FredsCars dealership in a full stack architecture as promised.