Running the CollabDays Benelux event on Azure Static Web App
Tags: webdev, azure, azurefunctions, github
Published: 2020-10-26 08:32:00

---
title: Running the CollabDays Benelux event on Azure Static Web App
published: true
date: 2020-10-26 07:00:00 UTC
tags: 
- webdev
- azure
- azurefunctions
- github
canonical_url: https://www.eliostruyf.com/recap-of-collab-days-benelux-running-an-event-on-azure-static-web-app/
---

This article recaps the CollabDays Benelux event that [BIWUG](https://biwug.be) and [DIWUG](https://www.diwug.nl) organized together and happened on the 24th of October. We held the event virtually due to Covid-19, like most of the events in 2020. We decided that we wanted to do this as a virtual event together around May/June timeframe to make sure we could let it happen.

Our initial plan was to book a meeting room (the Benelux war room) to communicate and coordinate the event. Unfortunately, due to the increasing number of Covid-19 patients in the Netherlands and Belgium, we had to change those plans a week before the event. We decided that it would be best that we would host it from two locations.

## Meet the team

Before I start giving some numbers, let me thank each team member for making this event a huge success. Running an event is not something you can do on your own. It takes a lot of effort from each one of us.

![The CollabDays Benelux team](https://www.eliostruyf.com/uploads/2020/10/collabdays1.png)<figcaption>The CollabDays Benelux team</figcaption>

Thank you [Karine](https://twitter.com/kboske), [Jim](https://twitter.com/Ptidaelus), [Rick](https://twitter.com/RickVanRousselt), [Thomas](https://twitter.com/ThomasVochten), [Maarten](https://twitter.com/maarteneekels), [Bram](https://twitter.com/bramdejager), and [Albert-Jan](https://twitter.com/appieschot).

![Group picture of the whole team](https://www.eliostruyf.com/uploads/2020/10/collabdays2.jpg)<figcaption>Group picture of the whole team</figcaption>

## Stepping away from Microsoft Teams

Maarten explained it pretty well in Discord yesterday:

![Why we were not using Microsoft Teams](https://www.eliostruyf.com/uploads/2020/10/collabdays3.png)<figcaption>Why we were not using Microsoft Teams</figcaption>

Going back to June, we outlined a plan to get the best community feeling during the event. Most of the attendees come to our event to connect with others and, of course, also to learn. That is why we wanted to go for Microsoft Teams meetings instead of Microsoft Teams Live events.

We figured out that this might create issues as attendees can accidentally start sharing or unmute themself. We experienced something else in other events because attendees do not join the meetings correctly and lose the ability to chat. Microsoft Teams Live events would solve the first issues, and so we formed a new plan.

Some time passed, and each one of us attended multiple virtual events. We all noticed that you do not get the community feeling we were aiming for with Microsoft Teams Live events. Besides that, the speaker’s experience is not always that simple for joining the right tenant and following up on questions. We had to think about how we could make our attendees feel more connected and provide an easy solution for our speakers to present their content.

## Going for Streamyard and Discord

During Ignite, [Luise Freese](https://twitter.com/LuiseFreese) and I were interviewed by Microsoft with a tool called Streamyard. I was impressed with its simplicity and learned that Microsoft uses it for other community events like Hacktoberfest. After a couple of meetings and tests with the team, we agreed that Streamyard would be the tool to use.

You can compare [Streamyard](https://streamyard.com/) to OBS running in the cloud, but a lot easier to configure and maintain. Plus, Streamyard allows you to stream to many sources like Youtube, Facebook, Twitch, and more.

> **Info**; The only downside we found is that videos in Streamyard are limited to 5min and 100mb. Our sponsor videos were about 6min and 250mb in size. To overcome this, we split all videos into two parts. Next time, we could create a PowerPoint that we keep rotating before/after each session on a VM.

To engage with our attendees and provide them a way to connect with the speakers and other attendees, we decided to use Discord. We went for Discord because it does not require you to have an account or application to start chatting.

## Bringing the experiences together

To make it as easy as possible for our attendees, we chose to create a website. The website we wanted to create needed to fulfill the following requirements:

- Easy to use
- Switching between channels/sessions
- View the schedule
- Speaker overview
- Sponsors overview
- Links to the Discord channels
- Links to the feedback forms
- Code of conduct
- And of course, it needed to be fast

> **Important**: Our website for the CollabDays Benelux can be found here: [https://collabdaysbenelux.eu](https://collabdaysbenelux.eu).

![The website couple of minutes before going live](https://www.eliostruyf.com/uploads/2020/10/collabdays4.png)<figcaption>The website couple of minutes before going live</figcaption>

### How did we create the website?

As a big fan of Static Websites, I choose to create the event website with React and host it on an Azure Static Web App.

The front-end is developed by using React and Tailwind CSS.

On the back-end, the website makes use of [Sessionize](https://sessionize.com/). Sessionize is the platform we in BIWUG use for all of our events to gather speaker submissions and create a schedule. The tool itself is excellent. It provides all the things you need for event organizers. On the website, we used the Sessionize APIs to visualize our schedule and speakers.

In the documentation, I read that data needed to be cached locally and be 100% sure that we would not get throttled or bringing the Sessionize APIs down. I choose to put an Azure Function in between to cache the data an extra time.

I created a `config.json` file that gets validated each minute on the client to perform changes on the website smoothly. Initially, I wanted to go for WebSockets, but as Azure Static Web Sites does not have this out-of-the-box available, I just went for a straightforward solution. This `config.json` has proven itself, as we could quickly push new alerts and update the channel/session links from Youtube.

Each change we did in the config took about 1-2 minutes before it was visible online.

![GitHub Actions flows during the event which were unnoticeable for our attendees](https://www.eliostruyf.com/uploads/2020/10/collabdays10.png)<figcaption>GitHub Actions flows during the event which were unnoticeable for our attendees</figcaption>

#### Whole technology stack

- React
- Tailwind
- TypeScript
- Azure Functions
- GitHub Actions
- Azure Static Web Apps
- Cloudflare

### Website changes during the event

The website ran without any issues the whole time, never did it failed us, and we even pushed a couple of changes based on feedback from our attendees. Here are the top three changes I can recall:

- Open external alert links in a new tab;
- Links to the schedule and speakers overview should not redirect the user to channel 1;
- Add a `next session` description in the channel overview.

## Let us talk about the numbers

The numbers are just crazy. The website held up on a huge load and kept performing very fast.

During the event, I posted the following screenshot from Google Analytics:

![Site statistics during the event](https://www.eliostruyf.com/uploads/2020/10/collabdays5.jpg)<figcaption>Site statistics during the event</figcaption>

After the event, we looked back at the number and asked ourselves if these numbers could be correct. A day after the event, I evaluated the numbers, and probably Google Analytics was not showing us the right numbers at that time. However, the final numbers are still high.

### Number of pageviews

In total, we had **123000** pageviews, which meant that our attendees used channel switching a lot.

![Total pageviews](https://www.eliostruyf.com/uploads/2020/10/collabdays6.png)<figcaption>Total pageviews</figcaption>

To be sure, I verified these statistics with the load on the Azure Web Apps, and there I saw a similar number of hits.

![Page hits on Azure Web App](https://www.eliostruyf.com/uploads/2020/10/collabdays7.png)<figcaption>Page hits on Azure Web App</figcaption>

### Unique number of people

Out of all these pageviews, we had **390** unique users on the website.

![Unique visitors per country](https://www.eliostruyf.com/uploads/2020/10/collabdays8.png)<figcaption>Unique visitors per country</figcaption>

### Busiest hour

The busiest hour was at 11 am, where we had a total of 135 attendees on the website. Followed by noon (104 attendees) and 10 am (101 attendees).

The number of attendees on each channel was equally spread.

### Azure Functions called

To give you an insane number. The Azure Function for retrieving the schedule and speaker details has received **one million** hits.

![One million Azure Function calls](https://www.eliostruyf.com/uploads/2020/10/collabdays9.png)<figcaption>One million Azure Function calls</figcaption>

### Discord

On Discord, we had 220 active members who wrote more than 1200 messages altogether.

## Thank you all

To wrap it all up, I want to thank each one of you that attended our event.

Thank each of the 21 speakers for showing up on time and presenting their valuable content to the attendees.

Each of our sponsors, because without their support, we could not make this event take place.

The fantastic team behind [BIWUG](https://biwug.be) and [DIWUG](https://www.diwug.nl). Finally, we did something which we wanted to do for years. We organized an event together and did not have to agree where it would occur, as there was only one option.

_I hope to see you all next year, hopefully, in real life. Stay safe!_

 ![](https://www.eliostruyf.com/recap-of-collab-days-benelux-running-an-event-on-azure-static-web-app/)