►
From YouTube: Getting started with creating a no framework Web Part
Description
In this 6 minute developer-focused demo, Hugo walks through how to scaffold an SharePoint Framework web part using Yeoman Generator.
Presenter: Hugo Bernier (Microsoft) | @bernierh
Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog
A
Hi,
my
name
is
hugo
and
I'm
a
cloud
solution
architect
at
microsoft.
Has
your
boss
ever
asked
you
to
build
an
spfx
web
part?
Maybe
something
like
this
what's
happening,
I'm
gonna
need
you
to
go
ahead
and
build
me
an
spfx
solution.
Well,
today,
I'm
going
to
show
you
how
to
scaffold
an
spfx
web
part
using
the
omen
generator.
Let's
get
started.
A
Now
this
video
assumes
that
you
have
already
configured
your
workstation
to
be
able
to
create
spfx
solutions
if
you
haven't
done
so
yet,
please
visit
aka.ms,
slash,
spfx-setup
or
watch
our
other
video
showing
how
to
configure
your
workstation
when
you're
ready
create
a
blank
folder
where
your
solution
will
go.
I
named
mine,
hello,
spfx,
but
you
can
choose
a
name
that
is
more
suitable
to
you.
Now
you
don't
have
to
name
your
folder
the
same
as
your
solution,
but
it'll
save
you
some
time
later,
using
the
command
prompt
of
your
choice.
A
Make
sure
that
your
current
directory
is
the
folder
that
you
created
for
the
solution.
Personally,
I
like
to
use
the
visual
studio
code
terminal
to
do
this,
because
the
steps
are
always
the
same.
Regardless
of
what
operating
system
you
use
or
whether
you're
developing
a
local,
workstation
or
remote
container.
A
A
That's
the
version
that
was
available
at
the
time
of
this
video.
The
next
thing
you'll
see,
is
a
link
to
more
information
about
this
yeoman
generator.
If
you
need
more
information,
that's
not
included
in
this
video.
Please
visit
the
url
or,
if
you're,
using
visual
studio
code
terminal,
you
can
control
click
on
the
url
to
go
to
that
url
directly.
The
first
question
I'll
ask:
you
is
to
name
your
solution
by
default.
It'll
suggest
the
same
name
as
the
current
folder
and
you
can
hit
enter
to
accept
the
default.
A
Keep
in
mind
when
you're
creating
your
solution
that
you
may
have
more
than
one
component
for
that
solution.
So,
let's
say
I'm
building
a
series
of
web
parts
for
the
contoso
accounting
department.
Maybe
I'll
use
the
same
solution
to
add
all
the
related
web
parts
and
name
it
something
like
contoso
accounting.
A
A
The
next
question
is
going
to
be
what
type
of
client
side
component
you
want
to
create.
You
can
pick
between
webpart
extension
library,
so
maybe
you
want
to
reuse
some
code
across
multiple
solutions
or
an
adaptive
card
extension
just
use
your
cursor
the
up
and
down
arrow
to
select
what
you
want
and
hit
enter
in
this
case
we're
going
to
use
webpart.
The
next
question
is
your
web
part
name
by
default.
It
will
suggest
hello
world,
but
you
should
absolutely
type
the
name
of
your
web
part.
A
So
that
way,
when
I
build
the
web
part-
and
I
drop
it
in
the
webpart
catalog
it'll
already
have
the
right
name
for
me-
keep
in
mind
that
the
generator
will
also
automatically
create
the
webpart
class,
with
the
name
that
you
provided
and
it
will
add
the
word
webpart
at
the
end.
So
don't
name
your
web
part
hello,
spfx
webpart,
because
the
generator
will
then
create
a
class
called
hello
spfxwebpartwebpart.
A
So
you
enter
the
name
and
then
hit
enter
next
it'll.
Ask
you
what
template
you
want
to
use?
There's
three
templates
here:
minimal,
no
framework
or
react
and
we'll
use
the
no
framework
template.
But
if
you
wanted
to
see
what
the
other
templates
do,
you
can
absolutely
watch
our
other
videos
where
we
cover
these
templates.
A
The
node
framework
template
will
add
the
code
that
you
need
to
detect
the
color
and
the
fonts
used
in
the
current
sharepoint
site
and
if
you're
using
the
web,
part
inside
of
teams
it'll
actually
receive
the
theme
details
for
the
current
microsoft
teams.
Clients
such
as
the
default
color
like
light,
dark
or
high
contrast,
the
web
part
will
also
get
notified
when
the
theme
changes
and
the
template
also
includes
the
code
to
determine
if
the
component
is
currently
running
in
a
sharepoint
context
or
in
a
microsoft
teams
context.
A
So
I'll
pick
no
framework
and
I'll
hit
enter
when
you
select
a
template.
It
starts
scaffolding.
Your
solution
by
copying
template
files
into
your
project
folder
and
renaming
the
files
or
classes.
According
to
the
answers
you
provided
earlier
now,
regardless
of
the
template,
you
chose,
the
human
generator
will
install
the
dependencies.
You
need
to
build
and
run
your
solution,
and
because
spfx
solutions
are
node.js
projects,
it
will
call
npm
install
to
do
so.
A
Well,
once
you
once
it's
done,
you'll
get
a
message
saying
that
your
web
part
is
ready
and
that
you
can
run
gulp
serve
check
out
our
other
videos
to
learn
how
to
configure
and
debug
your
web
part,
and
that's
it
from
here.
You
can
add
your
own
code
to
suit
your
own
needs
or
to
add
more
functionality
to
the
web
part.