Create and Deploy a React App to Azure using .NET Core and Azure CLI on Mac

Prerequisites

Getting Started

In this tutorial, you’ll set up your Mac to do development using .NET Core and Azure. The tutorial also shows you the new and powerful .NET Core Command Line Interface (CLI) Tools.

After you have installed the .NET Core SDK and Visual Studio for Mac, open a terminal window and type the following:

$ cd /users/

$ cd users/yourusername/projects

$ mkdir samplereactapp 

$ cd samplereactapp

The above commands will do the following: browse to the Mac user’s Projects directory and create a new directory to place the react app that we are about to create.

.NET Core CLI

.NET Core’s Command Line Interface (CLI) is very powerful, it allows you to do a lot without leaving the command line which allows for the simple and fast creation of these projects. Double-check your current directory is the new directory you’ve created, in our example this is samplecreateapp. 

To make sure the .NET Core was installed properly, type dotnet –info in the terminal, you should see output that looks like this:

Once you have confirmed that you have all the needed prerequisites, let’s continue to build the React web app. Continue reading Create and Deploy a React App to Azure using .NET Core and Azure CLI on Mac

Creating a new .NET Core application using the dotnet command line

.NET Core is a general purpose development platform maintained by Microsoft and the .NET community on GitHub. It is cross-platform, supporting Windows, macOS, and Linux, and can be used in device, cloud, and embedded/IoT scenarios.

This is a simple guide to get you started with .NET Core by creating a simple Web API template using the command prompt. The example below, while simple, it shows how powerful and fluid this platform is.

First, let’s find out if you have the .NET Core platform installed, to do this, just open a command prompt and type the following command:

c:\where dotnet

If you have it installed, the above command will show the path to the .NET Core executable. If it doesn’t show you a path to the executable, then you don’t have it yet and you can install it from here.

Now let’s find out what version is installed, in the command prompt, type the following:

C:\dotnet --version

The above command will display the installed version. If you have an older version, you can get an updated version here.

One you have this platform installed, you’ll be set to create your first .NET Core application. To create a new ASP.NET Core web api, type the following commands:

// Create new directory
C:\>mkdir api

// Go to that directory
C:\cd api

// Create new application using the webapi template
C:\api>dotnet new webapi api

// Restores the dependencies and tools of a project
C:\api>dotnet restore

//Runs source code without any explicit compile or launch commands
C:\api>dotnet run

Once you do this, you’ll have a running web api application. This is what you’ll see in the command prompt:

To edit this application, I recommend you download Visual Studio Code or use any other text editor.

Also, in the example above I used the templace webapi to create a ASP.NET Core web api, but there are many other templates you can use to create different applications:

Template description Template name Languages
Console application console [C#], F#
Class library classlib [C#], F#
Unit test project mstest [C#], F#
xUnit test project xunit [C#], F#
ASP.NET Core empty web [C#]
ASP.NET Core web app mvc [C#], F#
ASP.NET Core web api webapi [C#]
Nuget config nugetconfig
Web config webconfig
Solution file sln

Want to create a new Angular or React application? You can install all the available single page application (SPA) templates using the following command:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Templates                              Short Name        Language       
--------------------------------------------------------------------
Console Application console [C#], F#
Class library classlib [C#], F#
Unit Test Project mstest [C#], F#
xUnit Test Project xunit [C#], F#
Empty ASP.NET Core Web Application web [C#]
MVC ASP.NET Core Web Application mvc [C#], F#
MVC ASP.NET Core with Angular angular [C#]
MVC ASP.NET Core with Aurelia aurelia [C#]
MVC ASP.NET Core with Knockout.js knockout [C#]
MVC ASP.NET Core with React.js react [C#]
MVC ASP.NET Core with React.js and Redux reactredux [C#]
Web API ASP.NET Core Web Application webapi [C#]
Solution File sln

Happy coding!