Getting started on ASP.NET Core & React - episode 02

Getting started on ASP.NET Core & React - episode 02

Contents

  1. Episode 1 – Introduction
  2. Episode 2 – Backend / Infrastructure (you are here)
  3. Episode 3 – Frontend Setup
  4. Episode 4 – Data flow
  5. Episode 5 – Tests / Security
  6. Episode 6 – It’s your turn

Introduction

In previous episode we showed you general idea of our course. We know what we’re going to do, how and why. Now it’s time to get to work. In this chapter we’re going to focus on backend (ASP.NET Core application) and infrastructure (we mean by this tools, environment). The result of this chapter will be fully prepared backend environment and working ASP.NET Core project with membership system.

To-do list for this episode:

  1. Install Visual Studio
  2. Install MS SQL Server and MS Management Studio
  3. Create Git repository
  4. Create ASP.NET Core project
  5. Create database for project with identity model
  6. Refactoring
  7. Summary

1. Install Visual Studio

Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs for Microsoft Windows, as well as web sites, web applications and web services.

Visual Studio supports different programming languages and allows the code editor and debugger to support (to varying degrees) nearly any programming language, provided a language-specific service exists. Built-in languages include C, C++ and C++/CLI (via Visual C++), VB.NET (via Visual Basic .NET), C# (via Visual C#), and F# (as of Visual Studio 2010). Support for other languages such as Python, Ruby, Node.js, and M among others is available via language services installed separately. It also supports XML/XSLT, HTML/XHTML, JavaScript and CSS.

~Wikipedia

We’re going to use the newest Visual Studio – 2017. Microsoft has announced that March 7 will be the official release date for VS2017, but we can use available Release-Candidate version. Why VS2017? As you see we’re going to use ASP.NET Core which is really new technology and to tell you the truth – it’s still in let’s say „development”. Things are constantly changing and it’s good to use the newest tools to avoid a lot of frustrations. If you’re using Visual Studio 2015 – you can have problems with some things in this tutorial. We really recommend using VS2017.

  • Go to Visual studio 2017 RC download page and download Visual Studio.
  • Run installation.
  • Choose Visual Studio Community, you will see sceen similar to this one below.
  • Select „Web development” and „.Net Core and Docker”.
  • Click Install.

Once installation is done, open Visual studio (first run can take a while due to preparation, also you can be asked for signing in, but you can skip this step) and after a while you should see its main window.

2. Install MS SQL Server and MS Management Studio

Microsoft SQL Server is a relational database management system developed by Microsoft. As a database server, it is a software product with the primary function of storing and retrieving data as requested by other software applications—which may run either on the same computer or on another computer across a network (including the Internet).
~Wikipedia
SQL Server Management Studio (SSMS) is a software application first launched with Microsoft SQL Server 2005 that is used for configuring, managing, and administering all components within Microsoft SQL Server. The tool includes both script editors and graphical tools which work with objects and features of the server
~Wikipedia
  • Go to MS SQL Server Express download page and click „Download”. You should see the popup window with available products. We need two things:
    • Express 64BIT\SQLEXPR_x64_ENU.exe
    • MgmtStudio 64BIT\SQLManagementStudio_x64_ENU.exe
  • Check the checkboxes next to those products and click „Next”, downloading should start.
  • Once it’s done, install SQL Server (SQLEXPR_x64_ENU.exe).

if you’ve got 32-bit system download the same products but with _x86 in name instead of _x64

  • Choose „New SQL Server stand-alone installation..”. There are a lot of options to select during installation process, but we leave everything with default values.
  • Once SQL Server is installed we can install Management Studio (SQLManagementStudio_x64_ENU.exe). We start the installation process just the same way as we did it with SQL Server. We’re going from step to step leaving default options selected except two steps – Installation Type and Feature Selection. Choose settings on those steps according to those ones presented below.

Once Management Studio is installed we can connect to our database server. Open Management Studio and provide server name. To do this replace „Computer_name” with your computer name – probably it’s the same as first part of user name (in my case „adrian”).

After you’re connected, you will see its main window.

3. Create Git repository

Git is a version control system (VCS) for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for software development, but it can be used to keep track of changes in any files. As a distributed revision control system it is aimed at speed, data integrity, and support for distributed, non-linear workflows.
~Wikipedia

To start with Git for the purpose of this course follow our Git tutorial – quick start with Git, GitHub and SourceTree

Generally there are many ways how you can work with Git. You don’t have to work with SourceTree – we can use only command line or other tools. You don’t have to create your repository on GitHub – there are many others portals – BitBucket, GitLab (ok maybe there is one reason why you should stay on GitHub – right now it’s the most popular online project hosting). My point is – in programming world there are really many tools and there is no one „right” way to do sth, but we must start – this is why we recommend selected bunch of tools.

Last thing – we recommend using .gitignore file. Why you should use .gitignore? During build process there are created a lof of temporary files. They are created each time you build your project, so there is no sense to send those files to repository. If you would work with someone else you would get a lot of unnecessary conflicts. .gitignore file makes sure that only necessary files will be commited.

To use .gitignore file go to your repository directory and create .gitignore file. Make sure you’ve created .gitignore file – not .gitignore.txt file 🙂 Then paste there code presented below.

4. Create ASP.NET Core project

  • Open Visual Studio.
  • Select File -> New -> Project.

  • Choose ASP.NET Core Web Application.

  • In dropdown at the top left corner change ASP.NET Core 1.0 to ASP.NET Core 1.1.
  • From ASP.NET Core 1.1 Templates select Web Application.
  • Click „Change Authentication”.

  • Select Individual User Accounts and click OK.

  • Finally you can click OK – project will be created.
  • Once project is created expand dropdown next to the IIS Express button.
  • Expand Web Browsers and choose Google Chrome – it’s not necessary step, but Google Chrome is the best tool for web developers due to its rich developer tools.

  • Click „IIS Express” button and after a while you should see running application.

5. Create database for project with identity model

  • Open appsettings.json.
  • Modify DefaultConnection. Server – it’s the same server name as you provided in Mangement Studio. Database – name of database which will be created. In my case it will look like:
  • At the top right corner use „Quick Launch” console to search for „Package Manager Console” and open it.

  • Run Update-Database command in Package Manager console to apply generated migartions to the database.
During project initialization we chose „Individual User Accounts” and appropriate models and migrations were added for us automatically, so we can just update database. Everything is already prepared.
  • Once it’s done go to Management Studio, connect to database server or refresh „Databases” folder and you should see created database.
  • Right click on table „AspNetUsers” and click „Select Top 1000 Rows”.
  • As you can see in bottom „Results” window – AspNetUsers table is empty.

  • Run application.
  • Register at least one new account (Register option is at the top right corner).
  • Go back to the Mangement Studio and execute SELECT script once again. You can do that by clicking F5 (inner window with SQL query must be active).

  • As you can see the account has been added to the database.

6. Refactoring

You can think right now – what the hell he wants to refactor? It’s just created application from template, nothing else. Right, but in fact we’ve got whole working membership system. We’re sure our clients will need accounts in the application. For that reason we decided to create project with selected „Individual User Accounts”. Membership system we’ve got out of the box. It’s great. It’s standard ASP.NET Identity and there is no sense to waste time on creating your whole own accounts system. What’s more, I’m sure ASP.NET Identity is much more secure from any other solution we would create from scratch.

Ok, but if you look at Solution Explorer membership system is in „the center” of our project (Models, Services folders). If we would add other features the same way there would be a lot of mess really quickly. So lets make some separated space and put there stuff related to ASP.NET Identity. At the moment just separated folder is enough.

Maybe you thought that we’re going to do some more advanced stuff or immediately start to do features – sorry, but not. Among other things we want to show you normal every day work and eventually obtain a real life example of web application. For that reason this kind of job also has to be done.

  • Right click on SoftwareHouse.Web and add new folder, name it „Identity”.

  • Move Services folder to the Identity folder.
  • Do the same with Models folder.
  • Go to the Identity -> Services -> IEmailSender.cs and rename its namespace. To do that we must do a little trick. Open notepad and write part of new namespace „Identity.Services” and copy it. Then in IEmailSender right click on „Services” word in namespace. Choose „Rename”. „Services” word should now be hightlighted. Replace it with new phrase copied from notepad and tap enter. There can be a warning that you can’t use dots in namespace, but we don’t care about this (this is why we had to copy phrase from notepad – VisualStudio would not allow you to type dot). Thanks to Rename tool namespace will be changed in all files where it’s used. Ok, almost in all files – it will not change files in Views folder. There we’ll have to do it manually.
  • Go to the Identity -> Models -> ApplicationUser.cs and to the same with its namespace.
  • Go to the Views -> _ViewImports.cshtml and repair broken usings – replace old, not existing usings with new ones.
  • Go to the Views -> Shared -> _LoginPartial.cshml and do the same with broken usings.

Ok, not bad, but we can make one step further. In the Identity -> Models folder there is ApplicationUser.cs which is the entity model. We would like to hold it in the Data folder where all entity models will be held.

  • Go to the Data folder and create new folder there. Name it „Models”.
  • Move the ApplicationUser.cs to this folder.
  • Open the ApplicationUser.cs and change its namespace – this time do this manually, without using Rename tool because we want to change this namespace only in this file.
  • Try to run application – there should be some errors – you can look at those on „Error List”. Let’s fix it.
  • Go to the AccountController.cs and add new using:
  • Go to the Startup.cs, ApplicationDbContext.cs, ManageController.cs, _ViewsImports.cshtml and do the same thing.

Eventually your solution should look like this:

If you can’t run application and there are still some errors you did sth wrong or I forgot about sth 🙂 You can always look at our repository on GitHub and find out what is wrong.

6. Summary

We didn’t write a lot of code, but there is a huge number of new things. Try to go over entire solution and look what’s going on in each file. Also there are some helpful resources you should get to know:

We tried to help you make the first step – next you must do on you own. So don’t finish on that what is presented in this chapter. Take a look at above additional resources and practise, practise, practise. Remember – we’ve got public repoistory on GitHub where you can look at or download our project.

Last, but not least – we’d love to hear from you! Was it easy or tough? Is it helpful for you or not? We’re waiting for your feedback 🙂