all right here's what we're going to do
I have a
plan wow it's an echo that's cool all
right when people walk in every was
going to turn around and say
hey we not going to do
that okay well let's get started thank
you for coming today it's Friday Friday
the last day of the conference it's kind
of sad but uh hopefully your brains are
full of all kinds of good stuff uh I'm
going to be talking about front-end
things uh with asp.net minimal API um I
don't do linear narrative um it's kind
of hard with a talk like this I'm going
to wander all over the place but I'm try
and keep us on a path but what I I gave
this talk in Oslo the reason I'm saying
all this is the Osa talk was a lot of
slides because I had a lot to cover but
I decided for this one because we're
doing a festival thing that that it
would be kind of fun to just go for it
and make it interactive so if you have
any questions can't really see you but
just shout them out I know I'm in
Scandinavia but just pretend that you're
in Australia and you just interrupt me
anytime you
want um my goal for today is that you
learn at least five things and it
doesn't have to do with FR be doesn't
have to do with front-end stuff or
asp.net but just something maybe you'll
pick up a little tool tip maybe you'll
pick up a little practice something with
view but hopefully you're going to walk
out of here with five things uh Having
learned them so what I'm going to talk
about today is this thing right here
this is the asp.net
view3 whatever you know Microsoft naming
it's hard for me to even remember the
view starter template for asp.net
minimal API and who knows what starter
templates are I'm assuming that you all
know what net is um when you do net new
you can choose from a list of things if
if you want to get off the ground you
can make your own templates I work at
Microsoft I'm a developer advocate so my
job is to do things like this uh and so
what this is is a starter template with
Vue and asp.net minimal API but then me
being me I decided to take it 10 extra
steps and try and get you off the ground
and then somewhere into your build
process without having to delete a ton
of
code um if you want to play along please
do uh wh out your laptops this is easy
to do you can actually deploy a site to
azer before the end of the talk I know
I'm going to um believe it or not in
fact I'm going to do that let's see
right
now well I'm not going to deploy right
now but I'm going to get into the code
so where are we all
right so I'm on to Mac obviously this is
iterm 2 and here we go this is iterm 2
and I have right off the bat I have a
fun little tool to show you let us
install the template if we want to it's
going to be net
new install view. web. Starter and by
the way that little tool that you just
saw if I do that this is rad this is a
tool called fig. unfortunately it's for
Mac only but it gives you really cool
intellisense in the terminal so you just
go to fig. and I can't live without this
thing uh it also will uh do all the
decorations for your terminal it'll add
these prompts I'm using power level 10K
it configures it for you it runs up here
in the service bar um I don't think they
have anything for Windows yet but the
funny thing is is right before I came on
stage I got an email that this company
had just been acquired by AWS so I don't
know is that a good thing okay anyway so
we're going to install the starter and
here we go you can see it goes out to
new get thank God the conference Wi-Fi
is working but now I have the option to
do net new view in fact that's what I'm
going to do right now net
New View and then I'm going to give it
the name dasn cph and this is now
installing the template on my drive so
we're going to go into here and let's
buy ourselves some real estate and so
now what we have inside this template is
we have an app directory stop that we
have an app directory we have a server
directory this is where asp.net is so
I'm trying to make this as simple as I
can this is a pretty standard setup if
you're doing front-end backend API uh
we're going to take a look at all of
these things as we go along this read me
is quite extensive but again we'll take
a look at that later uh but what I'm
going to do is I'm going to go into cat
package.json so you can see what's in
here
so this is you can see the name the
description package.json is at the root
of the project uh because you need node
we're working with view um but we're
using this mainly for the scripts so you
have npm runev npm Run start I'm
assuming you all know what npm is uh
what we're going to do right here is
we're going to do npm Post install which
is just a little
shortcut uh to there we go isn't that
nice I love that completion that's all
fig doing that um anyway npm run post
install we have our uh we have now our
our um node modules installed which
thank God the conference Wi-Fi is being
good to me right now don't curse it Rob
so now we're going to run this now this
is interesting as this starts this is
asp.net starting up and we get this
thing called the spa proxy oh I missed
my zoom on that one the spa proxy is the
thing that starts so what I have in
running here is I have asp.net running
on Port 8000 and right here I have view
running on Local Host 3000 so there's
two servers running and it's managed for
you in the background using this Spa
proxy thing what you're seeing right
here is Tailwind anybody here work with
Tailwind CSS know what it is we got one
person anybody hate
Tailwind good we got at least one that
means there's more uh hopefully I'll
I'll I'll get into your brain with
Tailwind um so anyway I had to choose a
CSS framework I decided to do it just
choose this one I could have chose I
could have chosen bootstrap um it
doesn't really matter I had to choose
one and all these Frameworks out there
like like rails D Jango uh Express a lot
of Express frks they're all going
nowadays to Tailwind so I decided what
the heck so anyway that's it this is
minimal API thing running and uh we're
going to deploy this to Azure in just a
little bit but now let's hop back over
here
because I do want to address the
Tailwind thing um I love this this is a
great tweet or little meme that I saw
before it's so perfect Tailwind is an
abstraction a very light abstraction
this is last I'm going to talk about
Tailwind like this I'll show you a few
little things later on but Tailwind is
just a very light abstraction on CSS and
it tries not to hide it but what it
tries to do is give you some samee
defaults uh they call it they call it a
utility based CSS toolkit which I like
yes uh it tends to look really nasty
when you're looking at all the things in
line there but once your eyes get used
to it it's really easy it's just like
code like anything
else okay why did I make this thing um
the funny thing is we have if you do uh
installation of net you can do net new
web app you can do net new MVC uh you
can also do net new react and net new
angular now I don't know who uses react
or angular just kidding besides everyone
um but we didn't have View and we didn't
have spelt and so challenge accepted I
they said well go ahead rob you know
let's see what you make and so I did I
went down to San Diego I met with John
Galloway who's on the asp.net team and
we put together two starter templates
and it was really easy to do we just
took the boilerplate view app the
boilerplate spelt app and we just kind
of married them together with the uh Spa
proxy and we ended up with a really fun
starter and I was like this is neat but
we can do a lot more that's what I like
to do and so I decided Well let's see
what else we can add here to get people
past the initial like okay cool I've got
it on my hard drive now what do I
do um this is what I've been doing since
2006 this is me at
mix6 um I look a little older there I
don't know what happened I just age
backwards I guess uh this is the
Commerce starter kit for asp.net
2.0 um I this is a when I I contracted
to PayPal to do this and then I was
contracted to Microsoft and they
eventually hired me but this is what I
do I make starter stuff and I love it I
can't help it so I'm still doing it
after all these years and I don't feel
bad about my career at all um no anyway
it's uh it's been fun so let's talk
about View um is anybody in here work
with you before Oh great you're all here
so you know what I'm going to be showing
you right now I know there's a few that
aren't so just bear with me if you
already know all this
stuff um view in its most basic form
here just index.html in its most basic
form is just an application that is
mounted to a Dom element that's it so I
have a Dom element ID app by convention
inside of there it's all your view app
down below you can see I'm pulling in
create app from View and then I'm
creating some data and we can work with
that data some methods click things do
all the kinds of stuff inside that
element this is a simple way to do it I
have done this many many times and it
works and uh if you want to do something
more compelling however you would do
something like npm create view latest
and this is going to create a whole big
project structure for you including if
you want endand testing with playwright
which is something we're going to talk
about later on anybody here use
playright a good y that'll be a fun one
to get get into um okay when you do this
now what you have is you have inside the
source directory you have this
full-blown set of things that amount to
a front-end application lots of View
files each one of those viw files is a
view component it's components all the
way up and all the way down have a
router we have centralized data stores
uh we have views which equal Pages all
of this is compiled and pushed together
by a tool called vit and if you've heard
the name webpack before and people
swearing about it well vit is the kind
of the new web pack it goes a lot faster
it's a little bit more sane um but
basically it's a web server it is a
bundler it is a package not a package
manager it is a packager a compiler it's
a whole bunch of things so this is a
tool that will take your source code
inside the source directory turn it into
HTML and
JavaScript why do we care about this we
care about this because it's a web
server and so is asp.net and that's
something we have to keep in mind as we
go along through here this right here is
the boilerplate V app this is what you
get when you do uh npm create view
latest uh you get a set of components
you get a basic page right here that you
can look at and say okay this is how I
think view works and then the problem
becomes okay so I think I can understand
we have code inside script right this is
a traditional view component we have
code inside the script tag we have a
template where our HTML goes a style tag
at the bottom with isolated
styling and what's a hello world
component what is a the welcome
component I'm not trying to be mean to
the view team I'm just thinking they
could do a whole lot more which is cool
because they give you this right here
which is a good starter Point
documentation Community tooling
ecosystem Community all this
stuff but to me I don't know how else to
put it it is kind of a naval gazing
moment for the view team it's like Yay
lucky you get to work with our tool and
I think that's neat but I think they
could do so much more and so what I mean
by so much more is what about like just
a header navigation what about a footer
what about something that you can reuse
as you go
on I call this the owl moment because
you're given this tool right and you're
like yeah you did it go for it build
something cool and you're like great
what do I do what do I do how do I build
on this so that was my
guiding what's the word I'm looking for
that was that's what guided me uh when I
was building this thing and let's go
take a look at the code so where are we
this is the code that we just installed
uh this is the source directory I was
just talking about zoom out there we go
this is that Source directory I was just
talking about so this is the view app uh
right here in the app directory uh
asp.net is down here in the server
directory this again is the template
code and so inside here let's start with
the app. viw and I'll zoom out again
there we go let's do
this hope you can see the code there
screens are a little smaller than I
thought they would be
so this is this is the app. viw this is
your layout or your harness or whatever
you want to call this is the entry point
for The View application um inside of
here I created a a head component footer
component and then I'm laying it out
down below and to me this is bleeding
obvious this is what you would probably
do in the future so the decision I made
here was well I'm thinking that people
if they building a front- end
application are going to have a header
navigation or footer navigation I think
that's pretty standard stuff suspense is
another interesting one
uh suspense is an experimental feature
right now but people are using it
everywhere and not many people know what
it does and not many people figure out
that they probably will probably will
need to use it at some point because
what it is is basically a wait for the
components to render um it has to do
with view internals they're going to
change it I'm not going to dive in too
deep into it but it's extremely helpful
to overcome race conditions it's put it
that way um so just be warned if you do
use it that it could
change uh and then router view this is
how you render out some pages so let's
go take a look at these components head
and footer real fast inside of here I
have organized some basic components
this is the way I do it because
components as we know can contain
components so I think of these things as
blocks components that contain
components think of blocks on a page you
stack in blocks up and down each one is
a section you can use a section tag if
you want or article whatever um I'll
talk about these in just a second but
what we're looking at here is nav which
is another Global concern so inside of
here here's our footer with lots of
lovely and amazing tail uh Tailwind CSS
which I know this person right here is
going to say see I told you it
sucked which you'll still be
wrong uh so yeah here is the here's the
navigation the global navigation which
is the header navigation and down here
is something interesting I'm going to
come back to this down here I am using
this thing called paa which is this uh
state store for view I'm going to come
back to this in a second but up here you
can see it's basically all of Tailwind
glorifying the header barar uh yeah so
let's go down to the view here to this
page this is our homepage or a Home view
which is just a router endpoint a view
in in a view app which is weird I don't
like to I don't know why they just don't
call it pages but they call it views
whatever um this corresponds to the
homepage so up here you can see that
here's the components I was talking
about those blocks and whoops we're
using them down below here we're
wrapping everything in 12 80 and then
inside here we have a hero and resources
this is a standard page layout and you
should be able to look at this and go I
think I know what this dude's doing he's
a little crazy but I think I can figure
this out so you look at 1280 inside the
1280 component you can see it's just a
simple div now why would I do why would
I do a full component just for a simple
div and it's not the code that's in the
component it's what the component
represents which is a 1280 pixel wide
centered box or a container and the fun
thing about Tailwind is I have the
Tailwind um I have the Tailwind uh
plugin installed here which gives you
intellisense and you can also hover over
this and it gives you the definition of
the CSS so you know what's going on this
is the point of Tailwind because when
you're using other Frameworks that do
more semantic stuff what's an accordion
you know like how do I understand what
this drop- down means right but in
Tailwind they give you everything in
things like Max withd 7 XL right what
the hell is that well it means I want
the max width of this thing to
correspond to seven units on an extra
large screen and so 7 units is 1280
pixels so you know this because you can
hover over it or you just get used to
these units and that's the one thing
that tawi one does really well it has
these base units that apply to just
about everything in terms of sizing font
sizes uh padding margins all kinds of
stuff like that uh also it does colors
for you so if you wanted to make this uh
we could do like BG whoops let's do stop
that what did I do MX Auto and then BG
so look at this this is the tailwind and
tail sense so you can see the colors in
here are graded by numbers and they do
all this grading for you for the CSS
it's tonally compatible which is really
neat so we got slate we got gray we got
all kinds of colors we can go like that
and have a great time the intell Sens is
extremely useful it's anyway we can
apply background coloring to
that all right where are we um let's go
take a look at the hero this is fun so
the hero this is on the homepage this is
the screen the dummy image you saw and
then you saw the title and whatnot I'm
not going to don't need to go into all
the the csns in here but what I do want
to show you is what we're doing is we're
outputting this thing the doc. tile that
Doc is a property that is defined here
in our component property is the thing
obviously pass into the component but
down here we have defaults which is
Laura msum dummy defaults why do we do
this
because as web developers we know that
when you show a page to somebody they're
going to read it and they're going to
ask you wait why did you put that weird
word there what does that mean or why
did you make that sentence we're not
going to use that sentence like I know
just look past this you know no that's
not the Avatar that we're going to be
using this is oh God so this is called
blocking and that's what we're going to
be doing Laura msum so this is there by
default but more importantly is we are
expecting that our object to have a
title HTML and image where do these come
from and that's the interesting thing
I'm going to show you that in just a
second so let's see let's go back to the
home view okay so we took a look at this
stuff and let's go down here to that so
if you work with view you should know
what pea is all my view folks out here
we know p is great centralized state
store uh when for those who don't know
what this is when you're working with
front-end applications uh you work with
data obviously but you tend to work with
data in more than one place so you have
a component on the homepage and maybe
you have a component up in the top bar
maybe it's like a shopping cart so you
have you want to share data between the
things that data needs to be able to
basically throw an event and say I've
updated so update yourself components
that use me and so what you have to
start doing is you use evented
programming or reactive programming so
the data in the P store is reactive so
here I'm asking for the content store
and I'm just importing it in and then
here I'm I'm invoking the used content
store and what I am ask asking for is a
action called get documents and then a
state object called documents which is
just an object and then this is where it
gets weird this took me so long to
figure out what the hell that was why am
I not just assigning a documents
variable to the return of get
documents that's not the idiom of doing
invented programming what I'm doing here
actually is I am telling the state store
go and get some documents and load up
the document state and so it's doing
that and then I can use the document
down below this feels like working with
global VAR varibles to me and I hate it
I hate it a lot but I got over it
because this is what you're supposed to
do why am I pointing this all out
because this is a decision that I made
for you so that you could learn the
idioms and keep going so you don't have
to figure out how do I actually use Pia
well here it is it's all done for you uh
let's go take a look really quickly at
that store just so you know what we're
doing not that but that and then we're
going to close close this and I'm going
to pick this up a little faster okay so
inside here is just a typical P store
state store it's just a file in the cont
or in the storage directory you can
import it in uh file based and then now
what we have some State we have actions
we have Getters which are readon things
inside here the reason I'm showing you
this is I am doing an API call I'm using
fetch I'm using fetch I'm building a URL
based on an endpoint which is are we in
production or not passing in a path I'm
going to come back to this but just keep
in mind I am pinging an API I'm pinging
our API asp.net API for documents it's
because the documents are coming from a
markdown CMS that I made which is funny
I told somebody this back at uh
Microsoft and they're like Rob how crazy
are you are you serious you made a CMS
like it's not really you'll see what I
mean in a second we'll get
there okay so there is that store the
one last thing I'm going to show you is
as you work with uh as you work with
view um and you build out your
application you get to a certain point
where you're just like oh jeez I need
Social Links in the bottom footer but
also I kind of want to put a couple on
the top and I want to oh how can I do
the links both at the top and the
bottom because what most people do is
they'll make a footer component or a
header component and they'll put the
data right in the component which is
fine that's the demos that you see
everywhere but what you end up doing at
some point is you're centralizing that
into a I usually call a site store and
this contains every meta bit of
information for your site maybe there's
a name in here contact links whatever
top nav links Social Links and the
footer nav all goes right here you look
at this and you think okay well I'll put
it in there well this is a decision
again that I I made to hopefully help
you to not have to stumble into this
problem later on and grease the wheels
and get you going as quick as I
can okay one last thing I'm going to
show you one one one last thing um let's
see where are we we need to go down to
our views there we are home view down
here this one L last use SEO this is
interesting I'm importing this by the
way up here import use SEO from composes
SEO and down here I am invoking this
method and this is another fun one this
is something that has I have done this a
thousand times you go to deploy your
site you're really excited you want to
go tweet about it you put the tweet in
the in your Twitter thing and you get
the gray box with just a simple you know
some one line of lower lowercase text
that looks like crap and the marketer
calls you and says dude why don't you
have some picture there don't you know
what you're doing like oh right meta I
need to have Meta Meta tags so that's
what I have for you inside of here this
is something that you will need at some
point so this is the use SEO composable
composes in view are like helpers
they're just little Global helper
functions that you reuse and you reuse
throughout your site I use this in every
site I've made uh I have deployed a ton
of view applications both internal to
Microsoft and also external for my own
gig uh and I use this all the time
when you go to try and figure out how to
add metat tags to your View application
you'll hit Google and or no you'll first
try and do it yourself so you go to app.
viw which is your layout and like okay
where's the uh where's the header tag
where's this thing and it's not anywhere
right this is just a component
components don't have access to the head
and then you go down to index.html and
you're like okay I'll just drop it in
here but wait all the meta tags are page
specific how do I do this and then you
could invent some hacky solution if you
want to you do that then finally you
look on Google or you read in stack
Overflow that what people typically do
is they grab the unad package which will
inject in information into the header as
you see here right we're uh adding open
graph stuff we're adding Twitter uh
Twitter stuff titled description boom
done I saved you hopefully a little bit
of time uh to uh hope I saved you a
little bit of time so you don't have to
go and hunt this stuff down jet lag is
fun jat lag is a good time all right so
I think that is
it yes it is so I'm going to pop back
over anybody have any questions shout it
out if you do it's interactive it's a
festival I'm not going to sing again
though I'm not going to do
that
okay all those components that you just
saw um you might be looking at the
Tailwind stuff thinking oh my God if I
have to think about how to write all
that Tailwind stuff forget about it I'm
not going to do that well the good news
is I got all of that from this site here
which is tailblock docc it's readymade
components built in uh built in Tailwind
when I say components I mean html blobs
uh there are sites like this everywhere
but I like tail blocks. CC because it's
super super useful uh they got just
about everything uh there's also
Tailwind UI which is the paid stuff uh
for Tailwind that you can from the
Tailwind team I subscribe to that and I
use it all the time so it's kind of nice
you just go there grab a block stick it
in your app and go
um let's talk now about the backend
stuff the asp.net minimal API we're
going to go into the server bits uh does
anybody here used minimal API and know
what it is yay with Tailwind right I'm
assuming you use Tailwind no okay still
don't got you yet all right I'll get
I'll get you tell we or if you don't
know uh asp.net minimal API um takes
inspiration uh from Express and Sinatra
and flask uh these are web Frameworks
from node python and Ruby Sinatra was
the one to start this whole thing about
let's do really super minimalist API
stuff I mean this is amazing look
require Sinatra get your endpoint do is
the call back in Ruby it's a do block
and it just returns some text expressed
as the same thing this API has become
standard these days so the cool thing is
the asp.net team thought well we want to
do that too this is all you need and
we're talking about asp.net here which
is let's say fiddly uh and ceremoni is
another word I've heard where you have
to know dependency injection you have to
know what the Builder pattern is
Singletons and all these other things
right you have to know these things
which is fine as developers we should
know our patterns but they also realize
that sometimes you just want to jam
together a really quick API and so they
made this which is great this is minimal
API in action app. mapg boom demo time
again let's write some code
woohoo okay I'm going to pop out of here
pop out of there sure I'll save it why
not I don't know what I just
saved uh so we'll go into
server and inside here it is not cool in
this room is anybody else as warm as I
am um okay so let's start here at
program.cs again this is our server and
see if I can pump this up a little bit
there we go this is our server uh and
it's pretty it's pretty minimal as far
as API things go as far as asp.net goes
we're starting up here with the builder
we didn't need to do this but I wanted
to add cores uh so by default I've
turned cores completely on so anybody
can access your API from anywhere if you
don't want that turn it off uh I also
had to set up that we're using static
files in here because we're using View
and we need to make sure that we can map
to index.html because that's going to be
the entry point for our View application
asp.net allows that right it'll just
hand stuff off there if it cannot solve
the route itself because as net is going
to be your server or kestral is going to
be your server when you go to uh
production talk about this stuff in a
second this is a CMS thing I told you
about and then down here I am simply
mapping some routes for the API and we
can do app.run
so let's go over here the API this is
the routes I was telling you about that
I was
mapping if you use if you use asp.net
it's kind of up to you how you want to
map the routes um with MVC obviously you
have to have a controller but with razor
Pages it's page based well how do you do
it with this framework it's up to you in
node there's a routes directory and
inside of there um you basically use a
router and then you export that router
and then you pick that up in
app.js here we're doing something a
little bit different we're just calling
app. mapg repeatedly and we pass in this
I endpoint route Builder which is our
app and then we build out the routes
accordingly um one thing I do want to
point out is I I like the idea of having
things as obvious and filebase as I can
so this is in the API directory it could
be in a routes directory but I figured
this is pretty this is pretty obvious
this is where the API stuff goes so
anyway inside of here you'll notice that
I'm working with a documents collection
or a documents Library I should say and
then an ey list of documents and then
I'm doing a little link action go get me
a document that has the slug about terms
and privacy and these I'm just returning
from this endpoint API about so on
down below here I have another one where
I am querying a directory entirely where
the directory is equal to whatever you
pass in in our case uh on our homepage
we're asking for home now where are
these things well if we come down over
here and look in www root into content
you can see
[Music]
them these are all just a bunch of
markdown files and this is that CMS that
I keep talking about uh This was meant
with some very
concerned looks at Microsoft like what
are you doing and what I did was I stole
this idea from n content and N if you
the view people out here should know
what n is it is the kind of uh big
framework that's built on top of you
very opinionated um and convention-based
they have this package you can install
called Nu content and what it does is
basically just looks at markdown files
on the drive and allows you to query
them from the front end I like that idea
I thought well we could do this same
thing with asp.net and so I made it and
it seems silly it seems silly until you
think about this it's markdown markdown
is a great tool it's why just put it in
a directory and then you can access it
on the client now why would we do
this because when you first start
building a site like view with view
you're going to put your content just
probably right in your component which
is a anti-pattern in view so what I mean
is uh you're going to put your like HTML
you're going to have H1 tags and P tags
and your content is right there in the
HTML eventually you're going to figure
out after your 30th deployment because
of a spelling error because someone in
marketing or sales calls you and says
could we change this to look like this
and they call you again and say I'm so
sorry I just my boss looked at this and
can you change it to be this that is
just so oh and so what you end up doing
is you end up going to a headless CMS
something like intentful or prismic or
whatever and plugging that in and your
problems magically go away so that's
what people typically do but that's
after a while what I wanted to do is I
wanted to hit The Sweet Spot between
let's get started in a scene way and
then eventually maybe we'll go to a
bigger CMS but what we really need to do
is we really need to take that content
out of uh the HTML and you might be
thinking Rob how does this scale though
like I'm still going to have to deploy
it and this is the fun part I'm I'm
jumping ahead of myself a little bit but
do you know that people use GitHub as a
CMS a Content management system they do
it's pretty funny and you think about it
if this is in your Source directory and
the people that write the content can
have access to it which I know cringe
but at the same time consider that
you're just getting off the ground you
can change it up at GitHub do a PR do a
review do all the things you need to do
and you have versioning you have
everything in these markone documents
and if you set up GitHub actions to do
your deployment off to Azure let's say
then all of that's out of your hands all
you have to do is accept the pr for the
content change and you're not you're out
of it so that actually works out really
well in the beginning and I want to to
make sure that you all understand this
is in the beginning okay so really
quickly um about terms privacy right
here you can see they're just marked
down documents this is called front
matter it's a bit of yamel at the top
privacy terms and so on here all of
these correspond to little boxes that
were on the homepage little feature
boxes we also have the hero which is the
content for the hero so each one of
these are little CMS elements now how do
we how do we actually work with this
what's that document thing you go in
here into models and you can see that
document is just a simple object or a
simple class and inside here we have
some basic CMS stuff we're using some
yaml serialization so you can anything
that you put in the front matter gets
dropped into your document object and
this point if you know anything about
CMS you might be saying yeah that's a
very simplistic thing you only have one
document type I have you know 10 in my
application and that's great you can
inherit from this if you want you can
make it a partial class you do you you
have the source code this just gets you
going quickly
all right so the Content Library just
freeze through here this is just giving
you some queries I will say you have a
fuzzy search which just do just term
matching that's it loads it up blah blah
blah um nothing much to show you in
there it's marked down in yaml and built
out a page and they all sit in memory
and it's nice and
fast all right I have a half hour left
that's great we're going to talk about
deployment later uh what else did I want
to show you let's talk about
tests uh inside of here I have added
tests believe it or
not I've added tests sorry I was
checking myself I added tests to this
project which again I was met with some
funny looks people are like you know Rob
you're supposed to have a test project
you don't put tests in here you know I'm
like but but but but outside the net
world go for example when you build a go
Application you build it building
packages each one of those packages come
together to build your application each
package has its own tests in inside and
it's just a convention they use uh if
you do node uh workspaces package based
node stuff each package has tests right
in it it just makes life a little easier
so to me it's just easier to have tests
inside your API that test your API so
here I've just stubbed a few out to test
the uh the library anyway it's in here
for you so you can go and start it up
and do your own test as quick as
possible all right so the program us and
let's go take a look inside of here
now you might be thinking but I don't
want that test code in production that's
why we have a separated project and so
here we are making sure that when you go
for release when you do net publish and
release this into the wild all that test
stuff is removed uh down here you can
see we have a configuration for the dlls
when it's not release we're adding all
these dlls uh for testing xunit and so
on so none of this stuff goes into
production it's all part of the CH CSR
file all right uh let's go down
here
to
this okay this is obviously a CSR it's
Ms build
um what we're doing here is really
interesting stuff when we Run net
publish we have to have a few things go
off like how are these two things we
have two apps right front end back end
how are these two things going to come
together this is where asp.net core more
specifically the spa proxy take over and
they say okay well we're going to build
the vi up we're going to get the uh HTML
and JavaScript and we're going to dump
it in the WW rout the asp.net site is
already configured to look it in look
for index.html so we have to make sure
all that is there on build so this right
here is all the settings uh for that to
happen no need to ever play with it just
so you know it's there it's all set up
for you up above here uh if you ever
want to change the name of anything here
you can see the spa route Spa single
page application uh is in the one level
up app directory um and then down below
here you can see the settings for it
it's going to run at 3,000 and npm renev
is a start command so this is how the
spa proxy and asp.net are orchestrating
view to start at the same time so you
can work in both but if you change
something like let's say you go in here
we have a watch go off we have CS files
JavaScript Json and you change the
markdown it's going to hop the back end
hot reload the
server asp.net is going to reload but
your front end isn't
we still haven't figured out how to make
that happen uh we're working on it
though but anyway all you got to know is
you have to hit controlr to refresh and
so
on all right I think that is all I have
for
this uh oh kiry is here don't look at
her I'm in trouble she's coming to
remove me from the stage I didn't mean
it no no don't go ahead please love
you oh my gosh that made her feel bad um
let's see is there anything else in here
I want to talk about I do not believe uh
I will point this out real fast we have
a Docker file just in case I forget it
during our deployment thing this was
made by Aaron whistling uh so this will
actually build your front end your back
end jam it all down into a Docker image
and you can deploy it wherever the heck
you like it took him a while to figure
this out I was impressed I mean I know
Docker a little bit but you know he he
did an amazing job okay so I think that
is it for the
server um I talked a little bit of
course about working with v and asp.net
we don't need to talk about that much
anymore but there is a mental shift you
need to understand that when you do
deploy this this becomes an asp.net
application what we have effectively
done if you're trying to wrap your head
around why would I use view why would I
use spelt why would I use whatever
because what you're basically doing is
you're ripping razor Pages out you're
ripping that front end stuff out and
you're replacing it with a view
application so the view engine's now
gone and now you have to replace it with
view or spelt or whatever and now we
have one single application that's going
to go up into the
cloud let's talk about spelt uh really
quickly want to touch on this um spelt
and playright I like this slide that
made me happy when I put that together
um Okay jump out of here and let's go
back all the way over
here is anybody here use spelt know what
it is
whoa okay one person spell I know it's
like really another JavaScript front end
framework do we need one of course life
wouldn't be complete unless we had
choices what spelt is is it does almost
everything the same as view if you like
spelt then we this is also the spelt
starter kit so you can install this in
the same way net new install spelt or
sp. web. starter which is the thing I
made it'll bring this whole thing down
you get exactly the same functionality
same components if you come down here
you can see we have a little bit of
different way of handling the data we're
still fetching stuff and then down here
we have a 1280 wrapped we have sections
with hero blah blah blah it's all the
same stuff but I do want to show you
this one difference which is this right
there this is the way spelt works it's
more like a JavaScript view engine for
lack of better words what you do when
you make a spelt app as you build
everything out you have vit running in
the background again it's building it
for you and then hot reloading your
front end but when you're done and you
build it there is no runtime library or
no core Library I should say so that
when what you get back is vanilla
JavaScript and vanilla HTML which tends
to make things smaller it also makes
things faster so spelt is actually very
fast the documentation for spelt is
amazing it it's a whole walkthrough
where you build out a whole spelt app
it's a little weird I will say a little
strange in some spots like if you go to
your components and if we go into
hero you declare your properties using
export let which is strange but you get
used to it I guess but anyway that's
felt the reason I'm showing all this is
there's one massive difference um well
number one I'm showing you so you know
it's there and they also do a page based
routing which is cool um I added
playright and
playright I think I asked if anyone here
has used it playright
is an end to-end testing framework which
is so fun to use not only will it test
your code it'll make the interaction of
your site better better for people that
use assistive technology which
unfortunately a lot of us think not
enough about let's put it that way um so
here just really quickly we are doing
test. describe you can see I have the
little arrows over here click to run
tests which is neat you can also run a
debugger in here um which is also neat
this is because I have the playright uh
um plugin installed so it'll run
straight from vs code I don't like to do
that I'm going to show you what I do
instead in just a second but if you use
any node-based testing Frameworks this
is going to look familiar to you and as
we come down here you can see we have a
describe block we have a before each
stop that go away and we have a before
each and then we have a goto and so what
this is doing is it's going out and it's
loading a page in memory it's pulling
that HTML in and then it's injecting
each one of these pages into the test
below because I have an API I have to
tell the page to wait for a response
from the API endpoint so that's
important uh and so once that's done the
page is then handed off and down below
here you can see our expectations I'm
checking the title but down here what
I'm doing is I'm using what's called a
locator page get by roll there's a
number of things I can do with this I
can come in here and say page
dot get get my attribute alt text
placeholder blah blah blah blah blah I
can go in there and do a bunch of things
inside the Dom to find the thing I'm
looking for now you might be thinking
big deal you know why do I care about
this you care about this because who
here knows what a role is when it comes
to a
Dom it's not a lot of people do you ever
heard of Arya stuff when you look at
these tags and you see something like
Arya
label Arya is a big deal because Arya
stands for accessibility Rich internet
application and when you start working
with ARA tags in your code you're making
your site usable for people that have
Vision issues that need to use
accessibility stuff inside of the
browser so I'm going to show you this
real fast because I think this is
wonderful so I'm going to go over here
to Firefox this is my
blog and what I wanted to show you is
the way that people and so I'm here in
the accessibility tag inside Dev tools
and this is the way that people using
assistive technology use your site this
is what they see they see a document
they see some generic thing at the top
which isn't described so they don't know
what it is but they'll see oh this is
the main area and if I come down here oh
I can see a heading and that heading has
the name whatever is in the site and so
this is the way that playright sort of
pushes you now to decorate your
application so you can then test it why
would they do that because playright
uses headless browsers you can't see
anything so it only makes sense that you
would use a system technology to then
interrogate your application which is
great because if you do that and you
want to test your site better that means
you have to go add ARA stuff to your
site which makes a better experience for
everyone and I love that anyway let's go
back over here you can see down after we
get the page get by roll we can expect
it to be visible that we can see it and
blah blah blah okay so this is more of a
unit testing way of doing things but
what playright is is an endtoend testing
and I wanted to quickly show you this
this is the way I've been using it is
when you do true endend testing or user
acceptance testing you have to script
exact interactions so you can't be
afraid of going to an exact page saying
I want to see three feature boxes or six
feature boxes my title should be this
and so big deal that's what you want as
a programmer but what about your users
and this is when you think oh I should
be writing a story and so you come up
with a bunch of characters in a story
like Ana here Ana is an experienced
frontend developer she doesn't know
about playwright very much and so when
she visits my post on my site this is
what I expect her to see and how I
expect her to interact you can have
playright click buttons for you fill out
tags log people in there's a whole bunch
of authentication you can do and what
you end up with is this long wonderful
script that describes Ana or somebody on
your
site uh last thing I want to show you is
something that I learned from my
colleague if you open up the command
pilot uh it's command shift p on a Mac
control shift p on Windows and you type
in terminal did you know you could
create a new terminal in the editor area
I love this so much because I do not
like the terminal stuff that you get uh
in vs code it's always just kind of
shoves everything to the side but I like
having it in the editor it makes things
easier why am I doing this because I
want to show you something that's really
neat if you run npx playright test
UI I know it's just a bunch of white
noise here um but when you start running
these tests uh the reason it's this way
by the way just quickly is something on
my machine
broke last night so I had a whole demo I
was going to show you this testing thing
working going look at it works and it
broke but it's worth it to show you that
this testing window is amazing it's a
it's a Chromebase web app but inside of
here you can do so much with it um and
when you run the test it actually takes
snapshots of the page over time and you
can see each snapshot up there and you
can see what the user sees during the
test which I think is
great all right that is it for
playwright and let's go back over here
to my
slides if you want to learn more I am a
some playright is a Microsoft project I
am a Microsoft employee um however I do
still do courses and videos it's I will
never stop doing that so I do that on my
own um I have this video course I did on
knon view it's got a book and blah blah
blah um one of the videos I did was this
one it's an over an hour long if you
want to take a look at it it's totally
free I can't charge for this because I
am a I'm a Microsoft employee um but
it's totally free it's an hour plus
where I get into actually doing full
testing on this and if you want to snap
a picture of the QR code it'll give you
a link um tell me if you have problems
with that I'll show the QR code again at
the end uh for anybody who didn't get
one so um playright I can't say enough
about it uh it's it's it it it's going
to sound snarky of me but it amazed me
that Microsoft could make vs code and
playr they are just amazing
tools oh that sounded snarky okay let's
talk about deployment um I have just
enough time left here to deploy and then
also take any questions we have at the
end okay so we're going to come over
here here and this is our spelt app and
this is where I want to be and the
docker file right there all right inside
the server directory we have a
deployment directory inside here uh we
have an Azure directory and inside here
I'm going to get rid of this not that
and that quickly going to delete that
these are going to be generated for us
is why I'm doing that I have this app
service shell script I'm going to talk
about this in a second but first what
I'm going to do is I am inside the
server directory I have make I have a
make file in here because make is
awesome and I love it I'll tell you why
it's there in just a second make app
service what this is going to do make
make just basically executes shell
scripts for you what this is going to do
is it's executing my app service shell
script it's right now it's calling up to
Azure and it's creating all the
resources we need to deploy this site I
have made a number of decisions in here
and the decisions are all based around
what I know people do when they use
starter templates like this they want to
get off the ground up and running as
quick as they can so here the decisions
I've made is we can do get deployment
later we can do GitHub actions later
right now we probably need on day one to
get a site up and running so we can show
our client or our boss or somebody that
we're working and then we're going to do
rapid iteration as time goes on So to
that end I'm using zip deployment where
I'm zipping everything up and just
shoving it up to Azure because it's
probably just me on this project as I
get started maybe this is a side gig
you're working on maybe it's you're
started by idea so that's what we want
to do inside the app service shell
script and by the way quickly Aaron
Powell my colleague is working on uh
getting bicep and a ACD is a developer
CLI we're getting uh we're getting all
of that put together to put in here I'm
just being a big fat baby about it
because I have a very particular way
that I want to see it done and so Aaron
is very kindly putting up with my crap
like no I don't want bicep files
everywhere I want it right here and he's
like God Rob like it's me
uh anyway quickly to go through here
this app service shell script um you
have a couple of uh couple of things to
set up above here it reads just like
Powershell it works in Powershell so you
can use this directly um all of this
stuff is commented so down below here
for instance you have to pick a skew for
your app service plan um what do you
pick well here's a link for you you can
go look at pricing details I would
normally do F1 free so you know that
when you deploy this yourself you're
getting a free uh upload uh free
deployment I should say but I already
have a couple free Linux uh things on my
subscription so I could only have one so
anyway I had to use B1 quickly down
below here we're just executing the
Azure CLI a and you have to be logged in
of course with an Azure account and then
down below here one thing I want to show
you is something that is not done woohoo
deployment off look at that all right
this is going to come up in a second
I'll come back to that um down here I am
enabling the web application to have
logs
which is not set up for you by default
if you're going through the portal right
or if you just do if you do the
deployment you're going through the
tutorials it doesn't really talk about
setting up logging but we all need
logging don't we want to know what's
going on so here I'm making sure that we
have all the logs that we need in here
to know what's happening so finally down
below here what I'm doing is after I
build all the resources on Azure I'm now
creating the deployment scripts that
you're going to use repeatedly and that
is the zip. SSH I called it zip because
it's for zip deployment if you want to
do GitHub deployment or G deployment you
can create your own uh whatever I also
have a logs script right here which is
just aasy web app log tail so you can
see what's happening with the
application these are just little
shortcuts for
you uh if you like make what you should
uh inside here I have make targets for
each one of these things just to make
life easier so for instance right now
when you come over here to check your
deployment you're like dude rob you said
what's with all the errors uh
unfortunately this is something that
I've known for a while I'm working with
the ctim on this really quickly there's
a bug in our python code it has to do
with just when we call uh logging what
used to happen is the site would deploy
it would come up and then the log files
that start streaming so you know you're
up but unfortunately I have to kill this
process and then do
make
logs make
logs and we're going to connect to the
Azure logging thing unless conference
Wi-Fi lets me down don't let me down
please come on come on come on come
on okay could you all turn off your
Wi-Fi anybody understand yeah there we
go so some there we go W okay so we're
up so now the cool thing is now our s's
up right so if we've got a little
project we're running and our boss says
I need a side up like now we need toah
you have deployed this on day Zero which
I think is neat and you can sit here and
look at the logs and see what's going on
so you have now gone to what I like to
think of as a good spot when you're
using a starter template
okay live log stream is up which means
we are up right now which is great we
are up on Azure and boom yay I know
you're thinking great Microsoft guy
doing a deployment demo on stage but
still this is this is what you can do
with this template right now I just
installed this and deployed it it took
me all of six
minutes okay how am I looking on time I
am doing good I'm very
proud all right so that is deployment
last thing last thing I want to say and
then we can can have some questions um
in Oslo I had a ton of questions so I'm
saving a little extra time for them here
you can make your own templates a lot of
people don't know this and I don't know
why but you can make templates for
anything anything. net related if you
want to do that I have a repo up here um
I wanted to call this a net template
template just because I don't know it's
me anyway it is up on GitHub and you can
go download this code and what it will
do is it'll show you how to create a
starter template and you might be
thinking why would I want to do that
well think about for your own internal
company maybe you have boilerplate that
you tell everybody oh just go clone this
repo blah blah blah you could do that
but what a starter template does is it
pulls from newg get it gets versioned
right you have a readme in there but
when people do net new let's say my
project and they give it a name that
name is replaced in everything inside
the project which is nice because then
they can you can name everything and not
have to go through and clone the repo
bring it down change CH all the naming
doing Global find and replace anyway
this is up here for you if you want to
take a look at it uh including all kinds
of instructions in the template file one
thing I forgot to mention too and I want
to mention really quickly is inside of
here I mentioned this read me before
this is one of the things that I like to
do I don't ever like to assume people
know what I'm talking about or well I
don't want that either but I don't want
to assume that people know what is going
on so in here we have a read me that
tells you everything this is the read me
that's up on the newg get page um also
inside server inside deployment we have
a readme that goes through everything I
just talked about with you here and how
to deploy and what it all means so
hopefully that'll get you uh up and
running
quickly that is it for me uh here's that
uh that is that QR code again and I have
a favor to ask uh I don't mind red cards
at all please vote please drop your
stuff in there I do not mind them it's
how I learn uh green helps the
organizers know that I did a decent job
and they can invite me back
um I am done as I mentioned we have a
few minutes left here before lunch but
if you have any questions please let me
know and that's
[Applause]
it okay shout him out anything anything
anyone oh my God
yes say one more
time oh
cool do you have some do documentation
on how to add
authorization authentic authorization H
yeah so ha um I was hoping to have that
done so in Oslo I showed this and I
talked about a road map and um we are
going to add authentication and I was
hopefully going to say and today
announcing but uh it's hard and let me
put it this way uh I wanted to do jots
or JavaScript web tokens I wanted to
enable this with uh the
backend but that gets weird when you're
working with vit on the front end that
vit wants to take over a lot of things
in terms of the back end so anyway we're
getting there because not only do we
have that but we also have about I think
it's the last count 20 million different
ways of doing identity management with
Azure and Microsoft stuff so there's a
bunch of libraries that I have to figure
out internally which one to use we've
narrowed it down and I was about to put
it together and I couldn't do it so I
punted the whole thing to John Galloway
and so he is now working on this so
hopefully in the next few months we'll
have an authentication story we've
decided we want to have one two or three
of them the last thing I want is for you
to have to download this and then have
to go pay a subscription for something
um I want it to be free because this
talk is not only for Microsoft people
that understand. net but it's also for
people outside the Microsoft world that
want to come in and check out asp.net
which they should because it's an
amazing framework um so yeah I'm trying
to make it easy so hopefully I answered
your question it's coming anyone
else
man you guys are going to let the
Norwegians ask more questions than
you come on all right good enough go eat
lunch thanks for coming appreciate
it