Creating a React app with Dotnet Core backend & hosting on Azure

Problem:

We need to have an app whose backend and frontend runs on the same host/server so that we don’t have to worry about CORS issues and hosting the two apps separately.

Solution

There are many solutions but today we will talk about creating an App where UI & backend are hosted on same host. This can be done via template provided in Visual Studio for Creating React UI app with Dotnet Core as backend. In the image below we can see the template for it:

Using this template we can create our app, earlier in article we had discussed about the famous CORS error No Access-Control-Allow-Origin Header that we have to deal with when hosting frontend UI and backend applications separately.

Understanding

To understand the topic better we have already kept a JWT based project at our Github location. Please open this project side-by-side to understand the flow better. This project is a React + Redux + Asp.Net Core + JWT + MongoDb based ToDo application.

First step would be to set up a backend API, follow this part on how to Creating a Mongo DB based backend in ASP.Net Core API

Visual Studio includes ASP.NET Core Single Page Application (SPA) templates that support React and Angular. When we create the project, we see the solution as below, the template has provided a built-in Client-App folder in your ASP.NET Core projects that contains the base files and folders of each framework.

Next is to publish the application, way of publishing is simple on Visual Studio. We are publishing it on Azure, for that we should have an Azure subscription. You can get the subscription from https://signup.azure.com. As both Azure and Visual Studio are Microsoft products, so they integrate well and update automatically.

If you don’t want to pay for your subscription you can choose trial of Student account.

Next for publishing we have created a quick video where you can see this React and ASP.NET Core app being publish as below in video.

Inside Azure publishing window, there are different ways of publishing based on user’s requirements like hosting on Windows/Linux or via creating a VM.

Hosting on Linux is comparatively less. For testing purpose you can choose “pay as you go” option. For details on cost of hosting usage idea you can visit the Azure portal