Azure Trial Hackathon Submission : WordleLike 
Tags: azuretrialhack, azure, react, vite
Published: 2022-03-08 18:57:06

[Instructions]: # (To submit to the Microsoft Azure Trial Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
One of the great ways to learn any new tools is using them to build app. I've tried several cloud platforms for backend and server-less experiences. For this app, I decided to learn a new tech by diving into  [Microsoft Azure](https://azure.microsoft.com/en-ca/). Especially the newly launched [MSAL for React](https://devblogs.microsoft.com/microsoft365dev/msal-for-react-is-here/)


### Submission Category: 

Computing [App Service](https://azure.microsoft.com/en-us/services/app-service/) 🚀


### Link to Code on GitHub

[Repo on Github](https://github.com/chuongtang/wordlelike).

PRs are always appreciated 🙌

[Note]: # (Your repository must include a README)
[Note]: # (You must use and list a permissive license for your code: MIT, Apache-2)


### Additional Resources / Info


![Tech Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbrsq7f5rub2f75e40a5.jpg)

#### Setting up frontend for UI build:
With [VITE](https://vitejs.dev), initiating a development environment for React is as easy as 4 commands:

``` 
npm init vite@latest wordlelike -- --template react
cd wordlelike
npm install
npm run dev
``` 
Those lines fired up a scaffolded React App with a Vite dev server and...it's fast ⚡


![Vite Run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq12du138fcleau92o1y.jpg)

#### Setting up MSAL for React Typescript:
[MSAL Docs](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample#msaljs-for-react-typescript-sample---authorization-code-flow-in-single-page-applications) Step-by-step guides with great examples 

Main *engine* is the `AuthConfig.tsx`

![IAuthConfg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7352c89bi65dioa310o8.jpg)
`ClientID` is obtained from **App registration** in **Azure Portal**


![Client Id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70rleolo24m8bmjrbw9j.jpg)

There is no need to protect the `clientId` with an environment variable as it is exposed when the login client is called


![Display ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8kebrkk44n50wmyiwos.jpg)

#### Deploy to Azure App Service using Visual Studio Code
There is a very thorough docs from [ Azure DevOps ](https://docs.microsoft.com/en-us/azure/devops/pipelines/targets/deploy-to-azure-vscode?view=azure-devops#:~:text=Open%20your%20application%20folder%20in%20VS%20Code%20and,Search%20for%20Deploy%20to%20Azure%20extension%20and%20install.)

1. [Install VS COde extension](https://docs.microsoft.com/en-us/azure/devops/pipelines/targets/deploy-to-azure-vscode?view=azure-devops#install-the-extension)

1. [Set up GitHub + GitHub Actions ](https://docs.microsoft.com/en-us/azure/devops/pipelines/targets/deploy-to-azure-vscode?view=azure-devops#install-the-extension) 

1. `Build`, `commit` and `push` then **Azure Pipelines for GitHub** will handle all the magic


![Azure build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vgfmttc454gfo0kpydh.jpg)



[Demo Link](https://ambitious-ocean-0a556771e.1.azurestaticapps.net/)

![Demo COnfetti](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyuaxul0m4nrmus1wn4e.gif)



[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)