feat: add article about using HTTPS in local environment

Author: TechWatching

content/1.posts/67.aspnetcore-with-nuxt.md

@@ -167,4 +167,4 @@ Here are the weather forecasts retrieved from the API and displayed in the Front
 
 Nothing fancy, but I hope this gives you a good understanding of how we can integrate an ASP.NET Core API with a Nuxt front end. Not everything is perfect, we have the URL of the API hardcoded in the Nuxt configuration, and we have to launch the API and the front end separately. In an upcoming article, we will explore how to use .NET Aspire to improve the developer experience.
 
-You can find the complete source code used for this article in this [GitHub repository](https://github.com/TechWatching/AspnetWithNuxt).
+You can find the complete source code used for this article in this [GitHub repository](https://github.com/TechWatching/AspnetWithNuxt/tree/initial-without-aspire).

content/1.posts/68.aspnetcore-with-nuxt-https.md

@@ -0,0 +1,140 @@
+---
+title: "Develop Your ASP.NET .NET  And Nuxt  Web Application using HTTPS"
+lead: Use HTTPS in local development environment
+date: 2025-02-28
+image:
+  src: /images/dotnet_nuxt_https.webp
+badge:
+  label: Development
+tags:
+  - ASP.NET Core
+  - Nuxt
+  - Vue.js
+  - .NET
+  - HTTP
+  - Security
+---
+
+In my [last article](https://techwatching.dev/posts/aspnetcore-with-nuxt), we explored how to integrate an ASP.NET Core API with a Nuxt.js front end. However, we were using HTTP to debug both the API and the front end locally.
+
+There are a lot of reasons why we would want to use HTTPS instead of HTTP for local development, but mainly it's about having a local setup that closely matches the production environment. Our web application will of course use HTTPS when deployed to production and other environments, so it's better to identify any potential issues related to HTTPS as early as possible.
+
+So let’s switch to HTTPS for the ASP.NET Core and Nuxt.js [application we previously created](https://github.com/TechWatching/AspnetWithNuxt/tree/initial-without-aspire).
+
+## Use HTTPS for the ASP.NET Core API
+
+To make HTTPS work, we need to generate a self-signed certificate and trust it on our local environment. There are [different ways to do that](https://learn.microsoft.com/en-us/dotnet/core/additional-tools/self-signed-certificates-guide?wt.mc_id=MVP_430820), but to keep things simple we can use the [built-in command of the .NET CLI](https://learn.microsoft.com/en-us/aspnet/core/security/enforcing-ssl?view=aspnetcore-9.0&tabs=visual-studio%2Clinux-sles&wt.mc_id=MVP_430820#trust-the-aspnet-core-https-development-certificate) `dev-certs` that will install an ASP.NET Core HTTPS Development certificate:
+
+```bash
+dotnet dev-certs https --trust 
+```
+
+In the `launchsettings.json` file of the `WebAPI` project, you can see there are 2 profiles:
+
+```json [launchsettings.json]
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5096",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "https://localhost:7238;http://localhost:5096",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
+```
+
+By default, the first profile is used when you run the project without specifying a profile:
+
+```bash
+dotnet run --project WebApi\WebApi.csproj
+```
+
+To use the `https` profile, we can run this command:
+
+```bash
+dotnet run --project WebApi\WebApi.csproj -lp https
+```
+
+And now the `WebApi` runs in HTTPS locally:
+
+![Screenshot of a webpage displaying a JSON array with weather forecasts, on a localhost URL in HTTPS](/posts/images/68.weathers_1.png){.rounded-lg.mx-auto width="400"}
+
+## Configure the Nuxt front end to work with the HTTPS API endpoint
+
+Because we changed the `WebApi` to HTTPS, the endpoint has changed, so we have to change the URL for the API on the `WebApp`.
+
+We can do that in the `nuxt.config.ts`:
+
+```typescript [nuxt.config.ts]
+routeRules: {
+  '/api/**': {
+    proxy: 'https://localhost:7238/**',
+  }
+},
+```
+
+As [indicated in Nuxt documentation](https://nuxt.com/docs/api/composables/use-fetch), “to call an (external) HTTPS URL with a self-signed certificate in development, **you will need to set** `NODE_TLS_REJECT_UNAUTHORIZED=0` **in your environment.” We can set this environment variable directly in the** `dev` script in `package.json` (as it is explained in this [article](https://www.scriptedpixels.co.uk/blog/using-https-with-nuxt3)) but the syntax would differ depending on the shell used. So instead we will set it directly in an `.env` file:
+
+```plaintext [.env]
+NODE_TLS_REJECT_UNAUTHORIZED=0
+```
+
+Now, the `WebApp` is working again, this time by using the `WebApi` HTTPS endpoint.
+
+![Table showing dates with weather forecasts in a browser tab with http://localhost:3000.](/posts/images/68.weathers_2.png){.rounded-lg.mx-auto width="400"}
+
+Yet, we are still using HTTP for the front itself, let’s change that.
+
+## Use HTTPS for the Nuxt front end
+
+In the Nuxt configuration, there is an `https` section with `key` and `cert` properties to specify the private key and certificate to use. We already have an ASP.NET Core HTTPS Development certificate, so we can use it for the `WebApp` by exporting the necessary files with the `dotnet dev-certs` command:
+
+```bash
+dotnet dev-certs https --export-path ./WebApp/dev-cert.pem --format PEM -np
+```
+
+This will generate a `dev-cert.pem` file and a `dev-cert.key` file. Make sure to configure properly your `.gitignore` to avoid committing these files.
+
+::callout{icon="i-heroicons-light-bulb"}
+If you have played with the Visual Studio templates for `Vue`, `React` or `Angular`, generating a certificate using `dotnet dev-certs` and exporting the corresponding files is exactly what the code of the `vite.config.ts` file in the templates does.
+::
+
+Then, we can modify the `nuxt.config.ts` file:
+
+```typescript [nuxt.config.ts]
+  $development: {
+    routeRules: {
+      '/api/**': {
+        proxy: 'https://localhost:7238/**',
+      }
+    },
+    devServer: {
+      https: {
+        key: 'dev-cert.key',
+        cert: 'dev-cert.pem'
+      }
+    }
+  },
+```
+
+And here is the result, both the front end and the API using HTTPS:
+
+![Table showing dates with weather forecasts in a browser tab with https://localhost:3000.](/posts/images/68.weathers_3.png){.rounded-lg.mx-auto width="400"}
+
+To create a production-like environment during local development, it's a good idea to use HTTPS. Using tools like the .NET CLI to generate and trust self-signed certificates makes it easier to set up HTTPS for both the ASP.NET Core API and the Nuxt.js front end.
+
+The code for this article is available in this [GitHub repository](https://github.com/TechWatching/AspnetWithNuxt/tree/1a5dc26c18daf0e24d99de3763fdb407e807b4b1).