compositionalit / safe-dojo

An introductory dojo to learn how to develop full stack web applications in F#

SAFE Dojo

This self-study repository is designed to allow you to experience the SAFE stack based on a ready-made application that you can build on top of. It will take around 90 minutes for you to complete if you have no experience in any of these technologies.

The master branch contains the dojo to complete. Please read the instructions.md for a guide on completing this dojo, to learn all about the SAFE Stack and F#. There is a "completed" version in the suggested-solution branch.

Install pre-requisites

You'll need to install the following pre-requisites in order to build SAFE applications

• .NET SDK 8.0
• Node LTS

Starting the application

Before you run the project for the first time only you must install dotnet "local tools" with this command:

dotnet tool restore

Open the editor:

code .

Build and run in watch mode using the following command:

dotnet run

NOTE: You may have to allow dotnet or Server access to your public and/or private network.

Then open http://localhost:8080 in your browser. Arrange the windows so you can see both Code editor and the web browser.

Use the app

Type a UK postcode into the web app, e.g. "SW1A 2AA". Press "Fetch"

Completing the tasks

Search files (Ctrl+Shift+F or Edit --> Find in Files) and search through for "Task 1" to start completing the Dojo.

See Instructions.md for further details and hints about the tasks.

Going further: bundling your app

There is Bundle to package your app:

dotnet run -- Bundle

Going further: deploying to Azure

This requires these prerequisites:

• Azure CLI

First time run

az login

Then set the name of your app in Build.fs. The name must be globally unique and contain only alphanumeric or hyphen characters.

    let web = webApp {
        name "my-cool-app" // set the name of your app here
    ...

To deploy to Azure:

dotnet run -- Azure

SAFE Stack Documentation

If you want to know more about the full Azure Stack and all of it's components (including Azure) visit the official SAFE documentation.

You will find more documentation about the used F# components at the following places:

• Saturn
• Fable
• Elmish

safe-dojo's Issues

Unable to run in Visual Studio Code with F5

First off, thank you for creating the Dojo. Looking forward to try it out.

I encountered an issue in Visual Studio Code on Windows where the term 'fake' was not recognized when running the configuration "Watch SAFE App". I could run dotnet tool restore and dotnet fake build without any issues.

The term 'fake' is not recognized as the name of a cmdlet, function, script file, or operable program.

To resolve the issue I installed FAKE globally with dotnet tool install fake-cli -g. When this was done I could run the "Watch SAFE App" configuration without issues.

Is this an issue only I encountered, or should we add a notification in the readme mentioning it for new users unfamiliar with FAKE?

Test with VS2017

Client App > Postcode is null and cause an error in the console

Error:

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.
in input (created by Elmish_HMR_Common_Components_LazyView)
in div (created by Elmish_HMR_Common_Components_LazyView)
in div (created by Elmish_HMR_Common_Components_LazyView)
in div (created by Elmish_HMR_Common_Components_LazyView)
in section (created by Elmish_HMR_Common_Components_LazyView)
in Elmish_HMR_Common_Components_LazyView

Proposed Solution
Instead of having null assigned to the postcode at the beginning (since we should never use null anyway), we can assign an empty string. An another solution would be to create an option string type for postal code. This would allow the Some/None thing.

Lazy solution

let init () =
    { Postcode = "" // <=== null to empty string
      Report = None
      ValidationError = None
      ServerState = Idle }, Cmd.ofMsg (PostcodeChanged "")

Upgrade to SAFE Stack 3

Upgrade to latest fable / SAFE

FSharp.Data

Does this work on .NET Core and x-plat? If so we should definitely use it for the API HTTP calls.

Create branch for dojo

Can't build app created from template

hw: Apple Macbook Air 13 (M1)
sdk: 6.0.0-preview.3.21201.13

mostdope@Tims-MacBook-Air ~/g/d/l/SafeHw [SIGINT]> dotnet tool restore
Tool 'paket' (version '6.0.0-rc002') was restored. Available commands: paket
Tool 'fable' (version '3.2.1') was restored. Available commands: fable
Tool 'fantomas-tool' (version '4.4.0') was restored. Available commands: fantomas

Restore was successful.

mostdope@Tims-MacBook-Air ~/g/d/l/SafeHw [SIGINT]> dotnet run
EXEC : Failed to load /usr/local/share/dotnet/shared/Microsoft.NETCore.App/5.0.7/libhostpolicy.dylib, error : dlopen(/usr/local/share/dotnet/shared/Microsoft.NETCore.App/5.0.7/libhostpolicy.dylib, 1): no suitable image found.  Did find: [/Users/mostdope/git/dotnet/local/SafeHw/Build.fsproj]
/Users/mostdope/git/dotnet/local/SafeHw/.paket/Paket.Restore.targets(170,5): error MSB3073: The command "dotnet paket restore" exited with code 130. [/Users/mostdope/git/dotnet/local/SafeHw/Build.fsproj]

Update to NET Core 3.1

Move to local paket and fake dotnet tools

Presentation / slides

Note from using Dojo - race condition on save

I notice some kind of race condition in the watch mode from dotnet run which seems unfortunate

I change something in, say Index.fs, save the file, and the app disappears, and what I get in the log is this:

This seems to be because the background build is seeing an empty file on file save, likely racing with the write of the file.

Re-editing and saving and reloading eventually makes this go away

Do you know where I should report this?

client: Fable compilation finished in 3ms
client: E:/GitHub/dsyme/SAFE-Dojo/src/Client/Index.fs(1,1): (1,1) error FSHARP: Files in libraries or multiple-file applications must begin with a namespace or module declaration, e.g. 'namespace SomeNamespace.SubNamespace' or 'module SomeNamespace.SomeModule'. Only the last source file of an application may omit such a declaration. (code 222)
client: Watching ..
client: E:/GitHub/dsyme/SAFE-Dojo/src/Client/App.fs(11,25): (11,29) error FSHARP: The value, constructor, namespace or type 'init' is not defined. (code 39)
client: i ?wdm?: Hash: 3d2125395f875d3284fd
client: Version: webpack 4.46.0
client: Time: 141ms
client: Built at: 14/07/2021 13:51:16
client:                                          Asset       Size       Chunks                               Chunk Names
client:           166c1aa5b9b432042c80.hot-update.json   64 bytes               [emitted] [immutable] [hmr]
client:         app.166c1aa5b9b432042c80.hot-update.js   37.9 KiB          app  [emitted] [immutable] [hmr]  app
client:                                         app.js   2.21 MiB          app  [emitted]                    app
client:                                     index.html  540 bytes               [emitted]
client: vendors~app.166c1aa5b9b432042c80.hot-update.js   34.5 KiB  vendors~app  [emitted] [immutable] [hmr]  vendors~app
client:                                 vendors~app.js   3.85 MiB  vendors~app  [emitted]                    vendors~app
client: Entrypoint app = vendors~app.js vendors~app.166c1aa5b9b432042c80.hot-update.js app.js app.166c1aa5b9b432042c80.hot-update.js
client: [./Index.fs.js] 2 bytes {app} [built]
client: E:/GitHub/dsyme/SAFE-Dojo/src/Client/App.fs(11,36): (11,42) error FSHARP: The value, constructor, namespace or type 'update' is not defined. (code 39)
client:     + 128 hidden modules
client: E:/GitHub/dsyme/SAFE-Dojo/src/Client/App.fs(11,49): (11,53) error FSHARP: The value, constructor, namespace or type 'view' is not defined. (code 39)
client: Child html-webpack-plugin for "index.html":
client:      1 asset
client:     Entrypoint undefined = index.html
client:        4 modules
client: i ?wdm?: Compiled successfully.

Debugging on VSCode

When using the dojo is it possible to use a debugger on VSCode to inspect what is happening?

After adding a breakpoint and pressing the play button the following message was displayed:

-------------------------------------------------------------------
You may only use the Microsoft .NET Core Debugger (vsdbg) with
Visual Studio Code, Visual Studio or Visual Studio for Mac software
to help you develop and test your applications.
-------------------------------------------------------------------

Example Postcodes

Some people might not know English postcodes by heart, so here's a selection

EC2A 4NE
E1 7QA
NG7 4ED
WD6 1FY
N15 6AX
NW4 2PJ

Please add more for a wider selection

Keyboard Focus when changing Postcode

When typing in a postcode the focus is always set to the end of the text box.

This looks to be because changing the text goes through the update loop and sets the text to upper-case, which in turn updates the text moving the selection to the end.

I've had a look at fixing this by setting selectionStart and selectionEnd in the view, but I can't get it to work properly.

Unable to run FAKE on OSX Mojave

I'm trying run the fake build script, but I can't on a Mac.

Consider adding your dependencies via `#r` dependencies, for example add '#r "paket: nuget FSharp.Core //"'.
See https://fake.build/fake-fake5-modules.html for details. 
If you know what you are doing you can silence this warning by setting the environment variable 'FAKE_ALLOW_NO_DEPENDENCIES' to 'true'
Updating group Main in /Users/sinroscale/SAFE-Dojo/.fake/build.fsx/paket.dependencies
Resolving packages for group Main:
 - FSharp.Core 4.6.2
Locked version resolution written to /Users/sinroscale/SAFE-Dojo/.fake/build.fsx/paket.lock
Extracted Paket.Restore.targets to: /Users/sinroscale/SAFE-Dojo/.fake/build.fsx/.paket/Paket.Restore.targets
Starting full restore process.
Script is not valid:
	/Users/sinroscale/SAFE-Dojo/build.fsx (1,0)-(1,43): Error FS0078: Unable to find the file 'packages/build/FAKE/tools/FakeLib.dll' in any of
	 /Users/sinroscale/.nuget/packages/netstandard.library/2.0.3/build/netstandard2.0/ref
	 /Users/sinroscale/SAFE-Dojo
	 /Users/sinroscale/.dotnet/tools/.store/fake-cli/5.13.2/fake-cli/5.13.2/tools/netcoreapp2.1/any/

PassGenerics Attribute for proposed getJsonSafe<'T> function

In the current version of the Dojo tutorial the getJsonSafe<'T> function is defined without the PassGenerics attribute. At least in the version of Fable I used to go trough the Dojo this caused deserialization failures at runtime. Is this just an oddity in my setup or can someone reproduce this?

The error occurred when rewriting the distance endpoint to use POST instead of GET to pass the zip code.

No data showing

I just went through the getting started steps but got no data showing.

I adjusted the firewall permissions for "server" to make sure it has public network access but I didn't get any difference

Client doesn't build - App.fs not found

The client currently won't build because the file App.fs can't be found.

It looks like the problem was introduced in 3fa6885 where the name was changed in the .fsproj, but the file rename wasn't actually committed.

Docs / readme steps

Migrating to Fable 3.0

The biggest issue with migrating to Fable 3.0 is in the following code in Client App.fs:

let decoderForLocationResponse = Thoth.Json.Decode.Auto.generateDecoder<LocationResponse> ()
let decoderForCrimeResponse = Thoth.Json.Decode.Auto.generateDecoder<CrimeResponse array>()
let decoderForWeatherResponse = Thoth.Json.Decode.Auto.generateDecoder<WeatherResponse>()

…

// let! location = Fetch.fetchAs<LocationResponse> (sprintf "/api/distance/%s" postcode) decoderForLocationResponse []
let! location = Fetch.postRecord "/api/distance"  postcode []
let! crimes = Fetch.tryFetchAs (sprintf "api/crime/%s" postcode) decoderForCrimeResponse [] |> Promise.map (Result.defaultValue [||])
let! weather = Fetch.tryFetchAs (sprintf "api/weather/%s" postcode) decoderForWeatherResponse [] |> Promise.map (Result.defaultValue { WeatherType = WeatherType.Clear; AverageTemperature = 0. })

Fable.PowerPack Fetch has been replaced by Thoth.Fetch and Thoth.Promise.

There is no longer a postRecord method at all, only post.
tryFetchAs API is different, requiring a rewriting this functionality.

Rename function for retrieving weather

We currently have a function called getWeatherForPosition which retrieves the weather from the weather API which we tell people to use. Within our web API we also have a getWeatherForPosition function which is used to call the getWeatherForPosition API within the weather API. We should rename one of these to remove any possible confusion.

• Update one of the function names
• Update any documentation which references this function name
• Retest dojo

Exception on build.sh InstallClient task: System.Exception: 'dotnet restore' failed at [email protected] (System.String message) [0x00001] i

When I run build.sh, I get the output below. I recently updated to .net core to 2.1.300 on macOS but I am able to build and run other .net core projects no problem.

OS: macOS High Sierra 10.13.5
dotnet --version 2.1.300
mono --version
Mono JIT compiler version 5.10.1.47 (2017-12/8eb8f7d5e74 Fri Apr 13 20:18:12 EDT 2018)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
TLS: normal
SIGSEGV: altstack
Notification: kqueue
Architecture: amd64
Disabled: none
Misc: softdebug
Interpreter: yes
LLVM: yes(3.6.0svn-mono-master/8b1520c8aae)
GC: sgen (concurrent by default)

Executing Paket...
paket.lock file found, restoring packages...
Paket version 5.169.6
The last restore is still up to date. Nothing left to do.
Performance:

• Runtime: 81 milliseconds
  Building project with version: LocalBuild
  Shortened DependencyGraph for Target Run:
  <== Run
  <== RestoreServer
  <== InstallClient
  <== Clean

The running order is:

• Clean
• InstallClient
• RestoreServer
• Run
  Running build with 1 worker
  Starting Target: Clean
  Deleting contents of /Users/priort/d/SAFE-Dojo/deploy
  Finished Target: Clean
  Starting Target: InstallClient (==> Clean)
  Node version:
  /usr/local/bin/node --version
  v8.11.2
  Yarn version:
  /usr/local/bin/yarn --version
  1.7.0
  /usr/local/bin/yarn install --frozen-lockfile
  yarn install v1.7.0
  [1/4] 🔍 Resolving packages...
  success Already up-to-date.
  ✨ Done in 0.55s.
  dotnet restore
  A compatible SDK version for global.json version: [2.1.3] from [/Users/priort/d/SAFE-Dojo/global.json] was not found
  Did you mean to run dotnet SDK commands? Please install dotnet SDK from:
  http://go.microsoft.com/fwlink/?LinkID=798306&clcid=0x409
  Running build failed.
  Error:
  System.Exception: 'dotnet restore' failed
  at [email protected] (System.String message) [0x00001] in :0
  at Microsoft.FSharp.Core.PrintfImpl+StringPrintfEnv1[TResult].Finalize () [0x00012] in <5893d081904cf4daa745038381d09358>:0 at Microsoft.FSharp.Core.PrintfImpl+Final2@235[TState,TResidue,TResult,A,B].Invoke (Microsoft.FSharp.Core.FSharpFunc2[T,TResult] env, A a, B b) [0x0005a] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3266-1[T2,T3,TResult,T1].Invoke (T2 u, T3 v) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3253[T2,TResult,T1].Invoke (T2 u) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at [email protected] (System.String arg20) [0x00001] in :0
  at Microsoft.FSharp.Core.FSharpFunc2[T,TResult].InvokeFast[V] (Microsoft.FSharp.Core.FSharpFunc2[T,TResult] func, T arg1, TResult arg2) [0x0001f] in <5893d081904cf4daa745038381d09358>:0
  at FSI_0005.Build.run (System.String cmd, System.String args, System.String workingDir) [0x00059] in :0
  at [email protected] (Microsoft.FSharp.Core.Unit _arg2) [0x00089] in :0
  at Fake.TargetHelper+targetFromTemplate@209-1[a].Invoke (Microsoft.FSharp.Core.Unit unitVar0) [0x00000] in <5aa25359ccf1c534a74503835953a25a>:0
  at Fake.TargetHelper.runSingleTarget (Fake.TargetHelper+TargetTemplate`1[a] target) [0x00049] in <5aa25359ccf1c534a74503835953a25a>:0

---

Build Time Report

Target Duration

---

Clean 00:00:00.0021238
InstallClient Failure
Total: 00:00:01.5167651

Status: Failure

---

1. System.Exception: 'dotnet restore' failed
   at [email protected] (System.String message) [0x00001] in :0
   at Microsoft.FSharp.Core.PrintfImpl+StringPrintfEnv1[TResult].Finalize () [0x00012] in <5893d081904cf4daa745038381d09358>:0 at Microsoft.FSharp.Core.PrintfImpl+Final2@235[TState,TResidue,TResult,A,B].Invoke (Microsoft.FSharp.Core.FSharpFunc2[T,TResult] env, A a, B b) [0x0005a] in <5893d081904cf4daa745038381d09358>:0
   at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3266-1[T2,T3,TResult,T1].Invoke (T2 u, T3 v) [0x00001] in <5893d081904cf4daa745038381d09358>:0
   at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3253[T2,TResult,T1].Invoke (T2 u) [0x00001] in <5893d081904cf4daa745038381d09358>:0
   at [email protected] (System.String arg20) [0x00001] in :0
   at Microsoft.FSharp.Core.FSharpFunc2[T,TResult].InvokeFast[V] (Microsoft.FSharp.Core.FSharpFunc2[T,TResult] func, T arg1, TResult arg2) [0x0001f] in <5893d081904cf4daa745038381d09358>:0
   at FSI_0005.Build.run (System.String cmd, System.String args, System.String workingDir) [0x00059] in :0
   at [email protected] (Microsoft.FSharp.Core.Unit _arg2) [0x00089] in :0
   at Fake.TargetHelper+targetFromTemplate@209-1[a].Invoke (Microsoft.FSharp.Core.Unit unitVar0) [0x00000] in <5aa25359ccf1c534a74503835953a25a>:0
   at Fake.TargetHelper.runSingleTarget (Fake.TargetHelper+TargetTemplate`1[a] target) [0x00049] in <5aa25359ccf1c534a74503835953a25a>:0

weatherTile : Error in Chrome Console (Wrong html format)

Within the file src\Client\App.fs you have the following within the weatherTitle section

let weatherTile weatherReport =
  childTile "Weather" [
    Level.level [ ] [
      Level.item [ Level.Item.HasTextCentered ] [
        div [ ] [
          Level.heading [ ] [
            Image.image [ Image.Is128x128 ] [
              img [ Src(sprintf "https://www.metaweather.com/static/img/weather/%s.svg" weatherReport.WeatherType.Abbreviation) ]
            ]
          ]
          Level.title [ ] [
            Heading.h3 [ Heading.Is4; Heading.Props [ Style [ Width "100%" ] ] ] [
              (* Task 4.8 WEATHER: Get the temperature from the given weather report
                and display it here instead of an empty string. *)
              str ""
            ]
          ]
        ]
      ]
    ]
  ]

In the browser, it's complaining that you shouldn't have a Figure within a P tag. So, basically to fix the warning on my solution I removed the Level.heading[] [ part and Level.title [ ] [

So it gives something like this:

let weatherTile weatherReport =
  childTile "Weather" [
    Level.level [ ] [
      Level.item [ Level.Item.HasTextCentered ] [
        div [ ] [
          Image.image [ Image.Is128x128 ] [
            img [ Src(sprintf "https://www.metaweather.com/static/img/weather/%s.svg" weatherReport.WeatherType.Abbreviation) ]
          ]
          Heading.h3 [ Heading.Is4; Heading.Props [ Style [ Width "100%" ] ] ] [
            (* Task 4.8 WEATHER: Get the temperature from the given weather report
               and display it here instead of an empty string. *)
            str <| sprintf "%A %d℃" weatherReport.WeatherType (int weatherReport.AverageTemperature)
          ]
        ]
      ]
    ]
  ]

It's maybe not the perfect solution, but the errors disappear from the console.

Fable enabled

Suggested solution

API url only returns an empty list

https://data.police.uk/api/crimes-street/all-crime?lat=51.5074&lng=0.1278

Is there perhaps a more reliable development friendly API to pull from?

'Trying the Post Verb' instructions can lead to error in application

What is the problem?

In 6. Trying the POST verb under the section On the Client the instructions tell participants to use the json method on the response. In the case of the WeatherResponse type this will lead to a silent incomplete deserialization. The weather image will not be resolved correctly and the console will display an 404 Error because the discriminated union will yield an undefined value which is passed to the lookup call.

How can it be resolved?

The following code snipped shows an example of the error condition as well as a possible solution.

let! weatherResponse  = Fetch.postRecord "/api/weather" { PostCode = postcode } []
 // let! weather = weatherResponse.json<WeatherResponse>()   This would not work correctly
let! weather = weatherResponse.text () |> Promise.map ofJson<WeatherResponse> //This does

Another way would to use fetchAs directly with the right set of properties. I'm not entirely sure how I would put this into the instructions. It might be best to have another POST call that exemplifies the usage, can be copied and adjusted.

What do you think?

Issues surrounding global.json file

I ran the dojo in Southampton the other week, the dojo was mostly successful but the vast majority of attendees ran into issues surrounding the global.json file containing a mismatched .Net core version then the one installed on the user's machine. This was caused by people installing newer versions of .Net core than the version used in the dojo. The solution was to change the version number specified in the global.json file to the version specified when running dotnet --version outside of the project directory.

Given that the issue is solved by changing the version specified in the file, is there any point in keeping the global.json file since people will need to change the version number anyway?

Validation on post

Use Fulma validation for recording if the user entered an invalid postcode or if we got a bad result from the server.

System.Security.Cryptography.CryptographicException: The payload was invalid.

I followed the instructions and end up with this in the console:

warn: Microsoft.AspNetCore.Session.SessionMiddleware[7] Error unprotecting the session cookie. System.Security.Cryptography.CryptographicException: The payload was invalid. at Microsoft.AspNetCore.DataProtection.Managed.ManagedAuthenticatedEncryptor.Decrypt(ArraySegment1 protectedPayload, ArraySegment1 additionalAuthenticatedData) at Microsoft.AspNetCore.DataProtection.KeyManagement.KeyRingBasedDataProtector.UnprotectCore(Byte[] protectedData, Boolean allowOperationsOnRevokedKeys, UnprotectStatus& status) at Microsoft.AspNetCore.DataProtection.KeyManagement.KeyRingBasedDataProtector.DangerousUnprotect(Byte[] protectedData, Boolean ignoreRevocationErrors, Boolean& requiresMigration, Boolean& wasRevoked) at Microsoft.AspNetCore.DataProtection.KeyManagement.KeyRingBasedDataProtector.Unprotect(Byte[] protectedData) at Microsoft.AspNetCore.Session.CookieProtection.Unprotect(IDataProtector protector, String protectedText, ILogger logger)

How can this be fixed?
Mac OS 10.14.4

README needs amending, the project won't build on Mac

MacOSX
build.sh run returns: bash: build.sh: command not found

Replace Bing Maps with Google Maps (or other free alternative)

Query page

User should be able to enter a post code and get back data for all three APIs.

Wrong version of .Net core in readme

To install FAKE as a global tool, I think we need a later version of the .Net core tools installed

Support for Node 10

If you have Node 10.x build fails as below:

Error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Running build failed.
Error:
System.Exception: 'C:\Program Files (x86)\Yarn\bin\yarn.cmd install --frozen-lockfile' failed
at [e-mail](String message)
at FSI_0005.Build.run(String cmd, String args, String workingDir) in D:\Projects\SAFE-Dojo-master\build.fsx:line 28
at [email protected](Unit _arg2) in D:\Projects\SAFE-Dojo-master\build.fsx:line 37
at Fake.TargetHelper.runSingleTarget(TargetTemplate`1 target) in D:\code\fake\src\app\FakeLib\TargetHelper.fs:line 626

Upgrade to latest FAKE

The FAKE script should be updated to support FAKE 5 and remove the "manual" shelling out to dotnet etc.

A couple of minor issues

When working through this I noticed a few issues.

1. The code has a comment for task 4.4 which is now task 4.8
2. The abbreviation for sleet is s instead of sl

SAFE Dojo opens blank page with Microsoft.AspNetCore.Hosting.Diagnostics [2] Request returning 404

Hi, I've been trying to work through the SAFE dojo, but the launched site obtained from the cloned repo results in a request returning 404. I've tried running the app both in Safari and Firefox.

My MacBook (Intel-based) currently has the following

• .NET Core 3.1.404
• npm 6.14.10
• Node v14.15.4
  and I am developing in VS Code with the Ionide extension, as per the instructions given in the README.

I am able to run dotnet tool restorefollowed by dotnet fake build without any issues (Though one thing worth noting is npm did complain about some vulnerabilities which I fixed with npm audit fix) and the app is said to be hosted on localhost:8085, but whenever I launch the page Microsoft.AspNetCore.Hosting.Diagnostics [2] returns its request with 404 and as such I am only seeing a blank page.

From the instructions I should be seeing the search bar, but no such luck. I would assume a clean, newly cloned repo would function as intended so I am a bit at loss as to what would be wrong. I do see that since the time the instructions were written, the port was changed from 8080 to 8085, are there any other changes one need to take into account in order to run the dojo at this point?

Kind regards,

Glen

Visualisation

Basic map of location (bing / google).
Some chart for score etc.

Upgrade project to latest SAFE template features

We should upgrade the project to use latest SAFE Stack template features e.g. FAKE 5 etc.

Score a city

Provide a score (with some visualisation?) of a postcode or city.

Support full-stack debugging

Step 6, change endpoint to post is very challenging

Last exercise (change endpoint to post) was especially challenging. (6i) "Create a new PostcodeRequest record..." threw me off. Got it working without using that new record, and never figured its purpose.

"If using Visual Studio 2017, do NOT attempt to build directly in VS. You must use build.cmd to compile and run the application."

Is this something that can be fixed? Just seeing this will probably put off a bunch of people. Would be great if it can be made so you can just build inside VS

Yarn lock file not found

When building, Yarn has to resolve dependencies every time because it can't find a lock file.

Basic mashup page

App should be able to present a summary of data regarding the combined API.

Crime API

Help with using Decode.Auto.unsafeFromString

Hi,

In the instructions we're told to:

Notice that the return type is different though when using postRecord. To get the data returned from the server you can use a combination text method on the response and the Decode.Auto.unsafeFromString<'T> function to safely retrieve the typed result from the server

From the response I am able to call .text() which returns a Promise. Since I have absolutely no idea about Fable or JS Promises, and looking at the signature of Decode.Auto.unsafeFromString<'T>, I am now a bit stuck until I can fill the gap in my knowledge.

So, I tried to look at the "suggested-solution" branch but that actually uses .json which in the instructions we're told not to.

Can anyone shed some light on this?

Regards,

David

Fix security issues