Skip to content

Latest commit

 

History

History
147 lines (89 loc) · 12.2 KB

Azure-Instructions.md

File metadata and controls

147 lines (89 loc) · 12.2 KB

Introduction

The goal of this lab is to create your very own resume and publish it as a public website. For this you are going to use Azure serverless technologies.

The solution will look similar to the following diagram. You will use Azure Storage static website storage to publish your static site.

Azure Lab Overview

Check out the Darth Vader example resume website if you want to see it in action.

If you find any ambiguities, errors or typos, please open an issue. Or even better, correct the relevant files and create a pull request 😉

Get familiar with Microsoft Azure Cloud

If you want to get familiar with essential Azure concepts and services. There are plenty of free training sessions available on Microsoft Learn or Youtube. You will need a (free) Azure account for this.

Login with your Azure credentials and get familiar with the Azure console.

Let the teacher know if you were able to login and browse the Azure portal. Check out this guide which will help you to get started with the Azure portal.

Step 1 - Create your HTML resume

First of all you need a resume. Some great examples of static websites built with HTML and CSS can be found here. All the templates you find there are 100% Free under the Creative Commons license. This means you may use the templates but you need to give HTML5 UP credit for the design. There is a note in the footer section of each template that mentions HTML5 UP and a corresponding comment in the index.htmlfile. Please do not remove those attributions or be sure to check out Pixelarity which offers attribution-free usage of the template in exchange for a small amount of money.

This lab is based on the Read Only template from HTML5 UP so it is recommended to use this one. The template is optimized for a personal website and contains a simple contact form which you are going to use later on.

For this lab we will use a a slightly modified version of the above mentioned template and adopt it to represent your resume. You can download this template from this github repository.

The following modifications were added to the template to match the requirements for this lab:

  • To make the contact form work, some JavaScript magic which sends the form input to the Azure Function is needed. Therefor a JavaScript function was added which will post the message from the contact form to your Function.
  • The form definition was slightly modified to call the sendMessage function when a user submits the form
  • All form fields are configured as required. When present, this attribute specifies that an input field must be filled out before submitting the form
  • The contact.js JavaScript file containing the sendMessage function is included in the index.htmlfile
  • The form.cssCSS file containing the formatting for the form success message is included in the index.htmlfile

You might want to add a profile pic and some basic information about you. Adjust the index.html file accordingly and replace the images in the images folder if you want to. To check out your work you can launch index.html in your browser on your local machine.

To modify the template you can use whatever text editor you have. There are plenty of options out there which are free to use. Two great options to use are:

Don’t spend too much time on your resume. It just serves as an example and you can still tweak it later on when it is online.

Step 2 - Deploy your resume online

Deploy your resume online as an Azure Storage static website.

You might want to complete the following training sessions to get some basic understanding of Azure Storage Storage Service before starting with the actual deployment.

Whenever you are ready, start creating your resources. You can use this walkthrough to get started with static website hosting on Azure Storage. The afore mentioned guide requires you to first create an Azure Storage Account. Use this walkthrough to create an Azure Storage Account.

🚨 Some hints regarding the walkthrough:

  • There is no need to change default settings for Networking, Data protection and Advanced options
  • Use index.html and error.html for your index and error document.
  • It is easier if you use Azure CLI or PowerShell to upload the website files. This way you can upload entire folders. Get the Azure CLI from here

Document the resources you created and let the teacher know the Static Website endpoint URL where your resume website is available.

If your resume is available online you can add a custom error.html document to further personalize your website.

Step 3 - Create a SendGrid Account

Now that you published your resume, you need a way to get in contact with you. This is where SendGrid comes into play. SendGrid is a flexible and scalable email service that enables you to send mail from within any application. With the SendGrid free tier you can send up to 100 emails/day for free.

Setting up SendGrid is quite simple:

Step 4 - Create your first Azure Function

Deploy an Azure Function to be able to send emails from the website contact form. The documentation Azure Storage static website.

You might want to complete the following training sessions to get some basic understanding of Azure Storage Storage Service before starting with the actual deployment.

Whenever you are ready, start creating your resources. You can use this walkthrough to create your first function using the Azure portal. Test the function as outlined in the walkthrough to make sure everything works as expected before continuing with the next steps

🚨 Some hints regarding the walkthrough:

  • Choose Node.JS as your runtime stack and Windows as operating system

Step 5 - Send email using your Azure Function and SendGrid

You successfully deployed an Azure Function and a SendGrid account. Now it is time to connect those two services to be able to send emails using your Azure Function.

Modify your the existing function so that it can process the form output from your website contact form and send an email using SendGrid. You will need to make the following changes to your Functions

  • Add the SendGrid output binding to your function. Make sure you use the SendGrid API key generated in the previous steps
  • Instead of using the function code provided in the tutorial, get the code from this Github repository.
  • Make sure you change the sender and recipient address to match with the email address you registered with SendGrid

Once you changed the function code accordingly, you can test the function with the following input data

{
  "name": "Hans Meier",
  "subject": "Anfrage",
  "email": "[email protected]",
  "message": "Hallo Velo"
}

🚨 Some hints regarding the walkthrough:

  • Make sure that you use the same parameter name as defined in the SendGrid Output Binding (Message Parameter Name). If you leave it default this should be message

Step 6 - Make the contact form on your website work

You are almost done! Just some minor changes and your are done:

  • Add the URL of your Static Website Storage Account to the CORS Settings of your Function App. This is necessary because the function is called from another origin - your resume website. See What is CORS for more detailed information about CORS.
  • Add the URL of your function endpoint to contact.js to make sure the correct function is called when a user sends you a message

Now you can test the contact form of your static website.

Fill the form with some sample data and wait for the email to arrive in your inbox. You can use the Chrome Developer Tools to check what is going on when submitting the form.

You should see a nice green success message if your form was submitted successfully.

Email sent successfully

And in your inbox you should see a new message.

Email message example

🥳 Congratulations, you successfully completed this lab and created your own resume website based on serverless technologies!

Bonus tasks