►
Description
This module will introduce you to creating client-side web parts using the SharePoint Framework. In addition, you will see how to leverage both the local and hosted SharePoint Workbench & using different parts of the SharePoint Framework platform.
The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-web-parts.
More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.
You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!
A
Hi
I'm
Andrew,
Connell
and
I'm,
an
MVP
with
office
servers
and
services
in
this
module.
We're
gonna
look
at
how
we
can
develop
with
the
SharePoint
framework
and
specifically
we're
gonna
work
with
webparts
and
we're
also
going
to
explore
a
SharePoint
framework
project,
specifically
in
this
section,
we're
looking
at
anatomy
of
a
SharePoint
framework
project,
the
solution,
lifecycle
and
then
how
we
can
go
about
creating
client-side
webparts.
A
Let's
talk
about
the
project
structure
of
a
brand
new
SharePoint
framework
project,
I'm
gonna
walk
through
these
different
folders
here,
one
by
one,
the
dot
vs
code.
Folder
is
really
nothing
that
has
nothing
to
do
with
the
SharePoint
framework
itself.
All
it
is,
is
it
just
contains
Visual
Studio
code,
specific
integration
files,
the
config
folder,
includes
all
configuration
files.
This
is
where
we're
gonna
use
things
for
not
only
configuring
our
web
part,
but
mostly
it's
gonna,
be
configuring
stuff.
In
the
build
process,
the
dist
folder,
the
Lib
folder
in
the
temp
folder.
A
These
are
all
temporary
folders
that
are
created
when
we
did
the
build
process
in
the
packaging
process.
These
will
never
be
checked
in
to
your
source
control.
The
first
one
to
look
at
is
live,
live
is
created
when
I
build
the
project
and
that's
what's
going
to
take
all
the
typescript
files
and
it's
gonna
create
JavaScript
files
out
of
them.
It's
gonna
take
SAS
files
or
s
CSS
files
and
create
CSS
files
out
of
them.
It's
gonna,
that's
like
a
temporary
holding
location.
The
dist
folder
is
where
we're
going
to
store
all
of
our
builds.
A
So
once
we've
gone
through
when
we
and
we've
done
a
build,
where
it's
going
to
create
this
lip
folder
with
all
these
temporary
files,
we
didn't
have
to
create
something
called
a
bundle
and
that's
gonna
package
up
all
the
CSS
and
JavaScript
together
in
one
file.
That's
what's
gonna
be
stored
in
the
dist
folder
and
that's
gonna,
be
there
temporarily.
Until
we
do
the
packaging,
the
node
modules
folder
is
going
to
be
created
automatically
when
you
build
your
project
or
really
when
you,
when
you
create
the
project,
and
you
run
the
package
manager
for
you.
A
It's
gonna
contain
all
of
the
node
modules
or
NPM
packages
that
your
solution
relies
on
as
well
as
all
of
their
dependency.
If
you're
familiar
with
server-side
based
dotnet
framework
development,
you
can
think
of
this
as
the
packages
folder.
You
would
never
store
this
inside
of
your
source
control,
the
source
file
or
the
SRC
folder.
This
is
the
main
folder
for
your
project.
This
can
contain
all
of
your
code
in
all
of
your
style
sheets
and
all
the
configuration
stuff
that
or
metadata
information
about
your
components
that
you're
creating.
A
Now,
let's
highlight
a
couple:
the
feet:
key
files-
we've
got
the
web
part
class.
So
in
this
case
here
this
will
be
in
the
SRC
slash
web
part,
slash
whatever
the
name
of
the
web
part
is
and
then
the
name
of
the
web
part
dot
TS.
This
is
going
to
find
the
main
entry
point
for
the
web
part
and
it's
gonna
extend
the
base
client-side
web
part
class.
All
client-side
web
parts
must
extend
the
base
client
side
web
part
class
in
order
to
be
defined
as
a
valid
web
part.
This
class
will
contain
two
things.
A
Then
you
get
the
web
part
properties
class
and
that's
inside
of
that
typescript
file
for
the
web
part
itself.
Originally
it
was
its
own
separate
file,
but
Microsoft
has
merged
those
into
the
same
file.
This
interface
defines
the
non-standard
public
properties
on
the
web.
Part
and
it'll
be
persisted
when
the
web
part
is
saved
or
published
from
edit
mode.
A
The
manifest
file
is
going
to
find
the
metadata
for
the
web
part
things
like
the
ID
of
the
web
part
the
alias
of
it.
What
kind
of
a
component
is
in
version,
it
is
as
well
as
a
bunch
of
pre-configured
entries,
and
these
pre-configured
entries
are
the
settings
on
the
public
properties
on
the
web
part
when
it's
created
and
added
to
the
page.
A
Now,
let's
talk
a
little
bit
about
CSS
modules.
Css
modules
are
addressing
a
challenge
that
we
have
inside
of
the
SharePoint
framework
can
really
not
so
much
the
SharePoint
framework,
but
when
we're
working
with
client-side
solutions,
so
what's
going
on
here,
is
that
CSS?
Is
you
get
your
you
can
override
CSS
class
just
by
defining
another
class,
with
the
same
name
later
on
on
the
page,
so
one
of
the
ways
that
we
can
get
around
this
of
having
and
create
like
globally
defined
CSS
classes,
is
by
giving
them
a
special
name.
A
Thankfully,
the
SharePoint
framework
is
going
to
handle
some
of
the
complexities
of
how
this
is
done,
we're
simply
going
to
create
a
sass
file
and
we're
going
to
name
it
something
module
dot
sass.
So
in
this
case
here
HelloWorld
webpart
module
dot
sass
all
the
classes
in
there
must
use
camel
casing.
They
can't
be
kebab
case
where
there
would
be
a
hyphen
between
two
parts
of
the
the
CSS
class
name.
A
You
then,
would
reference
classes
in
the
components
using
an
object
notation
of
styles,
hello,
world
button.
So
the
way
this
works
is
that
the
build
process
when
I
when
I
run
gulp
build
it's
going
to
compile
the
sass
file
down
to
CSS,
and
it's
gonna
give
it
this
extra
suffix
on
each
one
of
the
class
names.
It's
gonna
store
that
inside
of
the
CSS
file,
so
you'll
see
class
names
that
look
like
what
you
see
there
in
that
one
bullet
point
of
hello.
World
is
really
going
to
be
hello.
A
World
underscore
some
sort
of
a
hash.
It
also
is
gonna,
create
a
javascript
file
and
that
javascript
file
is
going
to
return
back.
A
single
object
named
styles.
That's
gonna!
Have
named
IU
properties
for
all
the
classes,
the
names
of
each
one
of
the
properties
is
the
actual
CSS
class
name
and
the
value
is
going
to
be
equal
to
the
hashed
name
of
the
CSS
class.
A
Now,
when
you
do
that,
what
that's
going
to
then
allow
you
to
do
is
that
inside
of
your
web
part,
you're
gonna
be
able
to
import
this
Styles
object
and
then
say:
styles
dot,
hello,
world,
and
it
will
know
how
to
go
grab
the
proper
class
name
when
it
renders
out
the
web
part
you're
going
to
get
nice
intellisense
from
this,
because,
in
addition,
the
build
process
is
also
gonna,
create
a
typescript
type
declaration
file.
That's
going
to
define
all
those
name
value
pairs.
A
If
you
look
at
this
sass
file,
you
can
see
here
where
what
it
has
I
have
a
hello
world
and
then
inside
of
that
I
have
a
container
a
row,
a
column,
title
subtitle
description
and
button
class,
so
here
I'd
be
able
to
say
styles,
dot,
hello,
world
or
styles
dot,
hello,
world
container,
and
it
will
go
through
and
find
the
proper
CSS
class
name
that
was
created
for
that.
With
that
hash,
now
we
have
another
file.
A
special
configuration
file.
A
A
The
manifest
is
where
it's
going
to
find
the
actual
manifest
for
that.
For
that
item,
the
external
section
is
where
we're
going
to
be
able
to
define
external
libraries
that
we
don't
want
to
be
sucked
into
the
bundle
when
the
bundle
is
created
by
web
pack.
So,
for
example,
if
I
was
using
jquery
I,
don't
want
to
include
jQuery
inside
of
the
javascript
file
that
I'm
deploying
instead
I
want
to
make
sure
that
that
javascript
file
is
is
gonna,
be
referenced
from
an
external
CDN
and
I
would
do.
A
Is
the
external
section
for
that
and
we'll
see
that
in
a
later
module?
So
let's
look
at
the
build
flow
for
a
client-side
web
part.
We're
first
gonna
have
to
go
set
up
our
environment,
which
we
would
have
already
done,
so
that
would
be
installing
the
generator
and
making
sure
yeoman
and
gulp,
and
all
that
other
stuff
is
installed,
and
then
I'm
gonna
run
yo
SharePoint
and
answer
a
bunch
of
questions
to
tell
the
SharePoint
framework
generator.
What
I
want
to
create?
A
What
kind
of
thing
I
want
to
create
and
what
type
of
other
some
additional
questions
like
if
I
want
to
use
a
web
framework
and
what
the
name
of
it
is
and
description,
etc.
Then,
from
the
command
line,
I
can
type
code
space
dot
from
the
folder
the
web
part
where
I
created
the
project
and
that
will
launch
Visual
Studio
code
and
open
up
the
folder
inside
vs
code.
A
Then
I
want
to
go
through
and
test
out.
My
web
part
after
I've
done
some
coding,
so
I
can
do
gulp
space
serve
and
what
that
will
do
is
spend
up
a
local
web
development
experience.
A
local
web
server,
it'll
launch
the
browser
and
it'll
set
up
a
local
workbench
to
where
I
can
then
go
through
and
add
my
web
part
to
the
local
workbench
on
my
laptop
or
on
my
developer
environment
and
test
it
out.
A
That
I
can
then
deploy
to
an
app
catalog
in
my
SharePoint
Online
tenant
or
my
SharePoint
on-prem
tenant
and
other
people
could
then
use
my
web
part
so
I
create
the
package
I'm
then
going
to
potentially
deploy
any
assets
to
an
external
CDN.
It's
not
required
because
the
SharePoint
framework
does
give
me
the
ability
to
include
assets
inside
of
the
SharePoint
framework
package.
A
A
I
then
take
this
package
that
I've,
created
and
I
will
then
upload
it
to
the
app
catalog
and
I
can
do
this
manually
or
I
can
do
this
using
some
of
the
office
365
and
SharePoint
Online,
ALM,
api's
or
commandlets
inside
of
PowerShell
or
commands
from
the
office365
CLI
to
automate
this
process,
and
now,
once
I've
done
that
and
I've
deployed
the
app
catalog
and
I'm
installed
it.
It
will
now
be
available
for
use
on
classic
and
client-side
pages.
A
Now
we
have
a
bunch
of
different
tasks
that
are
available
to
us
inside
of
SharePoint
development.
We've
got
a
clean
task
and
that's
going
to
delete
all
the
SharePoint
framework,
build
folders
and
intermediate
sass
files
that
were
created.
So
it's
effectively
gonna
delete
the
dist
folder,
the
Lib
folder
and
the
temp
folder
build
is
gonna,
build
the
project.
A
That's
always
gonna
be
your
first
step
now,
if
you
don't
put
an
any
name
of
a
gulp
task
that
you
want
to
run
you
just
say:
gulp,
it's
gonna
run
a
default
thing,
which
is
gonna
say
that
it
wants
to
do
a
bundle.
So
if
you
do
gulp
bundle,
what
that
does
is
that's
going
to
first
run
the
build,
and
then
it's
gonna
bundle
up
the
project
so
build
is
gonna,
create
your
Java
Script
transpilers
typescript,
to
JavaScript
your
sass
to
CSS
and
create
the
manifest
files.
A
Bundle
is
then
going
to
create
the
bundle
from
the
CSS,
the
JavaScript
files
and
the
manifest
file.
You
get
a
couple
of
things
here
that
we
have
that
are
involved
in
deployment.
A
dev
deploy
is
going
to
deploy
the
current
project
to
an
azure
development
CDN
for
sharing
builds
with
colleagues.
The
deploy,
Iser
storage
is
gonna,
upload
assets
to
an
azure
storage
container.
A
A
blob
store
container
specifically,
and
the
package
solution
is
going
to
package
up
your
project
into
a
sharepoint
PKG
file,
an
SP
PKG
file
that
you
can
then
use
to
add
to
the
app
catalog.
If
you
run
gulp
tests,
it's
going
to
build
and
bundle
the
project
and
then
run
all
of
your
tests
to
verify
your
code
is
working.
Serve,
is
going
to
build
and
bundle
the
project
and
then
run
the
local
web
development
server
that
hosts
the
local
workbench.
The
last
two
commands
are
only
really
used
one
time
when
you
setup
your
environment.
A
A
This
last
bullet
here
in
those
last
two
bullets
here,
talked
about
javascript
files,
CSS
and
other
assets
that
are
not
packaged
and
they
must
be
deployed
to
an
external
location
such
as
a
CDN.
That's
not
exactly
correct,
because
that's
one
option
that
was
originally
what
we
had
in
v1
of
the
SharePoint
framework,
but
in
late
2017,
Microsoft
added
an
additional
capability
where
we
could
then
package
up.
All
of
our
assets
like
CSS
and
JavaScript,
would
all
be
included
inside
of
the
package
and
deployed
to
the
office
365
CDN.
A
So
what
are
we
gonna
create?
Well,
we
can
create
webparts,
and
these
are
configurable,
reusable
and
purpose-built
components.
It's
gonna
give
us
also
a
framework
for
connecting
related
components.
It's
gonna
allow
us
to
add
functionality
to
SharePoint
experiences
and
also
be
context
aware
of
other
things
that
are
on
the
page.
A
Now
client-side
webparts
you're
familiar
with
server-side
webparts.
They
work
basically
the
same
way
as
far
as
the
end
user
is
concerned.
There's
an
area
on
the
page.
It's
carved
out
as
a
div
and
then
we're
gonna
have
control
over
what
gets
rendered
inside
that
div
they're
built
to
work
in
the
modern
JavaScript
driven
web,
but
they
will
work
also
in
classic
pages.
These
things
run
directly
inside
of
a
SharePoint
page,
not
on
some
other
servers
of
our
environment.
So
we
know
we're
getting
the
same
context
of
the
current
user
whenever
we're
on
the
pay.
A
A
Now
we're
gonna
see
how
to
create
a
SharePoint
framework
client-side
web
part
using
the
SharePoint
framework
tools
that
Microsoft
has
provided
and
leveraged
from
the
open-source
community.
This
includes
things
like
yeoman,
nodejs,
NPM
and
gulp.
We're
gonna
start
out
by
first
going
to
our
folder,
where
I'm
gonna
create
my
project
and
I'll,
create
a
new
folder
here
called
first
web
part
and
then
going
to
run
the
yeoman
generator
by
saying
yo
and
then
the
generator
that
I
want
to
run,
which
is
Microsoft,
slash,
SharePoint
and
that's
gonna
run
the
SharePoint
framework
generator.
A
Once
it
started,
let
me
go
ahead
and
start
entering
in
the
information
for
the
prompts
that
are
being
provided
to
us
so
for
solution.
Name,
I'll,
just
leave
it
as
the
default
of
first
web
part.
It's
get
asked
us
what
baseline
packages
we
want
to
target.
Now.
What
this
is
asking
is
it's
saying:
are
you
working
in
an
on-prem
or
in
a
SharePoint
online
environment?
A
The
other
option
is
to
let
the
generator
create
the
subfolder.
For
me.
It
then
asked
me
this
question
about
being
a
tenant
admin
and
giving
them
the
option
to
deploy
to
the
solution
to
all
the
sites
immediately
without
running
any
feature.
Deployment.
I'm,
gonna
click-
no
here
for
now,
because
I
don't
really
need
to
worry
about
this.
We'll
deal
with
this
in
another
module.
What
kind
of
a
client
side
component
I
want
to
create
while
we're
doing
something
with
webparts,
so
web
part
sounds
good?
What
do
you
want
to
name
it?
Hello
world
sounds
fine.
A
A
When
BS
code
opens
I'm
going
to
go
ahead
and
open
up
the
project,
so
I'll
say
open,
folder
and
first
web
part
and
say
select
folder,
so
here
I
get
the
default
project.
Experience
that's
been
set
up,
we
still
have
NPM.
The
background
is
downloading
all
the
necessary
packages
and
those
are
all
gonna
go
inside
this
node
modules
folder.
Alright.
Now
we
also
have
a
config
folder
and
we
have
a
source,
folder
and
inner
source
folder.
We
have
our
web
part
right
here.
Is
the
hello
world
web
part?
A
So
it's
inside
of
source,
hello,
our
source
web
parts,
hello,
world,
hello,
world
web
parts.
You
can
ignore
all
these
red
squigglies
that
pop
up
by
default,
because
they're
coming
up
there
for
a
few
reasons
for
these
first
few
here
with
these
references,
these
reg
schools
are
showing
up
because
it
can't
find
a
specific
module
and
the
reason
for
that
is
because
it's
still
downloading
modules
in
the
background,
so
we
don't
need
to
worry
about
that.
A
Second
of
all,
when
you
see
this
piece
right
here
about
looking
for
styles,
as
we
talked
about
in
the
in
the
module
here,
the
style
sheet,
this
is
actually
referencing
a
JavaScript
file
right
here
and
this
javascript
file
doesn't
exist.
It
says
it's
a
sass
file,
but
everything
that
when
you
see
referencing
specific
files
on
the
end,
you
can
always
assume
that
it
implies
J,
S
or
dot
TS.
In
our
case
here,
it's
referencing
J
s
and
there's
no
such
thing
as
a
JavaScript
file
for
this
CSS
module.
A
But
what's
gonna
happen
is
that
when
I
build
the
project,
a
Lib
folder
is
gonna.
Show
up.
That's
gonna
contain
the
JavaScript
file
for
this,
and
then
this
will
resolve
just
fine,
and
we
won't
see
this
error
anymore
same
thing
with
this,
this
Dom
element
it
doesn't
know
what
this
base
class
is
because
this
base
class
is
coming
from
this
module
up
here.
Properties.
It
doesn't
know
what
that
is
for
the
same
reason,
so
we
can
just
ignore
all
that
until
this
downloading
all
the
packages
completes
so
now
we're
just
gonna
wait
for
this
pack.
A
Once
the
project
has
come
in
completely
built
here,
so
it's
going
to
it's
gonna
start
building
the
project
and
then
once
the
projects
been
built,
we
see
this
lib
folder
and
inside
this
lib
folder.
We
can
see
certain
files
like
there's
the
sass
file
right
there,
that
was
generated
to
a
CSS
file
and
then
here's
the
JavaScript
file
that's
being
imported
in
and
we
cover
this
in
the
module
when
we
talk
about
CSS
modules.
But
that's
why
now
that
this
is
this
is
being
resolved.
Now,
these
other
pieces
as
well
they'll
all
resolve
as
well.
A
Let's
make
sure
that
everything
works
I'm
going
to
come
back
to
my
command,
prompt
and
I'm,
going
to
run
a
gulp
serve,
and
this
is
going
to
again.
This
can
build
the
project,
but
it's
also
gonna
create
a
bundle
and
then
it's
going
to
start
up
the
local
webserver
and
it's
gonna
host
the
local
workbench
and
then
load
the
workbench
in
the
browser,
and
here
I
can
come
over
here
and
click.
This
plus
sign
and
I
can
see
hello
world
and
there's
the
web
part
that
we
just
created,
and
we
can
also.
A
Furthermore,
I
can
see
things
like
if
I
come
over
here
to
the
edit
mode.
I
can
change
this
hello
world
to
be
something
like
say,
hello,
SharePoint,
and
we
can
see
how
the
text
is
changing
without
having
to
hit
an
apply
button
or
anything,
and
the
reason
that's
happening
is
over
here-
that
we
have
in
the
property
pane
I
just
scroll
down
a
little
bit.
A
What
we've
done
here
is
we've
actually
bound
this
property,
paying
text
field
control
to
the
description
property,
and
this
description
property
is
defined
right
up
here
in
this
interface
as
a
public
property.
That's
non-standard
on
the
default
based
client-side
web
part,
so
this
is
a
property
that
SharePoint
is
going
to
persist
from
when
we
edit
the
page
to
when
we
save
it
and
go
from
page
to
page.
So
this
description,
uuk,
you
access
this
by
saying
this
dot
properties
properties
is
being
defined
by
the
interface.
A
A
And
let's
put
this
browser
over
here
and
I'll:
put
the
code
over
here
and
I'm
gonna
needed
widen
up
the
browser
a
little
bit
actually
because
otherwise
it's
not
gonna
render,
and
let's
just
shrink
this
up
a
little
bit,
and
let
me
just
show
you
something
that
we
can
do
at
this.
So
we
have
welcome
to
SharePoint
instead
of
saying
customize
webparts.
Let's
say
this
is
your
first
web
part
now,
when
I
hit
save
so
I'll
hit
a
ctrl
s.
A
Now,
let's
come
over
here,
let's
make
another
change,
so
I'm
gonna
move
these
trick.
These
guys
up
a
little
bit
here
and
we're
not
going
to
do
this
tiled
experience
here,
because
the
we
don't
have
enough
real
estate
just
because
of
the
screen
recording
that
we're
working
with
we're
gonna
find
a
this
thing
here
with
this
href.
A
For
this
button
that
you
see
right
here,
I'm
gonna
change,
this
up,
I'm
gonna
change
this
up
to
put
a
hash
sign
here
for
this
and
then
I'm
also
going
to
go
in
and
show
you
how
we
can
attach
like
an
event
handler
to
this
button.
So
what
I'm
gonna
do
is
want
to
come
down
a
little
bit
farther
down
here
and
I'll,
say
this
Dom
element
and
what
that
is
is
that's
referencing.
The
div.
A
The
Dom
element
is
referencing
that
div
that's
being
put
on
the
page
where
my
entire
web
part
is
being
added,
so
I'm,
gonna,
I'm
gonna,
say
go
to
that
div,
where
the
web
part
is
being
added
and
I'm
gonna
want
to
get
a
reference
to
this
button
that
you
see
here
so
I'll
say
this
Dom
element
get
elements
like
last
name
and
I'm.
Gonna,
say
I
want
to
get
Styles
button
and
then
once
I've
done
that
I
notice.
He
gave
me
a
collection
of
elements
that
it
finds.
A
So
I
only
want
the
first
one,
because
I
know
there's
only
one
and
I'm
gonna
add
an
event
listener,
a
click
event
listener
and
I'm.
Gonna
say:
whenever
that
happens,
you're
gonna
pass
an
event
into
me
and
I
want
you
to
run
this
code
and
the
code
that
we're
gonna
run
is
something
just
very
simple:
we're
gonna,
say,
event
prevent
default
and
what
that's
doing
is
that's
gonna
say
when
you
click
on
this
a
link
or
this
anchor
tag
it's
going
to
refresh
the
page,
because
it
thinks
you're
clicking
on
a
link
here.
A
I'm
just
saying
don't
do
whatever
the
default
event
would
normally
end
up
doing.
Instead,
we're
gonna
run
an
alert
that
says:
welcome
to
SharePoint
framework,
put
a
semicolon
on
the
end
and
save
our
changes
so
we'll
let
the
project
rebuild
will
see
the
browser
refreshed
in
the
background
and
now
when
I
click
on
this
learn,
more
I
should
get
an
alert
that
pops
up
and
says
welcome
to
the
SharePoint
framework.
A
Now
I'm
gonna
go
back
and
stop
the
command
prompt
here,
so
I'm
gonna
go
through
and
hit
control.
C
I'm
have
to
hit
that
twice
and
now
I
just
stopped
the
web
server
from
running.
So
we're
going
to
close
the
browser
in
the
background
as
well.
Now,
let's
modify
the
webparts
public
properties
here.
So
if
I
come
over
here
go
back
to
our
come
over
here
to
our
manifest
file
here
and
this
manifest
JSON
and
let's
open
this
up
a
little
bit
more.
A
So
we
can
see
what
we're
doing
what
you're
gonna
see
here
is
a
section
where
we
have
all
these
pre-configured
entries
and
one
of
the
entries
we
have
is
this
properties
of
a
description.
What
that's
doing
is
is
that's
giving
us
the
ability
to
set
the
property
that
we
want
is
the
default
value
in
that
description
property.
So
now,
instead
of
saying
hello
world,
let's
say
hello
universe
and
we'll
put
a
space
in
there.
A
A
So
the
way
I
find
this
out
is
if
I
come
over
here
and
I
open
up
the
browser
and
if
I
navigate
to
developer
Microsoft
com,
slash
fabric,
that's
gonna,
take
me
to
the
office
UI
fabric
and
then
under
styles
I
can
go
to
icons
and
I
can
find
an
icon
that
I
want
to
use
here
so
like,
for
example,
I
can
do
a
search
for
one
called
birthday
cake.
So
there's
this
birthday
cake
right
here:
I'll
double
click
on
this
text
and
copy
it
and
I'll
paste
it
in
right
here.
A
And
now,
when
I
come
over
here
to
add
my
web
part,
we
can
see
now
it
has
a
totally
different
description,
name
and
icon,
and
the
default
text
is
set
to
something
different.
So
you
have
a
couple
different
options
here
of
how
you
can
go
customize.
My
web
part,
both
the
default
options
that
you
can
see
as
well
as
some
of
the
stuff
that
you
would
see,
is
the
default
text
showing
up
on
a
one
of
your
public
properties.
A
A
If
you
want
to
be
able
to
test
it
without
having
access
to
real
real
world
SharePoint
data,
the
hosted
option
is
gonna
run
on
a
real
SharePoint
site
and
it's
gonna
be
located
at
whatever
the
URL
of
your
site
is
underscore
layouts,
slash,
workbench,
dot,
aspx,
it
has
SharePoint
context
and
can
leverage
SharePoint
data
and
what
thatit's
kind
of
allow
us
to
do
is
to
have
a
real
solution.
That
is
one
that
we
can
test
and
like
a
real
world
environment.
A
The
SharePoint
workbench
is
a
local
development
time
experience
that
is
allowing
you
to
test
your
changes
immediately,
even
if
you're,
in
quote
offline
mode
and
offline
being
once
you've
got
everything
that
you
needed
for
your
project.
You
can
then
test
everything
on
your
laptop
without
having
an
internet
connection.
A
So
what's
the
debugging
experience,
look
like
well
you're
gonna,
build
and
run
on
a
local
web
server
and
automatically,
which
is
gonna
automatically
launch
the
local
SharePoint
workbench
by
just
saying
gulp
space
serve
the
other
option
you
have
is
to
build
and
run
the
solution
on
the
local
web
server,
but
without
launching
the
browser,
and
you
can
do
that
by
putting
the
no
browser
option.
This
is
useful
when
you
want
to
work
with
the
hosted
workbench
and
SharePoint
online
or
in
your
SharePoint
environment,
and
not
just
on
the
local
workbench.
A
The
source
code,
mapping
files
make
it
possible
to
debug
the
original
unbundled
typescript
code
and
effectively
it.
What
it
does
is
it's
mapping
every
single
line
in
all
the
code
inside
of
a
JavaScript
file
to
the
source
line
and
code
in
a
typescript
file.
So
when
I
set
a
breakpoint
on
the
JavaScript,
it's
really
going
to
set
a
breakpoint
on
the
typescript
and
map
the
two
to
each
other.
Now,
how
do
we
add
a
SharePoint
framework
webpart
to
a
classic
page?
A
Well,
you're
gonna
go
create
a
new
wiki
page,
and
then
you
can
do
that
by
opening
up
the
insert
and
then
tab
in
the
ribbon
and
then
selecting
add
a
webpart.
Now
this
you're
gonna
find
your
webparts
gonna
be
listed.
Your
client-side
web
parts
will
be
listed
right
alongside
all
the
other
webparts
that
are
there.
You
just
kind
of
want
to
be
able
to
there's
nothing.
That's
gonna!
A
So
here
I've
gone
ahead
and
I've
added
in
a
SharePoint
framework
web
part
to
a
classic
page.
Now
the
difference
on
a
modern
page
is
that
I'm
gonna
go
first,
go
in
and
create
a
new
page
and
then
after
I
create
that
page
when
it's
an
edit
mode,
I'm
gonna
have
this
line
going
across
the
page,
with
this
circle,
with
a
plus
inside
of
it,
and
what
that's
going
to
do
is
open
up
the
tool
bench
when
it's
clicked
on
from
there.
A
I
can
then
select
the
item
that
I
want
to
appear
inside
of
that
area,
and
it
will
get
added
to
the
page
as
you
see
here.
So
you
get
the
exact
same,
resulting
experience
by
having
your
web
part
get
added
to
the
page,
regardless
of
what
kind
of
a
page
you're
on
either
the
modern
page
or
the
classic
Paige
getting
the
web
part
of
the
page
is
the
only
thing
that's
different
in
this
demo:
we're
going
to
look
at
testing
the
web
part
in
the
local
and
in
the
hosted
workbench.
A
Let's
see
how
we
can
work
with
both
the
local
and
the
hosted
SharePoint
workbench
to
test
our
web
part
and
see
different
things.
How
we
can
use
this
in
our
standard
developer
experience
so
I've
got
my
project
open
that
we
had
in
the
last
demo,
and
the
first
thing
we'll
do
here
is
I'm.
Just
gonna
run
gulp
serve
now.
I
mentioned
what
we're
going
to
show
you
here.
I
mentioned
this
in
the
last
demo,
but
we're
gonna
spend
a
little
more
time
or
Matt.
Give
you
a
little
more
information
about
how
this
works.
A
Let's
add
our
web
part
to
the
page
and
let's
go
make
a
change
to
the
code
in
the
web
part
itself.
So,
instead
of
it
be
my
first
web
part,
this
will
be
my
second
web
part
and
I'll
hit
I'm
going
to
leave
it
just
to
go
ahead
and
hit
save
now
what's
happening
here.
What's
happening
is
the
gulp
serve
task?
A
A
manifest
file
was
created
when
SharePoint
loaded,
the
web
part
itself,
so
I
delete
it
here
and
now,
if
I
refresh
the
page,
you'll
still
see
you'll
see
that
it's
still
using
the
same
value
here
and
that's
because
the
the
manifest
that's
being
returned
by
the
local
web
server.
It's
not
gonna,
it's
not
gonna
rebuild
itself
or
it's
not
gonna
rebuild
the
the
list
of
all
the
options
that
are
available
just
when
the
code
ace
on
file
changes.
A
What
we're
gonna
have
to
do
is
you're
gonna
have
to
stop
the
web
server
and
then,
when
you
spin
it
back
up,
then
you
would
see
your
change
now.
There's
another
way
that
we
can
run
the
gulp
task
here
and
I
can
do
something
that
says:
I
can
do
a
gulp
serve
no
browser
and
what
that
does
is
that's
still
gonna
spin
up
the
local
web
server
and
it's
gonna
build
a
project.
A
Do
the
bundling
spin
up
a
local
web
server,
but
it's
not
gonna
launch
the
browser
force,
it's
gonna
leave
it
closed
and
you
may
wonder:
well.
Why
are
we
doing
that?
What's
the
use
there?
Well,
maybe
there's
a
case
where
I
don't
want
to
launch
the
local
web
server.
Instead,
what
I
want
to
go
is
I
want
to
use
my
hosted
workbench
in
SharePoint
Online.
So
let's
take
a
look
at
how
that
works.
A
I'm
gonna
navigate
over
here
to
underscore
layouts,
slash,
workbench
dot
aspx
now
before
I.
Do
this
I
want
you
to
keep?
Let's,
let's
modify
that?
Let's
change
the
URL
here.
Let's
change
the
browser's
layout
a
little
bit
and
watch
over
here
in
the
background,
even
though
I'm
clearly
not
on
my
local
machine
right
here
when
I
run,
this
I
want
you
to
see
that
something.
It's
gonna
report
that
it's
being
hit
by
something
it's
requesting
some
files
so
notice
here
it
requested
manifest
JSX.
A
Doing
then,
is
it's
not
only
going
to
show
me
all
the
stuff
that's
available
to
me
in
SharePoint
Online,
but
it's
also
going
to
show
me
webpart,
that's
running
locally
on
my
local
on
my
local
server
on
localhost.
Now,
if
I
select
this
you'll
see
over
here,
in
the
left
hand,
side
you'll
see
a
request
come
up
for
the
files
related
to
my
web
part,
there's
the
bundle
it's
being
requested.
There's
these
localized
strings
are
being
requested,
and
this
is
all
showing
up
in
my
sharepoint
online
environment.
A
The
reason
why
this
is
happening
is
because
what
the
workbench
does
in
SharePoint
Online
is
it's
not
only
going
to
get
a
list
of
all
the
elements
that
are
available
to
me
in
SharePoint
Online
that
are
installed
inside
this
tenant.
But
it's
also
gonna
say
give
me
the
local,
manifest
file
to
show
me
stuff
that
won't
that
you
want
to
test.
A
So
I
can
prove
this
by
if
I
can't,
we
here
remove
this
webpart
and
if
I
shut
down
the
local
web
server,
and
if
I
refresh
the
workbench
you're
gonna,
see
it's
gonna,
give
me
an
error
or
a
little
warning
and
saying
I'm
expecting
I'm
expecting
something
else
to
be
here
there.
So
it
wasn't
patient
enough
there.
So
it
says
there,
your
webparts,
not
gonna,
appear
on
the
tool
box.
A
Make
sure
that
gulp
serve
is
running,
but
really
what
it's
saying
is
it
saying
I'm
trying
to
hit
the
manifest
file
on
localhost
on
your
local
machine
and
I
can't
hit
it?
And
so
therefore,
I
can't
show
you
anything.
That's
running
off
your
local
machine
because
the
local
workbench
or
the
hosted
workbench
in
SharePoint
Online
is
designed
to
be
used
with
SharePoint.
A
So,
first,
let's
talk
about
some
utilities.
The
SharePoint
framework
includes
many
utility
libraries
that
make
developing
SharePoint
framework
components
easier
for
developers
to
use
these
utilities.
You
simply
have
to
import
the
appropriate
utility
library
it
may
or
may
not
be
necessary.
It
may
already
be
there
and
then
you're
going
to
need
to
just
call
the
methods
on
those
libraries.
So
one
thing
we
have
our
status
renderers
and
we
can
use
these
when
the
web
part
is
loading
information
from
SharePoint
or
external
locations
or
to
display
errors.
A
If
a
webpart
runs
into
issues
that
can
prevent
it
from
working
properly,
this
is
available
via
the
web
part
context,
property
and
it's
gonna
use
the
entire
web
part
user
experience.
Loading
indicators
are
useful
when
you're
indicating
that
you're
loading
content
in
your
web
part
error
indicators.
Those
are
when
you
have
errors.
A
This
is
where
a
loading
indicator
looks
like
you're
going
to
display
the
loading
indicator
by
simply
calling
display
loading
indicator
and
then
you're,
gonna,
clear
it
or
remove
it
by
saying
clear
loading
indicators.
So
here
we're
first
clearing.
It
make
sure
there's
nothing
there
passing
in
the
Dom
element
where
we
want
to
display
it
and
then
we're
gonna
display
it
by
saying
display
loading
indicator
with
a
message
at
the
end.
So
we
can
see
loading
message,
an
error
indicator.
A
A
A
Now,
there's
a
very
popular
library
called
lodash,
that's
available
on
the
internet
and
it's
a
fairly
big
library.
But
what
Microsoft
has
done
is
they've
created
a
subset
of
the
lodash
library
that
contains
some
really
common
things
that
you
end
up
wanting
to
use
things
like
find
index
and
escape,
and
what
you
can
do
here
is
you'll
be
able
to
leverage
this
by
including
it
in
your
project.
A
We
can
also
determine
the
display
mode
of
a
page
so
for
a
classic
page
pages
in
a
web
and
a
web
part
can
be
in
different
mode,
so
a
web
part
can
be
in
an
edit
mode
and
in
a
display
mode,
even
if
the
page
is
in
edit
mode
or
display
a
modern
page.
It
doesn't
work
like
that.
The
page
in
the
web
part
always
in
the
same
mode.
If
the
page
is
in
edit
mode,
all
the
web
parts
are
in
edit
mode
as
well.
A
A
So
let's
talk
about
different
display
modes,
so
for
our
classic
page
we
have
a
page
is
not
in
edit
mode.
So
here
we
can
see
that
we're
not
in
edit
mode
on
the
top
left
hand
side,
and
then
we
have
another
one
where
the
page
is
in
edit
mode
and
the
web
part
is
also
not
in
edit
mode
now
here,
on
the
right
hand,
side
we
can
see
what
the
pages
in
edit
mode
and
the
web
part
will
also
be
in
edit
mode.
It's
not.
We
don't
have
a
difference
between
the
two
experiences.
A
However,
on
a
modern
page,
it
doesn't
exist
like
that.
The
page
display
mode
is
always
gonna,
be
the
same
as
the
as
a
web
part
display
mode.
So
the
page
is
in
edit
mode,
the
web
parts
in
edit
mode
as
well.
Let's
talk
about
the
page
context.
This
is
available
with
some
mock
data
if
I'm
working
in
the
local
workbench,
but
you
get
the
full
data
available
to
it
if
you're
in
the
SharePoint
Online
workbench
things
that
you
get
are
things
like
the
web.
A
A
A
Now
another
thing
we
can
check
on
is
the
environment
type,
and
this
is
gonna
be
used
to
determine
where
a
web
part
is
running.
This
allows
us
to
detect
if
we're
in
the
local
workbench
or
in
a
real
SharePoint
environment
like
the
hosted
workbench,
and
it
can
do
that
by
looking
at
the
current
environment
type
that
we're
currently
in
so
I
can
say.
A
Environment
type
using
the
environment
object
from
the
SP
core
library
package
and
I
can
check
to
see
if
it's
of
type
local
and
if
it
is
then
I,
know
that
I'm
running
in
my
local
workbench.
So
here
you
can
see
where
I'm
it
can
show
it's
displaying
that
either
in
my
local
wor
patch
or
I'm
in
a
real
SharePoint
environment,
and
this
is
useful
if
you're
doing
things
like,
if
you
have
mock
data,
that
you're
going
to
test
in
the
local
workbench.
So.
A
Now,
let's
talk
a
little
bit
about
logging,
the
shipwright
framework
includes
a
built-in
logging
mechanism
and
all
logging
is
output
to
the
JavaScript
console.
You've
got
for
static
logging
methods,
available
of
info,
warned
error
and
verbose,
and
the
descriptions
are
pretty
self-explanatory
and
what
these
do.
The
logging
methods
are
also
going
to
share
the
same
signature.
There's
three
parameters:
you're
going
to
pass
in
you
have
a
source
parameter,
which
is
allows
you
to
define
the
source
of
the
logging
information,
such
as
the
method
name
of
the
class
name.
A
A
So
here
you
can
see
where
I've
got
a
I'm
I'm
importing
the
log
object
from
the
SP
core
library
package
and
I'm
running
these
three
different
commands.
So
I've
got
the
hello
world
component
and
that
hello
world
component
I'm
using
an
info
or
warn
or
an
error
or
a
verbose
message.
You
can
see
a
bunch
of
different
options.
There
notice
the
error
is
passing
in
an
error
object.
Instead
of
passing
in
a
string.
A
Now,
what
if
I
want
to
go
if
I
want
to
load
a
JavaScript
or
a
CSS
file
from
somewhere
else
on
the
Internet
at
runtime?
So
this
would
be
useful
if
I'm
going
to
be
importing
like
a
CSS
class
from
some
external
resource
like
if
I'm,
using
the
jQuery
UI
library,
that
is
expecting
me
to
use
different
CSS
files.
A
I
can
do
that
using
a
thing
called
the
component
loader
or
the
SP
component
loader.
This
is
located
in
the
SP
loader
package,
so
here
I'm
in
Iran,
SP
component,
loader,
load
script
and
I'm
gonna,
give
it
the
URL
the
script
and
then
the
object
that
I
want
it
to
be
defined
as
or
loaded
into.
So
in
this
case
here
you
can
see
I'm
loading
jQuery
here
you
can
see
I'm
loading
jQuery
into
using
the
component
loader,
which
is
going
to
return
a
promise
and
then
from
there
I
can
work
with
that
promise.
A
Let's
take
a
look
at
how
we
can
work
with
these
different
api's
from
the
SharePoint
framework
in
a
demo.
Now
we're
gonna
take
a
look
at
exploring
some
different
components
from
the
SharePoint
framework
API.
Now
we've
already
gone
ahead
and
coded
up
these
things
so
I'm
just
gonna
walk
you
through
the
resulting
example
from
this
and
there's
a
lab
exercises
associated
with
this
module.
That'll
walk
you
through
doing
everything
that
you
see
here.
So
the
first
thing
is
that
we
can
look
at
is
checking
the
current
page
mode
and
page
state.
A
So
the
way
that
I'm
doing
that
is
up
here.
You
can
see
that
I've
taken
the
from
the
SP
code,
library,
I've
added
in
a
couple
additional
import
statements
where
I'm
importing
the
display
mode,
environment,
environment
type
and
log
now,
where
we're
using
the
display
mode,
is
right
down
here
inside
the
web
part.
A
Have
to
give
it
a
second
here,
because
we
have
a
loading
message
and
I'll
show
you
where
we're
using
that
in
just
a
few
minutes
here
we
can
see
that
we're
currently
in
edit
mode
if
I
was
no
longer
in
edit
mode
and
I
actually
saved
the
page
here
and
I
got
out
of
edit
mode
here.
Then
this
one
instead
show
me
that
I
was
currently
in
read
mode.
A
We
can
see
that
it's
showing
me
that
I'm
in
my
local
environment,
so
I'm
way
to
check
to
see
either
one
if
I'm
in
local
or,
if
I'm
in
edit
mode
as
well.
Here
now,
we
can
also
use
this
logging
API
that
I
mentioned
in
the
slides
part
of
this
module.
So
you
see
I'm
importing
the
log
statement
right
here.
If
I
scroll
down,
you
can
see,
I've
got
four
log
messages
that
I'm
writing
out
info
warned
error
in
verbose
and
what
I'm
doing
is
I'm
saying
that
there
come
all
coming
from
hello
world.
A
A
And
I'm
gonna
go
over
here
to
the
console
and
once
the
web
part
loads,
you
can
see
here
that
I'm
getting
my
hello
world
message
showing
up
right
here.
I
have
another
one
with
a
warning
showing
up
I,
have
an
error
message:
that's
showing
up
here
and
I'm,
seeing
the
verbose
message
showing
up
and
notice
it's
showing
me
a
little
bit
of
a
prefix
here
of
an
instance
of
the
web
part
plus
I'm
saying
this
is
coming
from
hello
world
and
then
it's
writing
out.
A
So
let
me
show
you
how
we're
doing
that
so
come
up
pick
back
up
here,
I'm
calling
on
the
current
context
of
the
web
part
I'm,
saying
display
the
loading
indicator
for
this
current
elements
of
the
div
that
the
web
part
is
being
rendered
in
and
put
message
in
there
as
the
text
so
I'm
showing
it
and
then
I'm.
Saying
now,
I'm
gonna
set
a
timeout
that
I
want
to
clear
the
loading
indicator
on
this
element
and
I'm.