How To Deploy Angular 14 .Net 6 Web App To Azure FULL TUTORIAL!

thank you bro! i spend half day to deploy my web app and sql to azure. And i am going to deploy another one, much more difficult one. but that one totally match ur topic, SQL + ANGULAR + .NET. just love you >3 >3>3>3

sweet guy and a great programmer

Check your Instagram DM🙌🏽

I have some questions, would be nice if you check your instagram DMs because i am looking for some help - THANK YOU! And another wish from me: Could you please make a tutorial on authentication when youre creating an angular project? How you should architect it and so on...! (Email/password combo and third party authentication would be nice, thank you! :D)

This is a good short video of deploying Angular Dotnet app to Azure

Thanks Israel, that was extremely helpful!

Thanks, Israel!
How can use/config Redis in Azure? I have used Redis as a cache in my project.

BEST TUTORIAL EVER I SWEAR <3
thank you so much man... been struggling for a week with docker and this really helped me successfully deploy the application!

Awesome content, very useful for me.

One problem is reloading the pages when the routes are not index.
If you see
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
you need to add a web.config file with url reroutes to the azure site. ex

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

added to root through ftp , found in publishsettings file under ftp

This video is incredible amazing, keep it up, bro! you helped me on my current job! Much love from México, wey!

Great work mate

Thank you for the detailed tutorial. Very helpful. I want to ask a question: in your tutorial, you deployed your Angular and backend API in two separate Azure App Service. Can one Azure instance host both frontend and backend together?

Form india... Thank lot bro ...Keep Rocking 🔥🤘

Great tutorial! Thanks man.
I know that you can also upload the angular app to a storage account as a static website. What is the differences between these two approaches?? Is any of them cheaper? or what about performance? what is best?

thank you! very useful video. especially info about firewall rule for SQL database saved me alot of time! Thanks!

Thanks for sharing! It's really helpful.

that was exactly i was looking for .... great job thumbs up.

This was a great video

Great video! Thanks It was very helpful

how to deploye angular and .net code web api on iis ? can you please make a video on this ?

thanks for posting this awesome video and info on putting changes back to azure app or ci/cd

Wonderful, thank you for this detailed tutorial.
I have a question regarding billing. The only paid aspect I see is access to the SQL database, did you actually get about $5 billing? DTU billing is relatively complicated.

Nice job

Thanks mate, I love your charisma :D will try to do this in a second, lets see if it works :)

EDIT: It worked!! <3

That would be nice to have one different appSettings.json depending on the environnement and use "DefaultConnection" always and not hardcodding the connection string to prodConnection
Anyway, this is an excellent and complete tutorial ! Thank you very much !

Thank you for this tutorial, it's really helpful.
I had an issue when deploying the frontend part is that when I run the command ng build --configuration=production it creates the dist folder but it contains only assets folder and some js files, so that I can not deploy like you did in the tutorial since I don't have dist/appname.
Can you help me with that ?

Do we really need to recreate each table using sql query? Is it possible to do entity framework commands? (update-database)?

It's really helpful. Thanks

goattttttt

whats yearly cost of this about for small company?

HI sir
can you please share reference to set custom DNS in front end url

From Brazil: BEST TUTORIAL EVER, this is exactly what I looking for.Thanks a lot for the content and for the quality.

Hi Israel,

Do you have some video explaining how set this process by CI/CD resources on Azure devops?

Subbed. Great content. I have angular 17, .net 8 api with redis cache and mssql. Are there additional steps because of the redis cache?

This is the EXACT video I was looking for. Thank you very much my good sir. Hopefully everything still works in 2024 😅

Why do we have 2 webapps instead of 1? Cant we deploy both .NET API and Angular into same webapp?

THANK YOU!!

good and learn Hindi...

One of the best tutoriales i've ever seen, simple and straight to the poing, amazing!

Hello. Does this work in a blazor frontend?

Thank you for this tutorial, it helps me alot <3

I created my database tables using EF Core migrations CLI command: dotnet ef migrations add "Initial" -o "Data/Migrations" followed by: dotnet ef database update . . . how would I accomplish a similar objective in Azure?

Hope you guys found this video helpful! Don't forget to drop a Like & Subscribe!