My Microsoft colleagues Burke Holland and Cecil Phillip built a very useful application called 'The Urlist' using a serverless approach with Azure Functions and Cosmos DB. They presented this app in a Build 2019 session and of course they open sourced everything. This is great because then I can learn from it and maybe in return add something new to it. But first I need to get it up-and-running on my own laptop (and Azure subscription). So, let's dive in (head first)! 

If you want to follow along, I highly recommend you read the article I linked to above first. As said, the source code for the application is available at https://github.com/burkeholland/the-urlist. If you open that link in your browser, GitHub will show you the readme.md for the project straight away. The readme points to two other links which help you to get the frontend and backend parts of the app running in your local environment. Now, it could be me, but I did not end up with a running application by just following those two readme's. Here's what I changed to get to the up-and-running state:

One of the first things I noticed when I opend the code in Code (by using the .code-workspace file) was that the Vue.js Frontend workspace folder was empty. The fix for this is easy. Just change the line

"path": "Vue.js Frontend"

to

"name": "Vue.js Frontend",
"path": "frontend"

in the .code-workspace file. There is already a PR submitted for this change.

The second issue I ran into was that the backend code wouldn't compile. It turned out that the SDK that is configured in the global.json file (2.2.105) was not installed on my machine. After changing it to 2.2.300 the code compiled fine.

I then wanted to run the 'SaveBundle' command from Postman (as described in the backend readme.md). Unfortunately that replied back with a 500 server error. After investigating I found that this was caused by the fact that I had created the database ok through the Azure portal, but it was (of course) still completely empty. The code in SaveLinks.cs did not know where to put the data. To fix this I added the CreateIfNotExists = true attribute to the SaveLinks method in that file. This way the necessary work in the database is automatically done when the structure is not there. After adding this the command ran fine. It's not the best  fix possible I think, because it requires running the Postman part of the readme. Let me know in the comments if you know of a better way to fix this.

After installing only a 'few' npm packages, I fired up the frontend. The site came up and looked exactly like the live version. Succes? Well, not quite yet. I could add links but pulling up the Developer Tools in the browser showed a lot of errors. All were in one way or another related to CORS. The error messages were a bit cryptic but a 'withCredentials' property was mentioned in some of them. I used this for a search through the codebase and found this property (only once)  set to true in the api.service.ts. I set it to false, tried again and all the errors disappeared.

I'll contact Burke and Cecil to see if/how these changes should/can be applied to the main repository. I also have an idea for some new functionality, but I'll leave that for another post.

Hope this helps!

Comments


Comments are closed