Practice English Speaking&Listening with: Creating web apps with Azure Static Web Apps | IGL117

Normal
(0)
Difficulty: 0

>> ALL RIGHT. AND I'M JOINED NOW

BY JENN LOOPER, WHO IS CLOUD DEVELOPER

ADVOCATE LEAD AND THE ACADEMIC TEAM,

SHE'S MY COLLEAGUE AT MICROSOFT.

I'M SO EXCITED TO GET TO TALK TO

YOU, JENN, ABOUT CREATING WEB APPS

WITH AZURE STATIC WEB APPS. YES.

>> YES! I'M SO EXCITED TO BE HERE.

VERY PLEASED TO BE ABLE TO TALK

ABOUT SOMETHING THAT'S REALLY EXCITING

AND THAT I USE CONSTANTLY. >> I

USE IT CONSTANTLY, TOO, IT'S ONE

OF MY FAVORITE NEW THINGS. AND I'VE

BEEN USING IT SINCE THE PREVIEW

WAS ANNOUNCED BACK AT BUILD AND

I'VE BUILT, I DON'T EVEN KNOW HOW

MANY WEB APPS AND WEBSITES, USING

THE TOOL. BUT THIS IS SOMETHING

THAT I THINK A LOT OF PEOPLE DON'T

KNOW HOW EASY IT IS TO KIND OF GET

STARTED AND WHAT THEY CAN DO WITH

IT. I KNOW THAT YOU HAVE A PRESENTATION

THAT YOU HAVE DONE WHERE YOU'RE

GOING TO WALK US THROUGH WHAT THE

APPROACH IS OF CREATING A WEB APP

WITH AZURE STATIC WEB APPS. WHY

DON'T YOU GO AHEAD AND GET STARTED

AND I'M GOING TO BE ASKING YOU SOME

QUESTIONS AS YOU GO THROUGH THAT

SO THAT EVERYBODY WATCHING AT HOME

CAN KNOW HOW GREAT THIS IS. >> SOUNDS

GREAT. OKAY. I'M REALLY EXCITED

TO TELL YOU ABOUT SOMETHING THAT

WE JUST SAID, WE USE A LOT, AND

I'M HOPING THAT A LOT OF PEOPLE

WILL DISCOVER THIS AND REALLY ENJOY

USING IT AS MUCH AS WE DO. SO I'M

HERE TO TALK TODAY ABOUT AZURE STATIC

WEB APPS. I'M A CLOUD DEVELOPER

ADVOCATE LEAD ON THE ACADEMIC TEAM

WHICH MEANS THAT I GET TO INTERFACE

WITH EDUCATORS AND STUDENTS AND

LEARNERS OF ALL TYPES WHO ARE INTERESTED

IN SKILLING UP, IN ALL THINGS, AZURE.

BUT ONE OF THE THINGS WE'RE REALLY

EXCITED TO RELEASE AT BUILD WERE

AZURE STATIC WEB APPS. SO WHAT ARE

THESE THINGS THAT WE'RE GOING TO

TALK ABOUT? IT'S A NEW SERVICE FROM

MICROSOFT. AND IT'S A REALLY SLICK

NEW WAY TO BUILD AND DEPLOY AND

HOST YOUR MODERN WEB APPS. >> WHAT

DO YOU MEAN BY -- WHAT DO YOU MEAN

BY MODERN WEB APP? BECAUSE THAT

COULD BE A LOT OF THINGS. WHEN YOU

SAY MODERN WEB APP, WHAT ARE YOU

TALKING ABOUT? >> I HAVE A LITTLE

-- I'M A JAVASCRIPT DEVELOPER, I

LOVE ALL THE FANCY NEW FRAMEWORKS,

EVERYTHING THAT COMES DOWN THE PIKE,

I'M ON IT. SO IF YOU'RE INDEPENDENT

IN BUILDING A STATIC SITE USING

-- JUST A STANDARD OF UJS SITE OR

REACT, ANY OF THESE MODERN, STATIC

OR NOT STATIC JAVASCRIPT FRAMEWORKS,

IF YOU NEED A QUICK AND FAST WAY

TO DEPLOY THESE WEBSITES, THIS MAY

BE THE SERVICE FOR YOU. I'M EXCITED

TO TALK TO YOU ABOUT IT. >> AWESOME.

SO WE ARE TALKING MODERN WEB APPS,

WE'RE TALKING ABOUT JAVASCRIPT IS

WHAT YOU'RE SAYING, OKAY. SO HOW

DO PEOPLE GET STARTED? WHAT'S THE

FIRST STEP? >> COOL. SO THE GREAT

WAY TO GET STARTED, THERE'S A COUPLE

WAYS. YOU CAN GO STRAIGHT TO THE

PORTAL AND CREATE A STATIC WEBSITE

FOR YOURSELF, OR THERE IS A VSCODE

EXTENSION THAT I HAVE A COUPLE SLIDES

LATER WE CAN TALK ABOUT HOW ALL

THE DIFFERENT WAYS YOU CAN GET STARTED,

BUT WHAT I DO, I START IN VISUAL

STUDIO CODE AND START WORKING ON

MY WEBSITE AND THEN I DEPLOY IT

UP TO THE SERVER TO CREATE THIS

HOSTED STATIC WEB APPEAR. MOST OF

THE TIME I'M BUILDING IN VJS BUT

YOU CAN HAVE A WAY TO MANAGE YOUR

API RIGHT WITHIN THE SYSTEM. IN

THIS NEXT SLIDE I THOUGHT WE COULD

EXPLORE -- >> LET'S TAKE A LOOK.

>> I'M JAVASCRIPT DEVELOPER, I HAVE

A WEB APP. PREVIOUSLY I WOULD GRAB

APP SERVICES AND POP IN SOME AZURE

FUSIONS BUT NOW I DON'T HAVE TO

DO THAT, I CAN USE STATIC WEB WEB

APPS WHICH I CAN CREATE MY FRONT

END ARCHITECTURE IN THE SAME PLACE.

I HAVE TWO FOLDERS IN MY ROOT FOLDER.

ONE IS APP, ONE IS API, AND IN MY

APP FOLDER YOU CAN SEE ALL THIS

VJS CODE MEANT FOR NEW OF YOUR DEVELOPERS,

IT LOOKS VERY STANDARD, YOU HAVE

YOUR SOURCE CODE AND YOUR BUILT

CODE WILL EVENTUALLY GO INTO A FOLDER

TO BE USED BY THE SERVICE TO DEPLOY.

AND UNDER MY API FOLDER I'M PUTTING

ALL THE FUNCTIONS THAT I USE AS

THE BACK END. THIS IS EXCITING TO

ME BECAUSE PREVIOUSLY -- I'VE BEEN

AT MICROSOFT A YEAR AND PREVIOUSLY

I HAD NEVER ACTUALLY TRIED TO BUILD

AN API ALL BY MY OWN SELF. SO I

WAS ABLE TO DO THAT. >> THAT'S AWESOME.

>> AND THIS MAKES IT EASY BECAUSE

IT'S ALL BUNDLED TOGETHER FOR YOU

IN A GOOD SOLID ARCHITECTURE. >>

VERY COOL. >> YOU ADD YOUR FILES,

YOUR FRONT END FILES TO THE APP

FOLDER. YOU DON'T HAVE TO CALL IT

THAT. YOU CAN CALL IT FRONT END

TO BACK END OR ANYTHING. YOU CAN

ADD YOUR OTHER FILES INTO YOUR API

FOLDER, SO THAT WILL BE WHERE YOUR

FUNCTIONS ARE STORED. >> VERY COOL.

THEN YOU'RE GOING TO BUILD IT OUT,

USE VISUAL STUDIO CODE OR WHATEVER

WAY YOU WANT TO EDIT YOUR CODE AND

YOU'RE GOING TO BUILD IT OUT IN

YOUR EDITOR AND THEN WHAT DO WE

DO? WHAT'S THE DEPLOY PROCESS LIKE?

>> RIGHT. YOU CAN USE ANY EDITOR

YOU LIKE BUT STRONG PREFERENCE IN

MY OPINION FOR VISUAL STUDIO CODE

BECAUSE IT HAS AN ASSUME EXTENSION,

I DON'T THINK I HAVE A SCREENSHOT

BUT IT HAS AN EXTENSION WE'RE ACTIVELY

WORKING ON BUILDING IT OUT TO MAKE

IT AWESOME SO YOU CAN USE THIS EXTENSION

TO HOOK UP YOUR FRONT END RIGHT

INTO THE SERVICE AND DEPLOY FROM

VISUAL STUDIO CODE. I DON'T THINK

I HAVE ANY SCREENSHOTS. >> THAT'S

GOOD FOR PEOPLE TO KNOW. IF YOU'VE

USED VISUAL STUDIO CODE BEFORE,

YOU ARE FAMILIAR WITH THE EXTENSIONS

PEOPLE CAN USE TO DO STUFF LIKE

THIS. IF YOU HAVEN'T USED VISUAL

STUDIO CODE, YOU SHOULD BECAUSE

IT'S ASSUME, AMAZING AND FREE, AND

BECAUSE OF EXTENSIONS LIKE THIS,

THE TEAM IS WORKING ON. >> YEAH.

BUT I THINK ANOTHER REALLY POWERFUL

THING IS THAT YOU CAN REALLY WORK

LOCALLY. IT'S ALL GREAT TO BE, YOU

KNOW, HAVING A WONDERFUL HOSTED

ENVIRONMENT BUT YOU CAN ALSO BE

WORKING LOCALLY WITH YOUR STATIC

WEB APP. THERE'S AN EXTENSION, AN

EMULATOR THAT WE'VE BUILT WITHIN

OUR TEAM AND YOU CAN TRY THIS OUT

AND RUN YOUR BACK END AND FRONT

END ALL AT THE SAME TIME, OR YOU

CAN GO AHEAD AND USE VISUAL STUDIO

CODE TO RUN YOUR BACK END ON THE

API FOLDER AND THEN YOUR APP FOLDER

AT THE SAME TIME SO THAT YOU'RE

RUNNING A LOCAL API, WHICH IS REALLY

POWERFUL AND SOMETHING I HAD NEVER

DONE BEFORE. I'M KIND OF EXCITED.

>> I LOVE THAT. AND WHEN YOU'RE

TALKING ABOUT ROUTING, I SEE ON

YOUR NEXT SLIDE, THIS IS AN IMPORTANT

THING BECAUSE WHEN YOU'RE BUILDING

AN APP, YOU HAVE DIFFERENT URLS,

DIFFERENT ROUTES, AND THERE ARE

DIFFERENT WAYS THAT YOU COULD GO

ABOUT DOING THIS WITH DIFFERENT

FRAMEWORKS AND WITH DIFFERENT APPROACHES

TO BUILDING APPS. SO WHAT'S THE

PROCESS LIKE WITH AZURE STATIC WEB

APPS? >> SO, ONE OF THE TRICKIEST

THINGS WITH DEALING WITH STATIC

WEB APPS, WHICH IS BASICALLY SINGLE

PAGE APPS, THEY HAVE A DIFFERENT

WAY OF ROUTING AND YOU'RE INJECTING

CODE INTO YOUR ROUTES AS YOU GO

ALONG AND YOU'RE NAVIGATING BACK

AND FORTH SO YOU DON'T GET THAT

PAGE REFRESH. IT'S A DIFFERENT TYPE

OF EXPERIENCE. A LOT OF HOSTERS

AND HOSTING SYSTEMS DON'T HANDLE

IT PARTICULARLY WELL. SO THE GREAT

THING IS THAT FINALLY, WITH AZURE

STATIC WEB APPS WE HAVE A REALLY

CLEAN WAY TO HANDLE THAT. WHAT YOU

NEED IS THIS LITTLE FILE, ROUTES

JSON, FOR ME, AS A DEVELOPER, I

POP IT INTO MY PUBLIC FOLDER WHICH

ALLOWS ME TO ENUMERATE THE ROUTES

AND PROTECT THEM WITH SOME GUARDS

AGAINST THESE IF THERE ARE CERTAIN

ROUTES THAT NEED TO BE PROTECTED

FOR VARIOUS USERS. THIS IS JUST

SOMETHING THAT HELPS THE SERVICE

KNOW WHAT ROUTES TO WATCH FOR. AND

CAN HELP YOUR APP PERFORM THAT MUCH

BETTER. SO THAT'S A REALLY GOOD

THING TO BE ABLE TO DO. ROUTES ARE

ALWAYS -- I DON'T KNOW WHY BUT THE

ROUTER IS ALWAYS THE WORST THING.

>> THE CHALLENGE, TOO, IS THAT THIS

ALSO HELPS YOU NOT HAVE DEAL WITH

SO MUCH STUFF ON THE DNS END AND

TO HAVE TO DO THINGS FROM THAT CONFIGURATION

STANDPOINT, WHICH SOME PEOPLE LOVE

TO DO THAT. ME, I MUCH PREFER TO

WRITE CODE, LIKE AS A -- BUILD MY

WEB APP RATHER THAN HAVING TO THINK

ABOUT, OKAY, WHAT ARE MY DNS SETTINGS

AND WILL THIS LOAD THE RIGHT WAY

AND IS MY URL STRUCTURE GOING TO

BE CORRECT AND ARE THE RIGHT PEOPLE

GOING TO BE ACCESS THIS BUT THE

WRONG PEOPLE NOT GOING TO BE ABLE

TO ACCESS THIS. SO THAT MAKES IT

REALLY EASY, TOO. >> YEAH, ABSOLUTELY.

AS A FRONT END DEVELOPER, WE JUST

DON'T WANT TO -- WE WANT TO HAVE

IT ALL CLEAN AND TIDY RIGHT HERE.

SO ON THE BACK END, YOU'RE USING

SOMETHING THAT YOU MAY HAVE ALREADY

USED, YOUR AZURE FUNCTIONS, AND

YOU'RE USING THOSE RIGHT WITHIN

YOUR API FOLDER. I'VE BEEN BUILDING

UP AN APP FOR A MUSEUM RECENTLY

AND I HAVE A LOT OF FUNCTIONS TO

MANIPULATE MY COSMOS DATABASE. WHENEVER

I NEED SOMETHING TO HAPPEN, I CREATE

MY FUNCTION, I HOOK IT UP INTO THE

FRONT END AND THEN IT'S READY TO

GO AND IT ALL DEPLOYS WITHIN THIS

SYSTEM. SO YOU DON'T HAVE TO MANAGE

A SEPARATE FUNCTIONS APP AND A VAT

WEB APP. IT'S ALL NICE AND CLEAN

AND TOGETHER AND YOU KNOW WHERE

EVERYTHING IS. >> THAT'S AWESOME.

SO YOU'RE TALKING ABOUT YOUR FRONT

END AND YOUR BACK END STUFF, AND

LET'S TALK A LITTLE BIT ABOUT HOW

PEOPLE CAN DEPLOY BECAUSE IN ADDITION

TO DOING THIS, OBVIOUSLY FROM WITHIN

VISUAL STUDIO CODE, IF THAT'S WHAT

YOU WANT TO DO, YOU CAN ALSO, USING

VERSION DEPLOY, YOU CAN CONNECT

THIS WITH GITHUB AND DEPLOY AND

THEN HAVE IT KIND OF AUTO UPDATE

EVERY TIME YOU PUSH TO YOUR GITHUB

REPOSITORY AS WELL, IS THAT CORRECT?

>> ABSOLUTELY. SO THE ARCHITECTURE

IS BASICALLY RELYING ON GITHUB ACTIONS,

AND I HAVE A SLIDE -- WELL, THE

SLIDE I'M SHOWING NOW SHOWS THE

DEMO THAT I HAVE AND YOU CAN ALWAYS

CHECK THIS OUT. BUT THE DEPLOY SITUATION

IS REALLY NICE BECAUSE WHEN YOU

USE THIS EXTENSION, WHICH ACTUALLY

I DO HAVE A VIDEO HERE, TO CREATE

-- TO HOOK UP YOUR FRONT END AND

BACK END CODE TO YOUR AZURE STATIC

WEB APPS, IT'S GOING TO CREATE FOR

YOU A GITHUB ACTION FILE, AND THEN

THAT WILL HELP MANAGE THE DEPLOYMENTS

AS A CONTINUOUS DELIVERY AS YOU

GO ALONG. SO EVERY TIME YOU PUSH

TO GITHUB, YOU'LL HAVE A NEW BUILD

DONE. IF THERE'S A PR, THAT WILL

CREATE A SEPARATE STAGING ENVIRONMENT

TO TEST IT. THAT'S A LITTLE ICING

ON THE CAKE. >> THAT'S REALLY NICE,

BECAUSE BASICALLY HOW THIS WORKS,

IS THAT IF YOU'RE SETTING THIS UP

IN THE PORTAL, YOU'RE POINTING IT

TO A GITHUB REPOSITORY OR YOU'RE

CREATING ONE, AND ANY TIME, WHAT

YOU'RE SAYING, THERE'S A GITHUB

ACTION THAT WILL BE WATCHING FOR

CHANGES AND ANY TIME IT SEES A CHANGE

IT WILL AUTOMATICALLY RUN THAT BUILD

SCRIPT SO THAT IT'S DEPLOYED. BUT

FOR PRS, WHAT YOU'RE SAYING IS IT

WILL CREATE ITS OWN STAGE GO PLACE

SO YOU CAN TEST THINGS FIRST WITHOUT

THINGS BREAK LIVE IN PRODUCTION

, WHICH NO ONE WANTS. >> EXACTLY.

HERE'S WHAT YOUR GITHUB LOOKS LIKE.

WE ALWAYS FORGET TO CLICK ON THIS

BUT HERE THEY ARE. EVERYBODY CAN

SEE WHAT'S GOING ON AND IF THERE'S

ANY KIND OF BREAKAGE, YOU CAN ALWAYS

WATCH FOR THAT. THAT'S A REALLY

HELPFUL WAY OF DEVELOPING IN PUBLIC,

AND ALL YOUR TEAM CAN WATCH WHAT'S

GOING ON. THIS IS A NICE FEATURE.

AND HERE'S AN EXAMPLE OF WHAT THAT

FILE LOOKS LIKE. YOU BASICALLY TELL

IT WHERE THE API FOLDER IS, WHERE

YOUR APP FOLDER IS, AND THEN YOU

CAN JUST WATCH FOR THE CONTINUOUS

DEPLOYMENT. IF YOU WANT TO TAKE

A LOOK AT THE DEMO I BUILT, IT'S

AN APP TO GIVE YOU AFFIRMATIONS

AT AKAMS MY-AFFIRMATIONS, IT HAS

ONE ROUTE AND ONE API CALL TO GET

A LITTLE AFFIRMATION FOR YOURSELF.

WE NEED THAT. >> WE ARE RUNNING

OUT OF TIME. I WISH THAT WE COULD

SPEND MORE TIME LOOKING INTO THIS

BUT WHERE CAN PEOPLE GO TO LEARN

MORE AND GET STARTED WITH AZURE

STATIC WEB APPS? >> WHAT I WANT

TO DO IS POINT YOU AT THIS SLIDE

RIGHT HERE, AND JUST THE BOTTOM

LINE IS THAT AZURE STATIC WEB APPS,

A DEVELOPER'S DREAM COME TRUE WITH

AM THESE DEPLOYMENTS, WORKS GREAT

WITH YOUR JAVASCRIPT STACK. CHECK

OUT THIS WEBSITE, AND YOU CAN GO

THROUGH A BEAUTIFULLY DESIGNED LEARN

MODULE BY JOHN AND FRIENDS AND TAKE

A LOOK AT HOW TO LEVERAGE THE SERVICE

FOR YOURSELF. >> I LOVE IT. THANK

YOU SO MUCH, AND EVERYBODY AT HOME,

CHECK OUT AZURE STATIC WEB APPS

BECAUSE IT'S A GREAT WAY TO BUILD

WEB APPS AND WEBSITES. THANK YOU,

JENN. . >> ADD A SOMBRERO. >>

AND WE STARTED HANGING OUT WITH

The Description of Creating web apps with Azure Static Web Apps | IGL117