Azure Trial Hackathon Submission : WordleLike

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. Especially the newly launched MSAL for React

Submission Category:

Computing App Service 🚀

Link to Code on GitHub

Repo on Github.

PRs are always appreciated 🙌

Additional Resources / Info

Setting up frontend for UI build:

With VITE, 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 ⚡

Setting up MSAL for React Typescript:

MSAL Docs Step-by-step guides with great examples

Main engine is the AuthConfig.tsx

ClientID is obtained from App registration in Azure Portal

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

Deploy to Azure App Service using Visual Studio Code

There is a very thorough docs from Azure DevOps

1. Install VS COde extension

2. Set up GitHub + GitHub Actions

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

Demo Link