In this part, we will use Azure Static Web Apps to host our client side that consume Azure Functions that we have built. I suggest you to install Azure Static Web Apps CLI. Azure Static Web Apps CLI will help you to develop your apps before it will be deployed. Other tools that I recommend to install:
Open new terminal. Go to azure-functions directory. Run func start --csharp.
Open new terminal. Go to azure-function-client, run swa start http://localhost:3000 --run "yarn start" --api-location http://localhost:7071
Your app is ready! Don't forget to update some configs. You can see at section.
Notes
You need to make sure to change:
msalConfig.ts
import*asmsalfrom"@azure/msal-browser";exportconstmsalConfig:msal.Configuration={auth:{clientId:'562c2405-0be6-4dcd-9172-e9fc6c681d17'// update this with your client id,authority:'https://login.microsoftonline.com/7c3aa68f-b3a1-415a-aa62-a6a97d4a12fc'// update this with your tenant id}};exportconstloginRequest={scopes:["openid","email","profile","562c2405-0be6-4dcd-9172-e9fc6c681d17/user_impersonation"// update this with your client id too],};
Update App.tsx
// another code ...constgetNote=useCallback(()=>{instance.acquireTokenSilent(loginRequest).then(result=>{constaccessToken=result.accessToken;console.log(accessToken);// update the URL with your azure function URLaxios.get("https://af-demo-berv-1.azurewebsites.net/api/GetToDoTrigger",{headers:{'Authorization':`Bearer ${accessToken}`}}).then(response=>{console.log(response.data);setNoteData(response.data);}).catch(error=>{console.error(error);})}).catch(err=>{console.error(err);});},[instance,setNoteData]);constaddNote=useCallback(()=>{if (isHaveActiveAccount&&message&&title){instance.acquireTokenSilent(loginRequest).then(result=>{constaccessToken=result.accessToken;console.log(accessToken);// update the URL with your azure function URLaxios.post("https://af-demo-berv-1.azurewebsites.net/api/CreateToDoTrigger",{message,title},{headers:{'Authorization':`Bearer ${accessToken}`}}).then(response=>{console.log(response);setOpen(false);getNote();Promise.resolve();}).catch(error=>{console.error(error);Promise.reject(error);})}).catch(err=>{console.error(err);Promise.reject(err);});}else{Promise.reject("Un-authorized or not fill data");}},[isHaveActiveAccount,message,title,instance,getNote,setOpen]);// another code ...
I still research about the Authentication. I'm not sure why personal account can't give the access token correctly. So I will get Unauthorized when access it, I need to use my Azure user account to access it. :(
Why you didn't use Azure Functions from Azure Static Web Apps? <- Not have any opinion, just want to separate it. :) I just "simulate" myself like some years ago before Azure Static Web Apps was released. I hope I will have enough time to write up about that too.
Short Video the Setup & Deployment Process
Thank you
Thank you for reading. Anyway, my code is still messy and I will try to update it next year. Stay tune!