- Episode 1 – Introduction
- Episode 2 – Backend / Infrastructure (you are here)
- Episode 3 – Frontend Setup
- Episode 4 – Data flow
- Episode 5 – Tests / Security
- Episode 6 – It’s your turn
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:
- Install Visual Studio
- Install MS SQL Server and MS Management Studio
- Create Git repository
- Create ASP.NET Core project
- Create database for project with identity model
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.
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
- 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”).
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.
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
# User-specific files
# User-specific files (MonoDevelop/Xamarin Studio)
# Build results
# Visual Studio 2015 cache/options directory
# Uncomment if you have tasks that create the project's static files in wwwroot
# MSTest test Results
# Build Results of an ATL Project
# Chutzpah Test files
# Visual C++ cache files
# Visual Studio profiler
# TFS 2012 Local Workspace
# Guidance Automation Toolkit
# ReSharper is a .NET coding add-in
# JustCode is a .NET coding add-in
# TeamCity is a build add-in
# DotCover is a Code Coverage Tool
# Visual Studio code coverage results
# Web workbench (sass)
# Installshield output folder
# DocProject is a documentation generator add-in
# Click-Once directory
# Publish Web Output
# TODO: Comment the next line if you want to checkin your web deploy settings
# but database connection strings (with potential passwords) will be unencrypted
# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
# NuGet Packages
# The packages folder can be ignored because of Package Restore
# except build/, which is used as an MSBuild target.
# Uncomment if necessary however generally it will be regenerated when needed
# NuGet v3's project.json files produces more ignoreable files
# Microsoft Azure Build Output
# Microsoft Azure Emulator
# Windows Store app package directories and files
# Visual Studio cache files
# files ending in .cache can be ignored
# but keep track of directories ending in .cache
# Since there are multiple workflows, uncomment next line to ignore bower_components
# RIA/Silverlight projects
# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
# SQL Server files
# Business Intelligence projects
# Microsoft Fakes
# GhostDoc plugin setting file
# Node.js Tools for Visual Studio
# Visual Studio 6 build log
# Visual Studio 6 workspace options file
# Visual Studio LightSwitch build output
# Paket dependency manager
# FAKE - F# Make
# JetBrains Rider
# Python Tools for Visual Studio (PTVS)
# Cake - Uncomment if you are using it
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.
- 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.
Update-Databasecommand in Package Manager console to apply generated migartions to the database.
- 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.
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.
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 🙂