Developing a File Sharing Platform using Azure! (PRACTICAL)

Hey! I’m back with another blog, we will be exploring Azure in this medium.

Simran: Hey! I have heard of Azure, and GCP, a lot but never explored them 😓, Can you tell me how to develop something on Azure?

Me: Yeah, sure once I have developed a file and message sharing platform using Azure, I can explain this.

Simran: Yeah, this feels interesting can you what all we can learn from this?

Me: We will see how we can create a group, send files/text msgs to Azure container, and how we can fetch and display them. We will also see how to list all conatiners/groups and manage them like deleting of groups and renaming them.

Simran: Wow! Finally you come with something I wanted to know from long time! Thank You! Can we start?

Me: Sure, Let’s start! So, first and foremost thing Azure account and education email so that you can get some of the free credits and Azure portal.

Me: Now let’s move on to this website[Azure for Students — Free Account Credit | Microsoft Azure] where you can fill on your credentials and register at the Azure portal, using this you will get FREE Credits.

Me: After registering you can log in to the Azure portal, now this is how our Azure portal looks like

Simran:

Me: In the Azure portal in this block, we will see how I used “Function app”, “Resource group”, “App Services” and “Storage accounts” these 4 features from the Azure portal to develop our file or message sharing platform.

1. Resource Group: We will create first a resource group that will hold all of this stuffs like our function or storage accounts etc. You can say the resource group is the root of the tree and the rest parts will be either function app or storage accounts or different notes acting like a child or the leaf nodes under this root node.
2. Functions App: Using the functions app we will deploy our function trigger which can act as an API kind of thing where we will send our request to the server what we want.
3. App Services: Using App Services we will use to deploy our API and set environment variables to be used in our Function App
4. Storage Account: Using storage accounts we can create containers where our messages and our files will be stored.

10 Steps to Follow:

We will have to follow these 10 steps to make our tasks done

1. We will create a resource group first of all, we need to write name of resource group what we want, and select a region then we will select Review and Create

2. We will create a Function App now, just we need to put a function app name and select our resource group, I chose Nodejs version 14, this may depend on one’s need, In hosting tab we need to write our storage app we need and click create new, This will create a Function App and a Storage App

3. We will create a Container inside our Storage App now, just we need to put a container name like here I have used genera, so this can act as public container and anyone can see contents inside this

4. Now We need to create a function inside our Function App, Let’s select HTTPTrigger Function, and paste the below code in the function file

5. Now you need to copy the function URL from the functions app, we will be using this to hit an API and fetch results.

6. Now we need to install some of the npm package so that we can run it smoothly. We need to select our Function App and go in Advanced Tools Section

7. Now from Debug Console we can select CMD, and go inside “site/wwwroot/HTTPTrigger1” folder, then we can start with these commands

npm init

npm i @azure/storage-blob

npm i parse-multipart

npm i file-saver

4

8. Now we need to set an environment variable “AZURE_STORAGE_CONNECTION_STRING” which we used in our code, we need to go to our storage account and select “Access Keys” Section, and select and copy Key1 connection string

9. We need to paste this key on our Function App inside Configuration

10. Ouff Finally we did this, we need to just make a request to this HTTPTrigger Function and our task is done.

We will create our final local html file to fetch/upload details make sure you replace HTTPTrigger Function URL

This is how our UI looks like with multiple sections

This is how we get responses after a function works properly

Me: Finally its done!

Simran: Good Morning! Are we done? 😅

Me: Sorry this was intensive task and need so much explanation, I skipped much but still I guess you learned how to do this? Hope u enjoyed!

Simran: Thank You! Finally I can work on Azure now! Thanks a LOT!

Me: Thank you everyone for reading this article! Do like if you like this! 😏