Hello Thanos: static web app with azure function

We are going to create a plain HTML+JS static web app with an Azure Function as backend API, and by "plain" I mean no framework like React, Angular, or Vue, but will use Bootstrap and JQuery.

It will be a simple app with  2 input fields and 1 button. You will enter your name and last name and the app will say "hello" to Thanos and let you know if Thanos snapped you or not (Because you should not talk to the mad titan without permission).

We are going to use ReCaptcha V3 to prevent abuse and a bootstrap form with client-side validation before sending the data back to the azure function.


#1 Create the app from Visual Studio Code

Let's create a "custom" framework static web app following these instructions, then add a /src folder and place a basic index.html file there with the text "hello world".

Just make sure you use /src as "source path" and leave "build path" empty. You can confirm paths are correct by opening the GitHub workflow file in the ".github/workflows" folder, it should be reflected there:
 

Pushing your changes to the repo will trigger the GitHub action and deploy the app to Azure. Go to Azure Portal and find the app and click the URL, it should show your "hello world" text. 

#2 Get your Recaptcha keys

Go to Google ReCaptcha and create a configuration for this app, make sure to add for now "localhost" to the list of allowed domains. 

NOTE: Grab your site key and secret key for the next step. 

#3 Add code

Now that we have the basic skeleton let's modify the parts.

index.html

 Here is the code for index.html

Once you added the code, replace SITE_KEY with your own key. 

Salute.cs

If you have not added an HTTP function, you can do it from VS Code command palette (F1). The function should be in a folder called "/api", in the root of the repository and side by side with our  "/src" folder that contains the index.html page. 


I named the function "Salute", copy and paste the function code below.

We use the Flurl library to call Google Recaptcha API, so add the Flurl NuGet package with:

     dotnet add package Flurl.Http

Now open the local.settings.json file and add your secret key in there. 

This settings file will be used during local development, once deployed to Azure, you will need to add the key to the application settings of the function as shown below:


That's it! You can push your changes and test your application in azure.

#4 Run & Debug locally

Run the function locally with Control+F5 or F5 if debugging, and from a terminal within VS Code run:

   swa start src --api api

This will start running the static web app and you will get an output similar to this:


If you did not add the IP to the Recaptcha configuration, you will get an error, either add the IP during development or change the address in the browser to "localhost".

#5 Add a custom domain

By default, Azure creates assign URLs for your app as subdomains of "azurestaticsites.net", which are not easy to remember. If you own a domain you can add a custom domain, open the tab for "Custom domains"


In order to validate the domain is yours, you can use CNAME validation, by going to your DNS administration and set a CNAME (like "thanos" in my case) to the value of the current app URL, minus the "https://" part. 


After the domain is pointing to the app and ready, go back to the Recaptcha configuration and add your new domain. Here is a capture of https://thanos.lpaneque.com.


#6 Play with it

Now is your time to modify this and play a bit: 

  • My "snap" function was lazy. Experiment with different approaches.
  • Try other ways to build the payload and call the API
  • Avoid bootstrap!?!? :) 
  • Use Recaptcha V2 instead of V3

Here is the public repository for the code https://github.com/lpaneque/salute-thanos 

Comments

Post a Comment

Popular posts from this blog

Get-ChildItem vs Dir in PowerShell

Image
Batch as usual Recently I was in the need of modifying a huge amount of files across a network share. After installing Serviio media streaming service I noticed that it will crash "randomly". After checking the logs it was clear that ffmpeg was crashing when trying to open subtitle files that were not in the encoding indicated by the Serviio console. I needed a quick way to update all subtitle files to a common encoding, so I decided to convert all files to UTF8. Since I use a windows environment I went directly to PowerShell and wrote this.  Get-ChildItem -path .\ -filter *.srt -file  | ForEach-Object { (get-content $_.FullName) | Out-File $_.FullName -encoding utf8 } This worked almost right except for files with "[" or "]" (among other symbols) on the name or path. To solve it, just added the "-LiteralPath" switch to tell powershell not to consider any wildcards on the path name and just use it exactly as it is.  Get-ChildIt...
Read more

The case for a 4 week sprint

Image
Every time we talk about SCRUM, the length of the sprint is stated as a period of "two to four weeks", rarely, however, have I seen people going outside of the 2 weeks. This is not written on stone of course, and while 3 weeks might seems odd, there is a benefit to using a longer period for your sprints.  Image is taken from scrum.org Without any hard data to back that decision, the answer I get from asking about this decision seems to be related to "delivery speed", we assume that because we deliver value to the business every 2 weeks, we are in a more "agile" environment. Well, that might not be so true in every sense or for every project. Let's break some arguments: 1. Sprint length is not equal to the speed of delivery There is more to the speed of development and delivery than the timeframe of the delivery cycle, in a world with DevOps and full CI/CD implemented for your project, you could (should?) actually deliver features every single day all t...
Read more

NODE.js fs.readFile and the BOM marker

Working on a ReactJS project, got a small glitch while trying to read a JSON file and parse it as a javascript object. getDataObject() { var dataString = fs.readFileSync("./json/data.json", "utf8"); return JSON.parse(dataString); } output:   SyntaxError: Unexpected token   After checking, double and triple checking again that the file was correct I went deeper and realized that "fs.readFileSync" was returning me the BOM for the UTF file at the beginning of the string. So we just need to strip it out. getDataObject() { var dataString = fs.readFileSync("./json/data.json", "utf8"); return JSON.parse(dataString.replace(/^\uFEFF/, "")); } I then checked and there are "packages" for this, however I don't think is proper to just import a new dependency just to fix something this small. The big issue here is why is this considered correct. The BOM is not ...
Read more