Understanding the ASP.NET Core Backend

Learn to create an ASP.NET Core and React-templated application using step-by-step instructions.

We'll cover the following

In this chapter, we are going to start by creating an ASP.NET Core and React app using the standard template in Visual Studio. This template is perfect for us to review and understand basic backend components in an ASP.NET Core SPA.

Once we have scaffolded the app using the Visual Studio template, we will inspect the ASP. NET Core code, starting from its entry point. During our inspection, we will learn how the request/response pipeline is configured and how requests to endpoints are handled.

Creating an ASP.NET core and React-templated app

Let’s open Visual Studio and carry out the following steps to create our templated app:

  1. In the start-up dialog, choose “Create a new project.”

  2. Next, choose “ASP.NET Core Web Application” in the wizard that opens and click the “Next” button.

  3. Give the project a name of your choice and choose an appropriate location to save the project to. Then, click the “Create” button to create the project.

Another dialog will appear that allows us to specify the version of ASP.NET Core we want to use, as well as the specific type of project we want to create.

  1. Select “ASP.NET Core” as the version and “React.js” in the dialog. Then, click the “Create” button, which will create the project.

Note: If ASP.NET Core 5.0 isn’t listed, make sure that the latest version of Visual Studio is installed. This can be done by choosing the “Check for Updates” option from the “Help” menu.

  1. Now that the project has been created press “F5” to run the app. After a minute or so, the app will appear in a browser.

The home page of the app
The home page of the app

Note: The version of .NET is changed from 5.0 to 7.0 in WebApplication1.csproj file to meet the dependencies and to run the application successfully.

We have followed all the above steps, and the resultant project is given as follows. Press the “Run” button to execute it. If the web page does not open automatically, click the link given in the following widget.

   ¨& hÎ( @ €((()¯®­»¯­­¹®­¬¹®­¬¹®¬ª¹®«©¹­ª¨¹­©§¹­¨§¹¯©§·®©§·®¨¦·®¨¥·®¨¥·®¨¥·®¨¦·„€‹ÛÚÙÿÙÖÕÿØÖÕÿØÖÔÿØÖÔÿØÕÔÿØÕÔÿØÕÓÿØÕÓÿØÔÓÿ×ÔÓÿ×ÔÒÿ×ÔÒÿ×ÔÒÿ½º¹ÿåãâÿåãâÿäâáÿäáàÿãàÞÿãÞÝÿâÝÛÿâÝÚÿâÛÙÿâÚØÿáÚ×ÿáÙÖÿáÙÕÿáÙÕÿáÙÕÿáÙÕÿª¥£¿æäãÿýøöÿüøöÿüøõÿü÷õÿü÷ôÿûöôÿûõóÿûõòÿûõòÿúôñÿúôðÿúôðÿúóïÿÚÔÑÿþüûÿýûúÿýúùÿýùøÿüøöÿü÷ôÿûõóÿûôòÿúóðÿúòïÿúòîÿùñíÿùñíÿùñíÿùñíÿùñíÿ»µ³¿æäãÿüù÷ÿñâÍÿæÊ ÿæË¡ÿåʞÿåɞÿÞлÿÜÙØÿÙÖÕÿØÖÕÿØÖÔÿØÕÔÿØÕÔÿ¾¼ºÿþüûÿþûúÿýûùÿýúøÿüøöÿü÷õÿûöóÿûõòÿûôñÿúóðÿúòïÿúòîÿùñîÿùñíÿùñíÿúñîÿ»¶³¿æäãÿüù÷ÿæË¢ÿΘCÿϛGÿ͙Aÿ͙BÿÏ´Šÿýøöÿýøöÿüøõÿüøõÿü÷ôÿûöôÿÛ×ÕÿþüûÿþüûÿýûúÿýúùÿîëéÿîêèÿîéçÿíèæÿíçäÿíæäÿìåãÿåÞÜÿúòïÿúòîÿúòïÿúòïÿ»¶´¿æääÿýùùÿçÌ¥ÿЛJÿџPÿÓ¤XÿÓ¤XÿѺ”ÿüù÷ÿüù÷ÿüùöÿüøöÿüøõÿü÷ôÿÜØÕÿþüüÿþüûÿýûúÿýúùÿïëêÿõñðÿîêèÿôðíÿíèåÿíçäÿíæäÿìæãÿúóðÿúóðÿúóðÿúóðÿ»·µ¿æåäÿýúùÿçÍ¥ÿϛIÿÔ¦\ÿўNÿНKÿжŽÿüù÷ÿüù÷ÿüù÷ÿüùöÿüøõÿüøõÿÜØÕÿþýüÿþüûÿþûûÿýûúÿïìëÿõòðÿîêèÿõðîÿíéæÿíèåÿíçåÿíçäÿûôñÿûôñÿûôñÿûôñÿ¼¸¶¿æåäÿýûùÿèΧÿѝLÿÕ§^ÿўNÿМLÿжŽÿýùùÿýùùÿýùøÿôïìÿìåáÿëäàÿÎÈÄÿþýüÿþüüÿþüûÿýûúÿöóòÿïìêÿîëéÿîêèÿîêèÿîéçÿíèæÿíèæÿûõóÿûõóÿûõóÿûõóÿ¼¸·¿ææåÿýüúÿèϨÿўNÿÕ¨`ÿџPÿНMÿзÿýúùÿýúùÿýúùÿôïíÿìåâÿëåáÿÏÉÅÿþýýÿþýüÿþüûÿþüûÿýûúÿýúùÿýùøÿüù÷ÿüøöÿü÷õÿü÷õÿü÷ôÿüöôÿüöôÿüöôÿü÷ôÿ½¹¸¿ææåÿýüûÿèÏ©ÿѝMÿÖ¨`ÿџPÿНMÿжÿýûùÿýûùÿýúùÿôðíÿìæâÿìåáÿÎÉÆÿ÷ööÿ÷ööÿ÷öõÿ÷õôÿ÷ôóÿöôóÿöóòÿöóñÿöòñÿõòðÿõñïÿõñïÿõñïÿõñïÿõñïÿõñïÿ³±°¿ææåÿýýûÿéÑ«ÿÓ¡Uÿ׫fÿÓ¢VÿÒ SÿѸ’ÿýüúÿýüúÿýûúÿôñíÿìçâÿìæâÿÏÉÆÿððïÿðïïÿðïîÿðïîÿðîíÿðííÿïíìÿïíìÿïìëÿïìëÿïìêÿïëêÿîëêÿîëêÿîëêÿïëêÿ´²±¿çææÿþýýÿéѬÿҟQÿשcÿÓ SÿҟPÿѸÿýüûÿýüûÿýüúÿôñîÿìçâÿìæâÿÏÉÆÿÙØØÿÙØ×ÿØ××ÿØ××ÿØ×ÖÿØÖÕÿØÖÕÿØÕÕÿ×ÕÕÿ×ÕÕÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ¥££¿çææÿþýýÿêÒ®ÿÕ£YÿÙ­jÿÕ¥ZÿÔ£XÿÒº”ÿýýûÿýýûÿýüûÿôñïÿìçãÿìçâÿÏÊÆÿåääÿÎÍÍÿØØ×ÿØ××ÿþýüÿþüüÿþüûÿþüûÿþûûÿýûúÿýüûÿýûúÿýûúÿýûùÿðîíÿãááÿ­««¿ççæÿÿþýÿëÒ®ÿÕ¢WÿÙ¬iÿÕ¤YÿÔ¢WÿÒ¹”ÿþýýÿþýýÿþýüÿôòñÿìçäÿìçäÿÎÊÇÿåääÿåääÿåääÿäääÿäääÿääãÿääãÿäããÿäããÿäããÿäääÿäããÿäããÿäããÿäããÿäããÿ®­­¿çççÿþþþÿëÓ°ÿÖ¤\ÿÚ®mÿצ^ÿÕ¤[ÿÒ»–ÿþýýÿþýýÿþýýÿõòñÿìèåÿìçåÿÎÊÈÿåååÿåååÿåååÿåååÿåååÿ²²²ÿÑÑÑÿÑÑÑÿÑÑÑÿÑÑÑÿ²­ªÿÔÏÌÿÛ×ÕÿÛ×ÔÿÛÖÔÿ“““›...#çççÿþþþÿëÓ±ÿÖ£[ÿÚ­kÿÖ¤\ÿÕ£YÿÓº•ÿÿþýÿÿþýÿþýýÿõòñÿìèæÿìèåÿ×ÓÑÿÎÍÌÿÎÍÌÿËÊÈÿËÉÈÿËÉÈÿº¸·ÿËÉÈÿËÉÈÿËÉÇÿËÈÇÿÍÇÃÿóíéÿûöôÿûöóÿûõòÿµµµ‡çççÿÿÿÿÿíÕ³ÿÙ§bÿÜ°rÿÙ§cÿئ`ÿÔ»˜ÿþþþÿþþþÿþýýÿõòñÿìèæÿìèæÿìèåÿôòðÿôòðÿìçäÿìçãÿìçâÿìæâÿìåâÿìåâÿëåáÿëäàÿëäßÿóíêÿü÷ôÿûöôÿûöôÿ···‡çççÿÿÿÿÿìÔ²ÿפ^ÿÛ®oÿØ¥`ÿפ]ÿÓº–ÿþþþÿþþþÿþþþÿõóñÿìèæÿìèæÿìèæÿõòñÿõòñÿìçäÿìçäÿìçãÿìçâÿìæâÿìæâÿìåâÿìåáÿëåáÿôîëÿüøõÿü÷ôÿûöôÿ¹¹¹‡çççÿÿÿÿÿíÕµÿÚ¨eÿÞ²wÿÞ´yÿÞ²wÿØĨÿÿÿÿÿÿÿÿÿÿÿþÿöôòÿíéæÿìèæÿìèæÿõòñÿõòñÿìèåÿìçäÿìçäÿìçãÿìçâÿìæâÿìæâÿìåâÿìåáÿôïëÿüøõÿüøõÿü÷ôÿ»¼»‡çççÿÿÿÿÿíÔ´ÿÙ¦aÿݯrÿÙ¦aÿØ¥_ÿÔº˜ÿÿÿÿÿÿÿÿÿÿÿþÿõóóÿìéæÿìéæÿìèæÿõòñÿõòñÿìèæÿìèåÿìèäÿìçäÿìçäÿìæãÿìæâÿìåáÿìåáÿôïìÿüù÷ÿüùöÿüøöÿ½½½‡çççÿÿÿÿÿíÕ¶ÿÛ©gÿÞ²wÿÛªiÿÚ©gÿÕ½œÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿìêæÿíéæÿìéæÿõóñÿõóñÿìèæÿìèåÿìçåÿìçãýìèäýìçãÿìæâÿìåáÿëäáÿôïìûüù÷ùüù÷ûüøöû¾¾¾‡çççÿÿÿÿÿíÕµÿÚ§dÿÞ±uÿÚ©fÿÚ§dÿÕ¼›ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíéæÿìéæÿìéæÿõôñÿõóñÿíêçÿíêçÿíêçÿíêçÿíêçÿìèåÿìçãýìæáÿëäáÿóïëÿüøõÿüøõÿü÷ôÿÀÀ¿‡çççÿÿÿÿÿîÕ·ÿÛ¨gÿÞ²wÿÛªjÿÛ©gÿÕ½œÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿìéçÿìéçÿõôòÿõôòÿíêçÿíêçÿíêçÿíêçÿíêçÿìêæÿìéåÿìèãýìèäÿôñîÿüù÷ÿüùöÿøöôÿÁÁÁ‡çççÿÿÿÿÿîÖ·ÿÛ©iÿß²yÿÜ«kÿÛªiÿÕ½ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýüüÿûúùÿøøøÿòòòÿ‡çççÿÿÿÿÿîÕ·ÿÛ¨iÿß²yÿݬnÿÜ«mÿ×Â¥ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿìéæÿëèåÿéæãÿêçäÿòñïÿùùùÿóóóÿëëëÿÃÃÇçççÿÿÿÿÿîÖ¸ÿܪlÿÞ®rÿß²yÿàµ~ÿÛ˵ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿìéæÿêçäÿêçäÿãàÝÿàÝÚÿéçæÿíííÿãããÿÏÏÏÿÚÚÚÿÿÿçççÿÿÿÿÿîÖ·ÿܨiÿÝ«lÿÜ©iÿÜ©jÿÕ½ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿëèåÿêçäÿêçäÿêçäÿÂÀ¿ÿ¾¾¾ÿ¿¿¿ÿºººÿ¾¾¾ÿÛÛÛ¿ÿÿÿÿÿÿçççÿÿÿÿÿöëÜÿîÕ·ÿîÖ¸ÿîÖ·ÿîÖ¸ÿßÓÄÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿëçåÿêçäÿëçåÿëçåÿÀ¾½ÿþþþÿ÷÷÷ÿáââÿâââ¿ÿÿÿÿÿÿÿÿÿçççÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿçççÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿüüüÿüüüÿüüüÿúúúÿÅÅÅÿöööÿàààÿâââ¿ÿÿÿÿÿÿÿÿÿÿÿÿâââÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿßßßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿýýýÿúúúÿõõõÿÃÃÃÿâââÿååå¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÐÐÐÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþþþÿûûûÿõõõÿíííÿÊÊÊÿäää¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÔÔÔïïïÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿíííÿêêêÿæææÿáááÿÜÜÜ¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ(  @ÔÒуÏÍ̅ÏÌ˅ÏÌ˅ÏÌʅÎËʅÎËɅ¿½¼¹ÎÌËÝÍÊÉÝÌÈÆÝËÆÄÝÌÅÃÛËÅÁÛËÄÁÛ¶°®ÁñîìÿôçÖÿñáÊÿîáÐÿêæäÿéåãÿéäâÿåâàÿýûúÿüù÷ÿûöôÿúôñÿúòïÿùñíÿùñíÿß×ÔßñîîÿÛ³uÿНLÿЫnÿüøöÿüøõÿü÷ôÿìêèÿýûúÿõóñÿïëéÿîéçÿìæäÿñêçÿúòïÿßÙÖßñðîÿܵxÿÒ¢VÿЩmÿüùøÿúöôÿôîëÿéæäÿþüûÿøõôÿðíëÿïëéÿíèæÿôîëÿûõòÿàÛÙßññïÿܶ{ÿÓ£XÿЪnÿýúùÿøõóÿëåáÿäáßÿúùøÿúø÷ÿùöõÿùõôÿøôòÿøôòÿøóñÿÝÙ×ßòññÿÞ¸ÿÕ¥\ÿѬqÿýüúÿøöôÿìæâÿÚÖÕÿäããÿäââÿäááÿãáàÿãàßÿãàßÿãàßÿËÉÈßòòñÿ຃ÿרaÿÓ®uÿýýüÿù÷öÿìçãÿÙ×ÕÿÜÛÛÿçççÿñðïÿñïïÿñïïÿðïîÿíëëÿÌËËßòòòÿỆÿØ©dÿÔ¯xÿþýýÿù÷÷ÿìçåÿÖÔÒÿÙØ×ÿØ×ÖÿÂÁÀÿÎÍÌÿÇÃÁÿçâßÿëæãÿ”•”Sóóóÿ⽉ÿÚ«iÿÕ°{ÿþþþÿùø÷ÿìèæÿðíëÿðìêÿìçãÿìæâÿëåáÿëäàÿøòïÿûöôÿ³³³Eóóóÿ㾌ÿܯqÿص…ÿÿÿÿÿúùøÿìéæÿðíëÿðíëÿìçäÿìçãÿìæâÿìåáÿøôñÿüøõÿ¶·¶Eóóóÿ侎ÿÜ­oÿײ€ÿÿÿÿÿúùùÿìéæÿñîëÿñîìÿìèæÿìèåýìçãÿëåáÿøôñýüøöýºº¹Eóóóÿ俏ÿÝ®qÿس‚ÿÿÿÿÿüüüÿõôóÿøöõÿø÷õÿöôóÿöôóÿõôòÿõóñÿúøöÿøöõÿ¼¼¼Eóóóÿ忑ÿÞ¯uÿÜ»‘ÿÿÿÿÿúùùÿíêçÿíêçÿíêçÿíêçÿìéæÿêçäÿåâßÿðïïÿäääÿÌÌÌCóóóÿëÏ­ÿåÀ‘ÿßÄ¡ÿÿÿÿÿúùùÿíêçÿíêçÿíêçÿíêçÿêçäÿêçäÿÏÏÎÿÔÔÔÿÒÒҟÿÿÿíííÿöööÿöööÿíííÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿüüüÿùùùÿØØØÿâââŸÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÒÒÒAöööÿöööÿöööÿöööÿöööÿöööÿôôôÿêêêÿ××ןÿÿÿÿÿÿÿÿÿ
Template project hierarchy for the ASP.NET core web application

We’ll find out later in this section why the app took so long to run the first time. For now, we’ve created the ASP.NET Core React SPA. Now, let’s inspect the backend code.