►
Description
This module will introduce you to the SharePoint Framework as well as walk you through getting your local & online environment configured for developing with the SharePoint Framework.
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-getting-started.
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
for
office,
servers
and
services
and
in
this
module,
we're
gonna,
look
at
getting
started
with
the
SharePoint
framework
and
in
the
first
section,
we're
going
to
focus
on
just
introducing
the
SharePoint
framework.
So
in
this
section
we're
gonna
cover
what
is
the
SharePoint
framework
and
where
is
it
supported?
And
then
we'll
talk
about
configuring.
A
We've
had
different
development
models
throughout
the
years
and
the
current
model
that
we're
focused
on
using
is
something
called
the
SharePoint
framework
or
SPF
X,
and
also
leveraging
something
called
the
office
fabric
or
the
office
UI
fabric.
And
the
idea
here
is
to
focus
primarily
on
building
applications
that
are
client-side
and
hosted
inside
a
SharePoint
and
for
those
things
that
are
not
hosted
inside
a
SharePoint
and
can't
be
client-side.
We
can
use
things
like
remote
experiences,
such
as
those
hosted
within
a
juror
or
other
external
services,.
A
Some
of
the
different
extensibility
principles
are
focused
around
the
SharePoint
framework
and
building
long-term
value-added
services
for
enterprise
mobility
include
the
following:
we
want
to
be
able
to
provide
an
application
development
framework
that
aligns
to
both
first
parties
and
third
parties.
Now
what
this
means
is
that
first
party
is
considered
Microsoft.
A
The
second
principle
is
to
be
able
to
build
on
industry-leading
client-side
solutions,
on-premises
and
in
the
cloud,
so
what
they
want
to
be
able
to
be
able
to
build
applications,
client-side
based
applications,
primarily
that
then,
can
be
leveraged
both
in
office
365
and
SharePoint
Online.
But
then
we
also
want
to
use
them
on
Prem
as
well.
The
SharePoint
framework
is
available
both
on
SharePoint
Server,
2016
and
SharePoint,
Server,
2019
and,
of
course,
always
in
SharePoint
Online,
which
is
in
the
office
365
in
the
cloud.
A
The
third
principle
is,
unlike
unlocking,
the
potentials
of
SharePoint
in
the
Microsoft
graph
on
desktops
or
any
device.
It's
a
mobile
first
experience,
and
it's
one
that
also
has
API
is
to
allow
us
to
very
easily
interact
with
SharePoint
and
custom
data
that
lives
inside
or
exposed
via
the
Microsoft
graph
that
lives
inside
of
office
365,
but
then
very
easily
also
be
able
to
call
other
services
that
may
be
secured
with
Azure
ad
or
data
that
lives
outside
of
the
Microsoft
domain.
A
A
You
can
always
create
your
own
server
side
component,
but
you're
gonna
host
that
yourself
in
some
other
location,
it's
also
lightweight
and
for
both
web
and
mobile,
because
it's
client-side
solutions
and
because
we
relying
just
on
JavaScript
and
HTML
and
CSS
and
images,
it's
gonna
run
the
exact
same
way
in
the
browser,
as
it
does
in
the
mobile
experiences
as
well.
We
want
to
be
able
to
power
our
own
experiences.
We
want
to
be
able
to
take
SharePoint
and
extend
it
to
create
our
own
custom
webparts.
A
A
Now
before
we
dive
too
far
into
this,
we
need
to
look
at
something
called
a
modern
page.
What
is
a
modern
page,
the
difference
between
a
modern
page
and
what
we
formerly
knew,
which
is
now
we're
calling
those
classic
pages
is
that
a
modern
page
is
client-side
rendered
is
not
rendered
on
the
server-side,
which
is
how
we
used
to
do
like
server-side
based
webparts,
its
natively
responsive,
meaning
that
if
I
resize
the
browser,
it's
gonna,
resize
and
re-render
out
the
page.
A
That
makes
the
most
sense
for
the
current
experience
web
parts
that
you
create
well
I'll,
be
running
in
rear-end,
'red
client-side
as
well.
They
won't
be
running
server-side,
we'll
also
be
able
to
leverage
persistent
caches,
so
data,
that's
being
cached
by
the
SharePoint
framework,
API
or
in
other
different
api's
that
they
provide
to
us,
such
as,
like
local
storage
and
other
things
that
we
can
do
in
the
browser,
and
things
are
also
mobile,
optimized,
meaning
that
they
are.
A
Now
modern
site
pages
must
be
easily
create
easily
creatable
to
create
beautiful.
Looking
pages
they're
going
to
help
you
communicate
ideas
and
information
using
new
authoring,
canvases
and
a
gallery
of
web
parts.
Some
of
the
different
building
blocks
that
are
available
to
us
are
things
like
I
can't
we're
gonna
have
this
canvas
and
web
parts,
and
these
are
all
built
using
client-side,
HTML
and
JavaScript
pages
are
reusable
in
custom
applications
as
well.
A
Mobile
support
is
built
in
from
the
start,
which
means
it.
Current
reflows
across
device,
sizes
and
pages
aren't
fast
and
fluid
and
pages
are
also
can
get
better
with
the
Microsoft
graph,
because
developers
can
leverage
the
Microsoft
graph
to
surface
relevant
pages
to
the
people
that
need
to
read
them
now
is
all
SharePoint
Online
development
done
in
JavaScript,
and
the
answer
is
no
and
in
many
similar
ways
as
SharePoint
add-in
model.
Server-Side
development
is
needed
for
some
back-end
services.
A
The
SharePoint
framework
is
simply
concentrating
on
the
user
interface
side,
not
on
the
fundamentals
around
the
API
usage,
so
you
can
still
create
server-side
solutions,
but
they're
not
going
to
be
visible
or
surfaced
inside
of
SharePoint
in
SharePoint
Online.
Instead,
you
can
create
a
SharePoint
framework
component.
That's
going
to
interact
with
those
back-end
api's.
A
Now,
what's
involved
in
actually
getting
your
environment
up
and
running?
Well,
there's
a
couple
different
things:
you
need
to
take
into
consideration:
office,
365,
developer,
tenant,
setup
steps
are
pretty
simple
and
straightforward.
You're
first
gonna
set
up
an
office
365
tenant,
you're
gonna
need
that
to
do
your
development
now.
A
This
is
something
that
can
be
any
tenant
that
you
use
for
your
existing
company
office
365,
but
you
can
also
sign
up
to
the
office
developer
program
and
get
access
to
a
developer
tenant,
which
is
the
exact
same
thing
as
you
would
normally
get
it's
just
if
you
were
signing
up
to
office
365.
This
just
gives
you
a
little
bit
of
an
easier
way
to
kind
of
work
with
stuff
and
it's
free
as
well.
A
You
can
also
get
a
you're
also
going
to
need
to
create
an
app
catalog
site,
and
this
is
where
you're
gonna
deploy
your
components
and
you
can
think
of
it
almost
as
like
the
SharePoint
store
in
a
sense
where
you're
going
to
install
your
components,
such
as
a
web
part
into
your
sites.
From
this
from
this,
this
app
catalog
site
you're
then
going
to
want
to
create
a
new
site
collection
for
testing.
A
A
This
is
for
where
you
can
test
your
components
when
they're
going
to
be
running
up
in
office
365,
where
you
want
to
work
with
real
live
data,
so
you
can
sign
up
for
an
office
365,
developer,
tenant
by
signing
up
to
the
office
developer
program
and
you're,
going
to
receive
a
welcome
email
with
a
link
to
sign
up
for
your
office.
365
developer
tenant,
then
you're
going
to
create
the
app
catalog
site.
A
You
think
I
want
to
create
a
new
developer,
site
collection
and
so
technically
the
developer
site
collection
is
targeted
for
add
in
development.
But
you
don't
you
you're
gonna
need
to
have
it
for
a
location
to
test
your
web
parts
for
the
SharePoint
framework
and
using
the
online
workbench.
It
can
really
be
any
site,
but
the
developer
site
just
makes
a
lot
of
sense.
A
Here's
the
hosted
workbench
now.
What
this
is
is
that
this
is
a
special
page
that,
where
is
gonna,
be
a
blank
page
that
you
can
add
web
parts
to
to
test
them
out,
and
this
is
not
only
going
to
show
us
the
web
parts
that
are
been
deployed
to
our
SharePoint
tenant
in
the
app
catalog.
But
it's
also
going
to
show
us
all
of
the
web
parts
that
are
that
we
may
be
running
off
of
our
local
developer
environment,
on
our
laptop
or
on
our
desktop
that
we
have
in
our
office.
A
So
this
first
demo
we're
going
to
look
at
how
to
configure
our
office
365
environment
for
SharePoint
development.
The
first
step
is
to
create
and
configure
your
SharePoint
online
developer
tent,
so
I'm
going
to
do
that
by
first
launching
the
browser
and
going
to
portal
office
com
I'm,
going
to
start
by
logging
in
to
my
office
365
tenant.
Now,
if
I
come
over
here
to
add
Ben
and
if
I
scroll
down
to
the
SharePoint
admin
center.
A
A
I'm
then
gonna
click
on
app
catalog
and
you
can
see
here
that
I
do
actually
have
an
app
catalog
that
has
been
created
ahead
of
time.
For
me,
if
I
had
not
have
one
created,
it
would
have
taken
me
to
a
page
to
where
I
can
then
create
an
app
catalog,
and
everything
is
pretty
self-explanatory
from
there
and
how
it
actually
created.
Now.
The
nice
thing
I
want
to
do
is
create
a
site
where
I
can
do
I
can
test
all
of
my
custom
development.
A
Once
that's
done,
I'm
gonna
click,
OK
SharePoint
is
now
gonna
go
ahead
and
create
my
new
site
collection.
This
is
gonna,
take
some
time
here,
so
I'm
gonna.
Let
this
go
ahead
and
finish
and
we're
not
gonna
wait
around
for
this
I'm.
Just
gonna
go
ahead,
and
let
this
finish
in
this
next
section
we're
going
to
look
at
how
to
configure
your
SharePoint
developer,
environment
and
understanding
and
installing
the
necessary
tools
we're
going
to
look
at
a
comparison
between
what
traditional
sharepoint
server
side
development
look
like,
and
what
the
difference
is.
A
With
a
this
client
side
developed
from
model
we're
a
look
at
nodejs,
NPM,
yeoman,
gulp
and
typescript
SharePoint
flavor
leverages
an
open-source
nodejs
based
tool
chain
and
embraces
all
the
web
frameworks
and
code
editors.
You've
got
a
couple
different
sections
of
things
that
we
need
to
look
at.
You've
got
to
build
process
and
tooling.
You've
got
things
like
yeoman
templates
and
what
yeoman
is
is
that's
gonna,
replace
the
file
new
project
experience
that
we
in
Visual
Studio
gulp,
is
a
task
runner
it
effectively
is
gonna
replace
the
MS
bill.
A
Nodejs
is
the
runtime
all
of
these
tools
that
I'm
mentioning
here,
they're
all
built
on
top
of
nodejs.
So,
just
like
you
would
normally
install
dot
the.net
framework,
we're
gonna,
install
nodejs
that
we
can
run
all
these
tools.
These
are
tools
that
are
not
built
and
provided
by
Microsoft,
whether
whether
they're
done
by
the
grater
web
community
they're
all
open-source
tools,
so
the
open
source
community
is
chosen
to
use
nodejs
so
that
all
of
these
things
would
be
cross-platform
and
work
on
all
different
platforms,
not
just
Windows
or
just
on
Mac
OS
or
on
Linux.
A
We
have
other
things
too,
like
NPM,
systemjs,
web
pack,
SAS
and
typescript.
We
can
then
choose
to
use
which
way
web
framework.
We
want
to
leverage
inside
of
our
custom
configurations
or
custom
components.
We
could
use
react
or
angular
and
knock
out
jQuery.
It
really
doesn't
matter.
It's
totally
up
to
you,
as
the
SharePoint
framework
does
not
limit
you
from
any
choices
and
then
finally,
you're
going
to
need
a
code
editor
to
do
all
of
your
work.
A
Most
people
are
using
Visual
Studio
code
by
Microsoft,
it's
a
very
lightweight
version
of
Visual
Studio,
and
it
really
is
just
a
text
editor
with
some
nice
and
handy
extensions.
You
can
choose
another
one.
If
you
wanted
to
something
as
simple
as
notepad
or
atom
or
sublime
or
webstorm,
it
really
doesn't
matter,
but
in
this
course
you're
gonna
see
us
use
Visual
Studio
code,
it's
free,
it's
small!
It's
fast
and
lightweight
it's
a
great
option.
A
Now
what
I
find
is
that
most
people
get
a
little
confused
when
they
see
the
differences
with
all
these
new
tools
and
this
new
development
model
and
they're
kind
of
get
a
little
intimidated,
sometimes
as
well,
because
it's
foreign,
they
don't
know
what
these
things
are.
So
what
I
want
to
do
is
I
want
to
compare
these
server-side
developer
tools
to
the
client-side
dev
tools
that
we're
going
to
be
using
in
SharePoint
framework
development.
So,
for
example,
here
across
the
top
we
have
is
Express
dotnet,
nougat,
msbuild,
C,
sharp
and
Visual
Studio
project
templates.
A
This
is
all
what
you've
been
used
to
using
if
you've
done
in
the
asp.net
development
or
server-side
based
web
part
development
with
previous
versions
of
SharePoint.
The
first
thing
where
I
look
at
is
no
js'.
No
js'
is
is
just
a
JavaScript
runtime
for
running
JavaScript
on
the
server.
It
is
a
wrapper
to
the
v8
engine
out
of
the
Chrome
browser
and
with
some
extra
api's
that
allow
the
v8
engine
to
run
outside
of
the
browser
instead
run
on
a
desktop.
A
We're,
not
you,
don't
have
to
be
a
node
developer
for
this
to
do
from
cheer
point
framework
development.
Instead,
all
you're
gonna
be
doing,
is
you're
just
gonna,
be
installing
nodes
so
that
all
the
other
tools
to
the
right
are
gonna
work.
You
then,
are
gonna
want
to
install
NPM,
and
this
is
a
package
manager
just
like
NuGet
fetches
packages
from
the
nougat
registry.
A
Npm
is
one
of
many
package
managers
that
is
gonna
fetch
packages
from
the
NPM
j/s
registry
msbuild
is
a
we
are
replacing
that
which
is
just
a
task
runner
with
something
called
gulp
gulp
takes
tasks
that
are
defined
in
JavaScript
and
it
will
run
them
for
us.
We're
gonna
use
this.
Do
things
like
building
our
project
and
transpiling
the
sass
files
to
CSS
or
typescript
to
JavaScript,
and
then
bundling
it
up
and
doing
all
the
packaging
speaking
of
typescript.
A
That's
the
language
that
we're
going
to
be
working
with
typescript
is
a
superset
of
JavaScript
with
a
lot
of
extra
stuff
in
it
to
make
JavaScript
development
a
little
bit
easier
if
you
are
not
familiar
with
JavaScript
or
you're,
not
familiar
with
typescript.
Think
of
it
as
like
a
C
sharpish
kind
of
flavor
to
JavaScript,
it's
maybe
a
bad
example,
but
really
all
it
is
it's
just
giving
us
if
you
think
about
from
a
very
simplistic
way.
A
Typescript
gives
you
a
lot
of
stuff,
but
the
big
one
that
that
gives
you
is
type
checking
and
the
ability
to
use
classes
and
future
features
coming
to
JavaScript
inside
of
typescript.
Today,
when
you
compile
your
project,
you're
not
going
to
be
deploying
typescript,
you're
gonna
be
deploying
JavaScript
in
your
components.
The
same
way
when
you
build
a
web
part,
you
don't
deploy
c-sharp
code,
you
deploy
compiled
code
and
then,
finally,
on
the
far
end,
we
get
this
thing
called
yeoman
and
Visual
Studio
code,
Visual
Studio
code
is
our
code
editor.
A
What
yeoman
is
is
a
task
or
a
project,
scaffolding
tool
that
what
happens
is
that
you're
going
to
install
yeoman
and
then
a
yeoman
generator
and
then,
when
you
run
the
yeoman
generator,
it's
gonna
ask
you
a
bunch
of
questions
just
like
if
you
were
in
Visual
Studio
and
you
did
file
a
new
project
and
you
pick
the
template.
It's
gonna
ask
you
a
bunch
of
questions
once
you've
answered
those
questions.
A
So,
just
to
go
in
a
little
more
depth
here,
no
js'!
This
is
a
cross-platform
JavaScript
runtime
and
it
pretty
much
serves
the
same
role
as
the
dotnet
framework
does
for
c-sharp
based
projects.
All
of
the
SharePoint
frameworks.
Open-Source
tooling,
is
built
on
top
of
nodejs
and
at
the
present
time,
recording
the
SharePoint
framework
supports
nodejs
long
term
support
version
v8.
A
Now,
if
you
want
to
go
through-
and
you
want
to
use
a
different
version
of
nodejs,
you
can
but
make
sure
you
check
with
the
SharePoint
framework
documentation
and
find
out
what
version
they're
recommending
as
if
you
try
to
go
with
a
more
recent
version.
That
is
not
in
the
LTS
branch,
isn't
more
in
the
current
or
the
stable
branch,
and
you
may
not
have
the
desired
experience
there.
So
just
double
check
on
what
you
what
you're
gonna
use
before
you
before
you
start
installing
it
another
version
of
node.
A
Then
you
have
a
package
manager
and
this
is
the
NPM
tool.
What
this
is.
This
is
kind
of
fetch
packages
from
the
NPM
j/s
registry,
and
it
effectively
replaces
what
we
used
to
use
NuGet
for
in
a
dotnet
server-side
based
project.
This
is
included
when
you
install
nodejs
yeoman
is
a
project.
Scaffolding
generator
and
it's
job
is
to
run
the
other
generators
that
will
be
installed
and,
in
our
case
we're
gonna
have
a
generator
for
the
SharePoint
framework.
A
So
what
you're
gonna
do
is
you're
gonna,
say
yo
space
and
then
the
name
of
the
generator
and
what
the
yeoman
does
is.
It
will
spin
up
the
generator,
which
will
then
ask
you
a
series
of
questions
and
then
the
generator
tells
yeoman
how.what
folders
are
supposed
to
be
created.
What
files
are
supposed
to
be
created,
what
things
are
supposed
to
be
changed
in
the
files
etc?.
A
This
is
something
that
you're
gonna
have
to
install,
as
well
as
the
SharePoint
framework
generator.
As
you
see
there
on
the
slide,
gulp
is
a
task
runner,
and
this
is
the
thing
that's
going
to
replace
what
we
call
msbuild,
that
we
use
for
the.net
framework.
We
define
tasks
using
JavaScript,
and
this
is
going
to
allow
us
to
have
like
repeatable
processes
that
are
just
going
to
be
given
a
name
and
say:
go
run
this
name
so,
for
example,
doing
things
like
saying,
compile
or
package
or
starting
a
testing
process.
A
A
Typescript
is
effectively
type
JavaScript.
It
is
a
superset
of
the
JavaScript
language
and
it's
going
to
compile
down
to
plain
old
JavaScript
the
development
language
for
the
base
templates
and
the
SharePoint
framework
projects
is
typescript.
Now
you
can
also
integrate
native
javascript
in
the
SharePoint
framework
customizations.
If
you
order
to,
you
can
also
integrate
native
JavaScript
into
SharePoint
framework
customizations,
without
the
need
to
really
rewrite
everything.
There's
a
little
bit
more
work
that
you're
going
to
have
to
do,
though
it
depends
on
what
you're
actually
trying
to
integrate
in
to
a
project.
A
So
this
isn't
as
just
simple
as
copy/paste.
It
really
depends
on
what
you
are
doing
to
see
what
other
work
you
may
end
up
having
to
do
here.
The
version
of
typescript,
that's
supported
by
the
SharePoint
framework,
is
included
in
each
SharePoint
framework
project
in
this
demo.
We're
going
to
look
at
how
to
configure
your
developer
environment
and
installing
all
the
necessary
tools
that
you
need
to
do
proper,
SharePoint
framework
development.
A
Let's
go
set
up
our
local
SharePoint
developer
environment.
Now.
The
first
thing
I
need
to
do
is
install
a
code.
Editor
and
I
can
do
that
by
grabbing
the
Visual
Studio
code,
editor
by
going
to
code
visual
studio,
calm
and
here
I
can
go
ahead
and
download
the
editor
and
install
it.
I
already
have
one
installed
an
instance
of
it,
install
that
you
can
see
here
so
I.
Don't
need
to
go
about
doing
that
in
this
step.
The
next
thing
I
need
to
do
is
I
need
an
installed.
A
How
about
how
to
go
about
installing
that?
So
once
that's
done,
you
can
see
here.
I
have
node
installed:
I
can
check
to
see
what
packages
are
installed
so
far,
so
I
can
say:
NPM
lists,
G
and
then
depth
equals
zero.
So
what
this
is
doing
is
telling
NPM,
which
is
the
package
manager
and
package
management
utility.
A
It's
saying
list
out
all
of
the
packages
that
are
globally
installed
so
with
the
G
and
then
R
at
a
depth
of
zero,
and
that
basically
says
ignore
all
the
ones
that
are
installed
as
dependencies
from
something
else.
That's
been
installed
only
show
me
the
ones
that
I've
installed.
So
in
this
case
here
NPM
is
the
only
one
that's
listed
because
it
came
with
the
node
install
now.
A
I
need
to
install
a
couple
different
things:
I'm
first
gonna
need
to
install
yeoman,
so
I'm
gonna,
say
npm
install,
I
could
say
global
or
I
could
just
say
g
and
then
I'll
say:
space
yo,
that's
gonna,
download
the
yeoman
scaffolding
engine
and
I'll.
Just
let
this
finish
alright.
So
now
that
yeoman
is
installed.
I
now
do
you
install
the
generator
that
yeoman
is
gonna
use
to
work
with
the
sharepoint
framework,
and
so
I'm
gonna
do
that
by
saying
npm
install
global
at
Microsoft,
slash
generator
sharepoint
with
that
installed.
A
Global
gulp
and
that's
gonna
install
my
task
runner.
So
now
we
have
everything
set
up
and
we're
in
pretty
good
shape,
so
I'll
then
go
back
and
say:
NPM
lists
everything
out
that
we've
installed
make
sure
that
we
see
everything
that
we
need,
which
is
yeoman
the
SharePoint
framework
generator
yep.
So
here
we
go
yeoman
the
SharePoint
framework,
generator
and
gulp,
and
we
know
that
it's
all
installed
and
we're
in
good
shape.
So
now
we're
ready
to
do
SharePoint
framework
development.
A
Now
that
we
have
set
up
our
developer
environment.
Let's
look
at
interacting
with
SharePoint
framework
webparts
on
modern
pages,
we're
going
to
talk
about
adding
client-side
webparts
to
modern
pages,
introducing
the
new
reactive
property
pane
and
validating
local
SharePoint
framework
developer
environments.
A
Sharepoint
is
really
built
upon
webparts.
It's
a
really
core
functionality
that
we
have
extending
the
web
part
or
the
SharePoint
experience
using
reusable
components,
they're,
configurable,
reusable
and
purpose-built
components,
and
it's
a
framework.
We
also
have
our
framework
Connect
for
connecting
related
components.
A
Now,
what's
different
here
from
previous
versions
of
SharePoint
development
models?
Is
that
we're
working
with
client-side
web
parts,
not
server-side
web
parts
but
they're
still
just
web
parts,
there's
still
just
little
squares
that
have
been
carved
out
on
a
page
where
we
can
have
our
own
functionality,
they're
built
for
the
modern,
JavaScript
driven
web
and
they
run
directly
inside
of
a
SharePoint
page.
So
they
have
the
same
context
as
the
current
user.
A
That's
interacting
with
the
SharePoint
page,
adding
a
SharePoint
framework
web
part
to
a
page
is
very
simple:
you're
gonna
put
a
web
part
or
a
page
inside
of
edit
mode
and
then
you're
gonna,
add
a
web
part
via
the
toolbox.
So
here
you
can
see
on
the
slide.
I'm
gonna
click
that
little
red
plus
in
the
middle
of
the
that
line
going
across
horizontally
across
the
screen
and
when
I
do
that.
I'm
gonna
get
this
dialogue
to
where
I
can
choose
the
web.
Part
I
want
to
I
wanted
to
add
to
the
page
from
there.
A
A
A
So
here
we
have
a
page,
that's
been
created
and
I'm
gonna
go
ahead
and
just
close
out
of
this
new
experience
here
and
one
of
the
other
things
I'm
going
to
do
is
I'm
gonna
go
ahead
and
kind
of
hide
out,
hide
or
shrink
up
this
top
part
of
the
page
here
to
make
it
a
little
bit
easier
to
work
with
and
I'm
just
gonna
call
this
my
my
playground,
alright.
So
now.
A
The
first
thing
that
we'll
do
here
is:
let's
go
ahead
and
add
a
new
web
part,
so
I'll
do
that
by
clicking
on
this
plus
and
choosing
text,
and
here
I
have
a
nice
inline
experience.
So
I
could
say
something
like
hello,
SharePoint
framework
and
I
could
select
all
of
this
text
and
make
it
bold
or
make
it
very
big.
With
help
with
this
heading
frame
here
then
I
can
save
all
my
changes
by
just
clicking
publish
the
same
page
will
be
saved,
and
here
we
go.
A
We
actually
have
our
custom
page
that
we've
created
here
now
before
we
part
here.
Let's
talk
a
little
about
validating
your
local
SharePoint
framework
development
configuration
your
first
guy
need
to
install
the
required
runtimes
and
tools
and
that's
installing
nodejs
NPM.
Those
are
both
that's
included
with
nodejs
you're,
then
gonna
need
to
install
at
yeoman
the
SharePoint
framework
generator
for
yeoman
as
well
and
gulp.
A
So
let's
see
how
to
do
this
in
this
next
demo.
Now
the
next
thing
I'd
like
to
do
is
I'd
like
to
use
the
tools
that
we
set
up
in
the
previous
demo
to
go
about
creating
a
brand
new
project
and
see
what
it
looks
like
so
I'm
gonna
come
over
here
and
let's
do
a
let's
do
a
clear
out
here
and
I'm
gonna
jump
over
here
into
my
dev
folder
and
we'll
make
a
new
folder
here
called
my
first
web
part.
A
And
I'm
gonna
run
the
generator
by
saying
yo
at
Microsoft,
slash
SharePoint.
What
this
is
gonna
do
is
it's
gonna
start
up
the
yeoman
generator
so
first
time,
I'm
running
it
something
get
a
little
experience
here.
Just
say
yes,
now
it's
gonna
say:
what
do
you
want
to
call
it
so
I'm
gonna
call
mine,
hello
world.
A
It's
gonna
say
what
baseline
packages
do
you
want
to
target
your
component
for
I'm,
gonna,
say
SharePoint
Online.
If
I
chose
one
of
the
other
options,
it
would
limit
the
things
that
I
could
create
that
are
only
available
in
SharePoint
Online.
It
doesn't
really
make
a
difference
in
this
part
of
the
demo,
so
I'm
just
kind
of
leave
it.
As
is
we
moved
into
our
existing
folder
where
we
want
to
create
the
project
so
I'll
just
leave
it
as
use
the
current
folder.
A
It's
then
going
to
ask
us
if
we
will
allow
tenant
admin,
the
choice
of
being
able
to
deploy
the
solution
to
all
sites
immediately
without
running
the
future
deployment.
I'm
gonna
choose
no
as
being
the
default
option.
There
we'll
talk
about
that
in
other
modules,
then
it's
gonna
ask
me:
do
you
want
to
allow
or
sorry
which
type
of
client
side
component
you
want
to
create
now
said
I
want
to
create
a
web
part.
My
web
parts
can
be
named,
HelloWorld
and
I.
A
A
And
here
what
you
can
see
is
that
it's
provision
has
created
all
those
files
that
we
need
for
our
project.
In
the
background,
what
it's
doing
is
it's
running,
npm
install
and
it's
downloading
all
the
packages
that
are
defined
here
in
package
JSON
that
our
project
needs
in
order
to
run
its
downloading
all
those
files
in
the
background
force
that
it
needs
so
these
packages,
plus
all
the
packages
that
it
needs
now.
A
A
Okay,
so
now
that
our
project
has
been
provisioned,
the
next
step
we
have
to
do
before
we
can
run.
This
is
I
need
to
do.
I
run
this
gulp
tasks.
What
you'll
see
here
is
I
have
a
task,
that's
available
to
me
called
Trust
Deb,
cert
and
I
need
to
do
this
before
I
run
my
very
first
project.
Otherwise,
I'm
gonna
get
an
error
when
this
thing
runs.
So
what
gulp
task
is
doing
is
it's
looking
at
all
the
tasks
that
have
been
installed
by
the
SharePoint
frameworks
generator?
A
There
we
go
so
we're
good
so
now
without
doing
anything
special
about
our
with
our
web
part.
I'm
just
gonna
go
ahead
and
try
running
it
so
I'll
say
gulp
serve
and
what
this
is
gonna
do
is
create
or
compile
and
build
up
the
project,
so
that
I
can
then
use
it
in
a
SharePoint
environment.
We're
not
gonna
do
anything
special
with
this
web
part
right
now.
I
just
want
to
show
you
that
it's
working,
so
here
we
go.
We
create
one
called
hello
world.
A
So
if
I
click
on
this
plus
I
should
see
hello,
world
and
sure
enough,
I
do
and
I
should
be
able
to
edit
it
and
say
hello,
SharePoint
framework,
and
so
this
is
proving
that
everything
we've
installed
and
setup
is
working
in
our
SharePoint
local
developer.
Experience
for
working
with
the
SharePoint
framework,
so
in
future
modules
we'll
see
how
to
do
a
whole
bunch
more
stuff.
A
In
this
module
we
looked
at
adding
client-side
web
parts
to
modern
pages
and
introduced
the
new
web
part
model,
client-side
web
part
development
and
then
how
to
also
validate
our
local
SharePoint
developer
environment.
That
concludes
this
module.
I
hope
you
got
a
lot
out
of
this
getting
started
module
and,
in
future
modules,
we'll
dive
into
the
depths
of
a
lot
more
stuff
that
we
can
do
at
the
SharePoint
framework.
Thanks
for
watching.