Skip to content

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 fast and straightforward 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 correctly installed, type dotnet –info in the terminal, you should see output that looks like this:

.net core CLI

Once you have confirmed that you have all the needed prerequisites, let’s continue to build the React web app.Continue Reading →

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!

How to add simple logging to your Web App using Elmah

Logging is a crucial part of any application. Logging can be used to track events, identify code issues, security holes, etc. In this blog post, I’ll describe how to add logging to your ASP.NET web application using an open source logging framework called Elmah.

Elmah has been around for a while, it became very popular for its pluggable framework. Elmah can be dynamically added to a running ASP.NET web application, or even all ASP.NET web applications on a machine, without any need for re-compilation or re-deployment.

Another common open source logging framework for .NET is a port of the excellent Apache log4j framework to the Microsoft .NET runtime, log4net. However, in this blog, I’ll focus on how to enable logging for your ASP.NET web application using Elmah.

Install Elmah

Get the latest Elmah version by typing the following into your Package Manager Console.

PM> Install-Package elmah.sqlserver

In this example, I am using the Elmah SQL package that comes with the files and configuration needed to log errors in a SQL table. After running the command above, you’ll see a new directory, App_Readme with two files in it.

solution1Continue Reading →

A weekend of code, ideas, and diversity

This past weekend I attended the 2016 Diversity Hackathon organized by Women Who Code Austin. This event was a 3-day hackathon and a celebration of diversity. This type of event sparks my curiosity and creativity in a very particular way. There are always constraints of time, resources, equipment and space. And yet, somehow people at these events create interesting applications. It is very exciting and motivating to be part of a hackathon.

Photo: 2016 Diversity Hackathon

ATX Diversity Hackathon 2016

 

These events usually start with a networking meeting where hackathon participants have an opportunity to talk about their ideas, listen to other people’s ideas and to form new teams. The networking is also a good ice-breaker, and it helps participants feel a bit more relaxed and comfortable, knowing they’ll be working surrounded by strangers for up to three days.

Many people participate in hackathons as an opportunity to try a new programming language or framework. Others are looking to start a startup and see a hackathon as the perfect place to create a prototype of their app and perhaps even find people who can join them in their efforts. For example, I met a group of individuals who had just completed a computer programming boot camp in Austin, TX. They signed up for this hackathon to force themselves to write an application using the newly acquired knowledge and skills. One of them created a chat application using Angular, FireBase, and Bootstrap while the other group ended up creating something using Heroku, React, and MongoDB.

When I first heard of this hackathon, I noticed they were looking for mentors, and so I signed up as one. But after the second day, I didn’t have much to do, and so I decided to create a little app of my own. My goal wasn’t to use a new programming language or framework. Instead, I wanted to see what I could do with the Stack Exchange API. After brainstorming for a bit, I decided to visualize user data from StackOverflow.com on a map using the Google Maps API. The result was a fun application that lets you see where developers are in the world and what countries, states, and cities have the biggest concentration of them. I called my project, Hacker’s Map.

In the last day of the hackathon, there was a bit of chaos as the deadline to stop writing code was approaching. We had until 2:00 PM to write code and by 2:30 PM we had to send an email with a link to the app’s code repository, the app name, description, tech stack used, and some screen shots of the application. By 3:00 PM teams started demoing their project to all attendees, including a group of judges who was voting for the top 4 applications.

Everyone had a chance to explain what their app did. Each team had only a few minutes to present, so you needed to get to the point and try to show and describe your app as much as possible in just two minutes. It feels great to do a presentation under this pressure. There is something about it that I enjoy.

All in all, it was a great weekend. Three days of code, ideas, and diversity. I enjoyed mentoring, meeting people, writing code under pressure, eating sandwiches and drinking tons of coffee. I am already looking forward to the next hackathon.

If you are a new developer and are trying to get more experience under your belt, hackathons are a perfect place for this. Also, if you are an experienced developer but haven’t had a chance to participate in a hackathon, I urge you to sign up for one as soon as possible. You can take part as a hacker or a mentor. Either way, you’ll get the benefit of being surrounded by intelligent people, wanting to create something from scratch, under pressure, and with a very tight deadline. It is great, trust me. I am already looking for the next hackathon.

Many thanks to Women Who Code Austin, Capital Factory for hosting it, and everyone else involved in making this such a great event.

What is your dream job?

mauri

Have you asked yourself this question? what’s your dream job? To be honest I am not sure if I can answer this question. My dream job is really a list of things I am actually doing presently and other things I wish I could do as well.

I am curious to know what your dream job is so I created a page where you can answer this question:

https://internsandinternships.com/whatisyourdreamjob

So tell me, what is your dream job?

After collecting enough answers I’ll be sending the aggregated results to the email address you use when answering the question in this page.

How to enable the new Command Prompt features on Windows 10

Windows 10 is packed with lots of new and old features such as the beloved Start menu. One of my personal favorites is the new Command Prompt and its new features. For years, a lot of us have suffered the limitations of the command prompt such as not able to resize the window or simply paste data using Ctrl+V. These annoyances are now part of the past, and if you want to enjoy these new features too, you’ll need to follow the steps below.

Enable New Command Prompt

If you have upgraded to Windows 10 and you use the Command Prompt, make sure you follow these steps to enable the new Command Prompt features:Continue Reading →

Programming: A short history of computer languages

Alfred Edward Chalon [Public domain], via Wikimedia Commons

What is computer programming

The action or process of writing computer programs, that is the definition of computer programming. Unfortunately, that doesn’t tell us much.

In a more descriptive way, programming refers to the act of describing processes and procedures by developing a list of instructions and commands for a computer to execute. The type of objects that these instructions manipulate are numbers, words, sounds, images, and the like. The goal of manipulating these objects is to make a computer perform a task and get results which would be nearly impossible for a human being to perform in a timely and accurate manner. The tasks we instruct a computer to make are usually very repetitive and can involve millions of calculations in a short period of time.Continue Reading →