Deploying a React Application to Azure Static Web Apps with SWA-CLI: A Hands-On Guide

Рет қаралды 3,890

AdiCloud

Күн бұрын

Пікірлер: 16

@thivananhduong990 Ай бұрын

omg you are so good. It works for the first time. Please do deploy with backend as well

@adiclouds 17 күн бұрын

BE should be deploy on some other services like app service or vm or instance apps etc

@olegtelushko 5 ай бұрын

Great video, straight to the point. Was able to deploy my astro project without a hitch. You, sir, made better documentation than the swi website themselves!

@adiclouds 5 ай бұрын

Appreciated bro. Thanks.

@destinyamba2952 19 күн бұрын

Worked for me

@adiclouds 17 күн бұрын

That's awesome

@ashokvaddevalli 4 ай бұрын

how to create environment in Azure Static Web Apps for specific branch?

@adiclouds 4 ай бұрын

It provides you prod and preview env. You can check this in the env blade. And for deployment, specify --env preview to deploy to preview env

@kayjee2 5 ай бұрын

I agree with @olegtelushko. Have been struggling with SWA before your vid. Maybe you could do one on how to safely handle env variables in a react project.

@adiclouds 5 ай бұрын

If you are deploying through bitbucket pipelines or github actions, you can use variables and secrets respectively. I will also look into other way and will let you know.

@kayjee2 5 ай бұрын

@@adiclouds Maybe a better approach and safer handeling of variabeles is the use of nextjs? But i see there are limitations in routing etc on Azure SWA

@adiclouds 5 ай бұрын

@@kayjee2 For routing, you have to add SWA config file at root folder. staticwebapp.config.json I think is the name of file. Here is the link: stackoverflow.com/questions/75698491/azure-static-web-app-not-respecting-staticwebapp-config-json

@kayjee2 5 ай бұрын

@@adicloudsYes i already knew that one thanks! For now I used the method in your vid, and put the keys for the header in the .env. For now this is ok, since the data requested from the API is not that interesting and will apply rate limiting and ip restrictions on the backend to prevent abuse. When I upgrade my project to production, i'll use nextjs as a secure backend to handle all that stuff and only serve static to the client. Would be great to have that stack running on SWA, but could also just run in container.

@kayjee2 4 ай бұрын

Thought i would get back to whoever struggles.. The solution is to build an azure function within his react app. You can deploy them together. You can use this function to do all kind of backend functions. You use the env variables in azure SWA, thus keeping all safe. Cheers!