Angular ssl development certificate expired. How to renew it

You already knew how to make your browser accept your development certificates. But today it stopped playing nicely with your Angular app again. After some trial and error you read the fine-print: Your certificate is expired! 😱

You need a new certificate to get unstuck: Delete the file server.pem in the folder node_modules\webpack-dev-server\ssl

Next time you start up your development server (ng serve –ssl true) a new certifcate will be generated and life is good again. Don’t forget to add the new certificate to the certificate store.

Add development certificate in Chrome browser (Windows)

After not finding a good resoure online and having to ask a colleague here is what he has told me to do:

  • Start the app in the browser. Instead of the app content Chrome displays a security warning “Your connection is not private”
  • Click on the “Not secure” field
  • Click on certificate
  • Select the “Details” tab
  • Click on “copy to file” button. The wizard opens
  • Safe certificate as a file (go with the defaults)
  • Next
  • Use the default format and save to a file of your choice.
  • Open the saved certificate file with doubleclick
  • Go with “Current User” and click next.
  • Add certificate to the windows certificate store. Make sure to select “Trusted Root Certification Authorities”. (Disclaimer: I don’t really like to add dev certificates to that store because they are definitely not CA Authorities, but the other stores do not seem to work. If you find a better way feel free to send me an email or Twitter message)
  • Finish the installation
  • Confirm security warning with yes. (like I said above. Please tell me if you have a better solution)
  • Restart Chrome and try again.
  • Chrome should be happy now, show the lock-symbol instead of the warning and load your application!

Azure App Service: View and Edit the deployed web.config with Kudu

We can use the Azure Portal and Kudu to view and edit the web.config of our deployed app in the App Service:

  • Open the App Service you want to using the Azure web portal.
  • Goto “DEVELOPMENT TOOLS” -> “Advanced Tools” and click on the “Go ->” link.

  • Above the console use the file explorer to navigate to the “site/wwwroot” folder

  • Scroll down and click the pencil icon to open the file

  • You should see the file content in the editor:

Be careful, saved changes have immediate effect and you should absolutely know what you are doing when on a production system!

Cloud diary tutorial part 1- Get started with ASP.NET MVC, user authentication and the cloud

A video tutorial based on my learnings of ASP.NET MVC 5, ASP.NET Identity, SQL Server and Azure.

Summary: I will show you how to create a very simple web application with user authentication. Users can register, log in, create diary entries (text) and visualize their entries.

In part one we will create, test and refactor the application locally on our computer. Although the app is very simple we will touch a lot of different technologies. You will also see some issues you may experience when starting with ASP.NET MVC in Visual Studio and how to fix them.

In part two we will publish our app to the cloud (Azure). Please subscribe to get notified when part two is finished.

Technology stack

Visual Studio 2017 (Community Edition)
ASP.NET MVC 5
ASP.NET Identity
C#
Git
Entity Framework 6 with Code-First
LINQ to Entities
Azure App Service
Azure SQL Database

Prerequisites

Visual Studio 2017 with the following workloads:

  • ASP.NET and web development
  • Azure development

Content

00 – Introduction

01 – Create ASP.NET MVC 5 application from template

  • Create a new ASP.NET MVC 5 application with ASP.NET Identity
  • Configure authentication (Individual user accounts) for new project
  • Project folders overview
  • Local database folder: App_Data
  • Register user and log into our new application
  • Use “Server Explorer” to show data from local database

02 – Remove unneeded content from application

  • Change title and footer of application
  • Basic HTML tags (title, footer, h1, h2, footer, div)
  • Remove a View and Action Method
  • Commit to source control (local GIT repository)

03 – Create new Controller and View

  • Create a new ASP MVC Controller
  • Create a new ASP MVC View
  • User authentication and security
  • Use of the [Authorize] and [AllowAnonymous] attributes
  • Configure authorization/authentication by default with global filter
  • Refactor our app to use global filter instead of [Authorize] attribute

04 – Display list of fake entries in View

  • Create a model class for diary entry
  • Usage of “prop” code snippet.
  • Create fake data in Controller
  • Display list in View
  • Use of the “ViewBag”
  • Create an HTML table in code

05 – Add form for adding new diary entries

  • Create a Html form using ASP.NET Identity code as template
  • Razor syntax
  • MVC Form @model directive
  • Create a ViewModel for form-data with data validation attributes
  • Use of [Required], [DisplayName] and [StringLength] attributes

06 – Implement Action Method on Controller to handle the form data from HttpPost request

  • Add HttpPost Action method to Controller
  • [HttpPost] and [ValidateAntiForgeryToken] attributes
  • Test Action Method

07 – Store diary entries in database

  • ASP.NET Identity ApplicationUser and ApplicationDbContext overview
  • ASP.NET Identity tables
  • Extend DiaryEntry model class for usage in DbContext
  • Create foreign key property and navigation properties (Entity Framework)
  • Add new DiaryEntry table to DbContext
  • Create new model class from viewmodel
  • Use Entity Framework to insert into DiaryEntries table
  • Show result of data-model change: “Server Error in Application. The model backing the ‘ApplicationDbContext” context has changed since the database was created. Consider using Code First Migrations to update the database”

08 – Enable EF Migrations

  • Add Code First Migrations to update the database
  • Delete SQLServer LocalDB database from App_Data folder
  • Enable, create and apply migrations with Package Manager (“enable-migrations”, “add-migration”, “update-database”)
  • Test adding a new diary entry to the database using our form.

09 – Retrieve data

  • Query database with LINQ to entities query
  • Redirect to GET ActionMethod after the POST with “RedirectToAction”

10 – UX improvement – Login button on homepage

  • Identify user experience issues
  • Use source control (GIT) to access code from a previous version
  • Improve navigation by adding Login-Button on homepage

11 – UX improvement – Move diary to homepage

  • Refactor Controllers and Views to merge homepage and diary page

Part 2 (Publish our app to the cloud) still in the works. Please subscribe to my YouTube channel and blog to get notified when it’s ready!

Credits: Big thanks to John Sonmez from SimpleProgrammer. His “10 Steps to learn Anything” course not only helped me to organize my learning but also motivated me to create this tutorial!