DEV Community

Cover image for Azure Trial Hackathon Submission : WordleLike
Chuong Tang
Chuong Tang

Posted on

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

Tech Stack

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
Enter fullscreen mode Exit fullscreen mode

Those lines fired up a scaffolded React App with a Vite dev server and...it's fast âš¡

Vite Run

Setting up MSAL for React Typescript:

MSAL Docs Step-by-step guides with great examples

Main engine is the AuthConfig.tsx

IAuthConfg
ClientID is obtained from App registration in Azure Portal

Client Id

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

Display ID

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

Azure build

Demo Link

Demo COnfetti

Top comments (0)